日本語
サイトをチェック

OGPタグの設定方法：og:imageの指定とリンクプレビューの確認

SEOgrinder 編集部 · 公開日 · 読了時間 約13分

結論： OGPタグ（Open Graph Protocol のタグ）は、ページの head に書く meta タグで、誰かがリンクを共有したときに、SNS やメッセンジャーがどのタイトル、説明文、画像を表示するかを伝えます。プロトコルが必須としているのは og:title、og:type、og:image、og:url の4つで、og:description も加えておくと安心です。画像は 1200 × 630 ピクセル以上、8 MB 以下にして、https から始まる完全なアドレスで指定します。タグは、あとから実行される JavaScript ではなく、サーバーが返す HTML の中に書いてください。順位への効果は証明されていません。OGPタグが左右するのは、共有されたリンクの見た目です。

OGPタグとは？

Open Graph は、Web ページが自分自身を「オブジェクト」として、つまりタイトル、種類、画像、アドレスで説明するためのプロトコルです。ogp.me によると、もともとは Facebook で作られました。使い方は、ページの head に meta タグを追加するだけです。誰かが投稿やチャットにあなたのリンクを貼ると、プラットフォームはそのページを取得し、これらのタグを読んで、プレビューのカードを作ります。タグがなければ、プラットフォームはどのタイトル、説明文、画像を使うかを推測するしかありません。

プロトコルは、すべてのページに必須の4項目と、任意ですが一般に推奨される1項目を挙げています。

タグ内容扱い
og:titleプレビューに表示したいオブジェクトのタイトル必須
og:typeオブジェクトの種類。たとえば website や article必須
og:imageページを代表する画像のアドレス必須
og:urlページの正規のアドレス。恒久的な ID として使われる必須
og:description1～2 文の説明任意（一般に推奨）

og:type の値は、単なるラベルではありません。ogp.me によると、選んだ種類によって追加のプロパティが使えるようになります。article の場合、プロトコルは article:published_time や article:modified_time などを挙げています。そのほかの任意のタグには、サイト全体の名前を表す og:site_name と、タグの言語を表す og:locale（既定値は en_US）があります。

OGPタグの最小限の HTML

そのまま調整して使える一式を示します。head 要素の中、通常の title タグの隣に置いてください。（ogp.me の例では html 要素に prefix 属性も付けていますが、主要なプラットフォームはなくてもタグを読み取ります。）

<head>
  <title>OGPタグの設定方法：og:imageの指定</title>
  <meta property="og:title" content="OGPタグの設定方法：og:imageの指定">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://example.com/open-graph-tags">
  <meta property="og:image" content="https://example.com/images/open-graph-tags.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="画像・タイトル・説明文が並ぶリンクプレビューのカード">
  <meta property="og:description" content="OGPタグの必須4項目、画像サイズのルール、リンクプレビューの確認方法。">
  <meta property="og:site_name" content="Example">
</head>

細かい点をいくつか補足します。

  • og:url は恒久的な ID です。 ogp.me は、これをオブジェクトの正規のアドレスと定義しています。canonical のリンクと同じアドレスを、トラッキング用のパラメーターなしで指定します。
  • 画像のアドレスは完全な形で書きます。 ogp.me の例はどれも完全なアドレスです。/images/card.png のような相対パスは、クローラーごとの解決の仕方に左右されるので、頼らないでください。
  • 幅と高さを指定すると役立ちます。 Facebook のドキュメントによると、この2つのタグがあれば、クローラーは画像をいったんダウンロードして処理しなくても、すぐに表示できます。
  • og:image:alt も付けます。 ogp.me は、画像を指定するページには、そこに何が写っているかの説明も指定すべきだとしています（キャプションではなく説明です）。

og:image のルール：サイズ・ファイル・アドレス

最も明確な数値を出しているのは Facebook で、リンク共有での画像のページに載っています。このセクションの基準はここです。

  • 許容される最小サイズは 200 × 200 ピクセルです。
  • ファイルサイズは 8 MB を超えてはいけません。
  • 高解像度の端末で最もきれいに表示するには、1200 × 630 ピクセル以上にします。
  • リンク投稿で大きな画像を表示するには、最低でも 600 × 315 ピクセルが必要です。それより小さい画像も表示されますが、ずっと小さくなります。
  • 縦横比はできるだけ 1.91 : 1 に近づけると、画像全体がトリミングなしで表示されます。1200 × 630 はおよそ 1.905 : 1 で、このサイズがよく選ばれる理由です。
  • クローラーが受け付ける符号化は gzip と deflate だけです。サーバーや CDN がどちらかで応答しているかを確認してください。

これらは Facebook のルールです。ほかのアプリやメッセンジャーも同じタグを読みますが、その制限はこの記事では扱いません。大切な場所では、それぞれ実際に試してください。参考までに、SEOgrinder のブログページが使っているプレビュー画像は 1200 × 630 ピクセルです。

あと2つの条件は、サイズではなくアクセスに関するものです。画像は公開されている必要があります。前にログインを置かない、画像の置き場所のフォルダーを robots.txt の規則でブロックしない、ということです。クローラーがファイルを取得できなければ、どんなに良い画像でもプレビューには画像が出ません。

ページごとに専用のOGPタグを付ける

og:url はオブジェクトの恒久的な ID なので、ページごとに違う値にする必要があります。ほかのタグも同じです。

  • og:title は、サイト全体の名前ではなく、そのページが何についてのものかを書きます。
  • og:description は、そのページを1～2文でまとめます。
  • og:image は、そのページに合ったものを見せます。専用の画像がないページ用に、既定の画像を1枚用意しておきます。
  • og:type も変えられます。トップページなら website、ブログ記事やニュースなら article です。

どんな技術を使っていても、タグは手で書くのではなく、各ページのデータから生成してください。Node での小さな例です。

const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');

function openGraphTags(page) {
  return [
    ['og:title', page.title],
    ['og:type', page.type || 'website'],
    ['og:url', `https://example.com${page.path}`],
    ['og:image', page.image || 'https://example.com/images/default-card.png'],
    ['og:description', page.description],
  ].filter(([, content]) => content != null && content !== '').map(([property, content]) => `<meta property="${property}" content="${esc(content)}">`).join('\n');
}

esc 関数は重要です。タイトルに引用符が含まれていると、属性が途中で閉じてタグが壊れてしまうからです。CMS を使っているなら、ページごとに共有用の画像を設定できる項目を探してください。最後に確認するものは同じです。配信された HTML の中にあるタグです。

OGPタグは配信される HTML に書く

最近のサイトの多くは、ほとんど空の HTML の殻を返し、ページの残りはブラウザー内で JavaScript に組み立てさせています。Google はこれに対応できます。JavaScript に関するドキュメントによると、検索は常に最新版の Chromium でページをレンダリングします。ただし、同じページには、すべてのボットが JavaScript を実行できるわけではないため、サーバーサイドレンダリングやプリレンダリングは今も良い方法だとも書かれています。

AI クローラーについては、測定結果があります。2024 年 12 月に Vercel と MERJ は、調査した主要な AI クローラーのどれも JavaScript を実行していないと報告しました。これは 2024 年時点のスナップショットで、その後に再確認はされていません。リンクプレビューについても、同じ論理から安全な原則が導けます。タグがスクリプトの実行後にしか現れないなら、スクリプトを実行しないクローラーには見えません。SEOgrinder はこのようなページを「ページがブラウザー内でしか組み立てられていない」と指摘し、多くの AI クローラーは JavaScript を実行せず、ほぼ空のページを見ていると補足します。

確認は10秒でできます。

curl -sL https://example.com/ | grep -io '<meta[^>]*og:[^>]*>'

タグが返ってくれば、配信された HTML の中にあります。何も返ってこないのに、ブラウザーのデベロッパーツールではタグが見える場合は、スクリプトがタグを遅れて追加しています。ブラウザーの「ページのソースを表示」でも同じ確認ができます。デベロッパーツールが見せる実行後のページではなく、配信された HTML が表示されます。直し方は、サーバー側でレンダリングするか、ページを事前に生成して、タイトル、本文、タグを最初の応答に入れることです。

リンクプレビューを確認する方法

Facebook の Sharing Debugger は、クローラーが読み取ったタグとエラーを表示します。利用には Facebook のログインが必要です。Facebook の画像に関するドキュメントによると、アドレスをここに通すとメタデータの事前取得も行われます。これはキャッシュの面で重要です。

  • Facebook はすべての画像をアドレス単位でキャッシュします。画像を差し替えるときは、新しい画像には新しい URL を使ってください。そうしないと古い画像が残ります。
  • 古い画像は削除しないでください。既存の投稿が参照している可能性があります。
  • ある URL の画像を変更しても、過去に共有された投稿のプレビューは更新されません。それらは更新し直す必要があります。
  • クローラーは、画像を表示できるようになる前に、少なくとも一度は画像を見ている必要があります。事前取得をしないと、最初にリンクを共有した人には画像が表示されないことがあります。

公開する前に、次のリストを確認してください。

  1. curl でページを取得し、5つのタグが最初の応答に入っていることを確かめる。
  2. 画像のアドレスを単体で開く。ログインなしで、ステータス 200 で読み込めること。
  3. サイズを確認する。1200 × 630 ピクセル以上、8 MB 以下。
  4. ページを Sharing Debugger に通し、エラーと警告を読む。
  5. ページの種類ごとに1ページずつ繰り返す。トップページ、記事、商品など。

SEOgrinder が OGPタグを確認する方法

SEOgrinder に公開ページのアドレスを入力すると、レポートに SNS プレビューが含まれ、共有したときのページの見え方が分かります。ツールがタグを読み取って画像を読み込み、見つかった内容を報告します。アカウント登録は不要で、無料です。ここで重要な指摘は次のとおりです。

  • 共有時のプレビューが不完全です： 画像、タイトル、説明文のうち何が欠けているかを示します。
  • プレビュー画像が読み込めません： 画像がエラーのステータスを返したときに表示されます。そのステータスと、よくある原因（アドレスの誤り、ファイルの前にあるログイン、robots.txt のブロック）が示されます。この指摘によると、その場合 LinkedIn・WhatsApp・X では、リンクが画像なしで表示されます。
  • プレビュー画像が非常に小さいです： 600 × 315 ピクセル未満のときに表示されます（Facebook では小さなサムネイルとしてしか表示されません）。最小サイズの 200 × 200 を下回る画像は、別に指摘されます。
  • ページがブラウザー内でしか組み立てられていない： 画面をブラウザー内で組み立てるページに対する指摘です。

SEOgrinder が、すべてのネットワークでカードがどう描画されるかを見せることはできません。確認するのはタグとファイルで、自分で手を入れられる部分です。最終的な見た目の確認には、デバッガーを使ってください。

よくある間違い

  • 画像のパスが相対パス。 https:// から始まる完全なアドレスを使います。
  • 取得できない画像。 ログイン、ファイアウォールの規則、画像フォルダーに対する robots.txt の記述があると、プレビューに画像が出ません。
  • 画像が小さすぎる。 600 × 315 ピクセル未満だと小さく表示され、200 × 200 未満だとまったく表示されないことがあります。
  • 説明文がない。 og:description はプロトコル上は任意ですが、ないとプラットフォームが推測します。
  • 全ページが同じタグ。 共有すると、どの記事もトップページと同じ見た目になり、og:url も何も識別しなくなります。
  • 同じアドレスのまま画像を差し替える。 Facebook は URL 単位でキャッシュするので、新しいファイルは新しい名前で公開します。
  • JavaScript の実行後にしか存在しないタグ。 配信される HTML の中に入れてください。
  • 値に含まれるエスケープしていない引用符。 属性がそこで終わり、タグが途切れます。
  • og:url にトラッキング用のアドレスを入れる。 このタグには正規のアドレスを入れます。

よくある質問

OGPタグは順位を決める要因ですか？

そうだという証拠はありません。Open Graph が決めるのは、共有されたリンクが SNS やメッセンジャーでどう見えるかです。ここで使った出典のどれにも、順位との結び付きは書かれていません。

og:image のサイズはどれにすればよいですか？

1200 × 630 ピクセルで、縦横比は 1.91 : 1 に近く、8 MB 以下です。Facebook の推奨に沿っており、SEOgrinder のブログページのプレビュー画像と同じサイズです。

og:description は必要ですか？

プロトコルでは任意で、一般に推奨されると位置づけられています。ないと、プラットフォームがページから説明文を推測するしかないので、書いておいてください。

古い画像がいつまでも表示されるのはなぜですか？

Facebook は画像をアドレス単位でキャッシュするからです。新しい画像は新しい URL で公開し、ページを Sharing Debugger に通してください。過去の投稿は自動では更新されません。

twitter:card についてはどうですか？

このタグは Open Graph プロトコルの一部ではありません。SEOgrinder は、プレビューが不完全なときの修正のヒントとして、twitter:card を summary_large_image に設定することも提案しています。X のルールはこの記事では扱わないので、X 自身のドキュメントで確認してください。

コーディングエージェントにタグを追加してもらえますか？

機械的な部分は任せられます。テンプレートにタグを書き込み、curl で確認する作業です。レポートの「AI に渡す」を使うと、指摘が Markdown の作業指示書になり、タスクごとに確認できる目標が付きます。どの画像を選び、どんな文面にするかは、あなたの仕事として残ります。

次の一歩

トップページの無料スキャンを実行し、SNS プレビューと上で挙げた指摘を見てください。順番に直し、画像を差し替えるなら新しいアドレスで公開して、ページを Sharing Debugger に通します。そのあともう一度スキャンして、プレビューが完全になったことを確かめましょう。サイト全体の点検の順序は、SEOチェックリストの記事にまとめています。

ブログのほかの記事