OGPしたい（og:*）

<head>
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://example.com/" />
    <meta property="og:title" content="ページのタイトル" />
    <meta property="og:description" content="ページの説明" />
    <meta property="og:image" content="https://example.com/ogp.png" />
    <meta property="og:site_name" content="サイト名" />
</head>

OGP（The Open Graph Protocol）は、ページがSNSでシェアされたときの見た目を指定するためのメタデータです。 metaタグのproperty属性にog:*のキーを、content属性に値を書きます。

nameではなくpropertyを使う点が、他のmetaタグと違います。

基本の6項目したい

<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/blog/1" />
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の要約" />
<meta property="og:image" content="https://example.com/blog/1/ogp.png" />
<meta property="og:site_name" content="サイト名" />

まず設定するのはこの6つです。

  • og:type … ページの種類。トップページはwebsite、記事はarticle

  • og:url … ページのURL。相対パスではなくhttps://から始まる絶対URLにします

  • og:title … シェア時に表示されるタイトル

  • og:description … シェア時に表示される説明文

  • og:image … サムネイル画像のURL。これも絶対URLにします

  • og:site_name … サイト全体の名前

注釈

昔は<head prefix="og: http://ogp.me/ns#">のようにprefix属性が必要とされましたが、 いまの主要なSNSはprefixなしでもog:*を認識するので省略してかまいません。

OGP画像を細かく指定したい（og:image:*）

<meta property="og:image" content="https://example.com/ogp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="画像の内容の説明" />

og:imageに続けてog:image:*を書くと、画像の詳細を補足できます。

  • og:image:type … 画像のMIMEタイプ（image/pngなど）

  • og:image:width / og:image:height … 画像のピクセルサイズ

  • og:image:alt … 画像の代替テキスト

いずれも省略できます。 サイズを伝えておくと、SNS側が画像を読み込む前にレイアウトを確保できます。 OGP画像は1200 x 630ピクセルがよく使われます。

X（旧Twitter）のCardしたい（twitter:*）

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@サイトのアカウント" />

X（旧Twitter）は独自のtwitter:*メタデータを持ちますが、 twitter:*がない項目はog:*の値にフォールバックします。

そのため、OGPを設定していれば、追加で書くのは次のくらいで足ります。

  • twitter:card … カードの形式。大きい画像ならsummary_large_image、小さいサムネイルならsummary

  • twitter:site … サイトのXアカウント（@から始まる）

twitter:*はpropertyではなくname属性を使います。

確認したい

書いたOGPが意図どおりに表示されるかは、外部のプレビューツールで確認できます。

SNSはOGPの情報をキャッシュするので、修正がすぐ反映されないことがあります。 デバッガーからキャッシュの再取得を指示できます。

リファレンス