OGP(Open Graph Protocol)

公開日：2020-10-18 更新日：2020-10-18
ツイッターなどの SNS で記事をシェアされた時に、画像や説明を指定したい場合は、OGP(Open Graph Protocol)のメタタグを指定します。

OGPを使用する宣言
<html lang="ja" prefix="og: https://ogp.me/ns#">

OGPのメタタグ
<meta property="og:title" content="タイトル">
<meta property="og:type" content="article または website">
<meta property="og:url" content="https://～(絶対パス)">
<meta property="og:image" content="https://～.jpg などの画像パス">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="説明">
og:type は、他にもいろいろありますが、記事であれば article で良いと思います。

ツイッター専用のメタタグもあります。
<meta name="twitter:card" content="summary または summary_large_image など。">
<meta name="twitter:site" content="@サイト用のアカウント名">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="説明">
<meta name="twitter:image" content="https://～.jpg などの画像パス">
ツイッターでどのように表示されるかは、Card validatorで、シェアする URL を入力すると確認できます。

また、1度シェアすると、ツイッター側に画像がキャッシュされて、変更してもうまく反映されなくなる可能性があります。
その場合は、Card validatorで確認してみてください。

Tag

New Article