英語版はこちら: Open Graph Tags Explained (Qiita EN)
ページを公開して、URLをSlackやLinkedInに貼ってみたら、リンクプレビューのタイトルが違う、OGP画像が古いまま、そもそも画像が出ない……という経験はないでしょうか。あのカードはページのレイアウトから作られているわけではなく、HTMLの <head> にある数行のメタタグから組み立てられています。
この記事では、OGP（Open Graph）とは何か、本当に必要なOGPタグはどれか、OGP画像のサイズはいくつにすべきか、Twitterカードとの関係、各プラットフォームがOGPをどう読むか、そしてキャッシュされた古いリンクプレビューをどうデバッグするかをまとめます。あわせて、私が自作した 無料のOGPチェッカー（Open Graph checker）「OG Scope」 を使ったOGP確認の手順も紹介します。
OGP（Open Graph）とは？
Open Graph protocol（OGP）は、ページがシェアされたときに自分自身をどう見せるかを記述するための、<head> 内に置く小さな <meta> タグのセットです。もともとはFacebookが策定したもので、今ではFacebook、LinkedIn、WhatsApp、Slack、Discord、TelegramなどがURL貼り付け時にこの情報を読み取ります。
OGPタグがないページでは、各アプリがそれぞれ推測で表示を決めます。たいていはページ内の適当な画像や、ブランド名が詰め込まれたブラウザタブ用の <title> が使われてしまいます。OGPタグをきちんと設定しておけば、見出し・説明文・画像を自分でコントロールできます。
ひとつ注意点があります。ほとんどのSNSクローラーは JavaScriptを実行しません。SPAでクライアント側だけでメタタグを追加している場合、クローラーからは見えません。タグは最初のHTMLレスポンスに含まれている必要があるので、SSR・SSG・プリレンダリングのいずれかを使いましょう。
OGPタグとは？最低限押さえるべきタグ
「OGPタグって何を書けばいいの？」という質問への答えは、実はかなり短いリストです。ほぼすべての仕事は次の5つのタグが担っています。
| タグ | 役割 |
|---|---|
og:title |
カードに表示される見出し |
og:description |
見出しの下に出る短い説明文 |
og:image |
テキストの横や上に表示される画像 |
og:url |
そのカードが指す正規（canonical）URL |
og:type |
通常は website か article
|
実用的なスタートセットはこんな感じです。
<head>
<title>Field Notes | Example Studio</title>
<meta name="description" content="A short summary for search result snippets." />
<!-- Open Graph -->
<meta property="og:title" content="Field notes from a wet week" />
<meta property="og:description" content="What changed, in two lines, for someone who has not opened the page." />
<meta property="og:image" content="https://example.com/covers/field-notes.jpg" />
<meta property="og:url" content="https://example.com/blog/field-notes" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Example Studio" />
</head>
OGPでは name= ではなく property= を使う点に注意してください。ドキュメントやフォーラムで「meta property og title」「meta property og image」のような書き方を見かけたら、上の <meta property="og:..."> の行のことを指しています。
og:title
og:title はカード上でユーザーが目にする一文です。長すぎると途中で切られるので、60文字前後（日本語なら30〜40文字程度）を目安にしましょう。ブラウザのタブ向けではなく、タイムライン向けに書くのがポイントです。「Field Notes | Studio」はタブのタイトルとしては良いですが、カードの見出しなら「Field notes from a wet week」のほうが伝わります。
og:description とメタディスクリプションの違い
メタディスクリプション（meta description）は検索エンジンが検索結果のスニペットとして表示する かもしれない 文章で、og:description はSNSカードに表示される文章です。同じ文を使っても問題なく、多くのテンプレートは片方をもう片方にコピーしています。ただ、キーワードを詰め込んだような文章になってくると話は別です。カード用の一文は「タップするかどうか迷っている人」に向けて書きましょう。なお、og:description がない場合、メタディスクリプションにフォールバックするプラットフォームもあります。
SEOの観点では現実的に考えておくのが大事です。OGPタグそのものは検索順位の要因ではありません。変わるのはシェアされたときのリンクの見え方で、見栄えの良いカードほどクリックされやすくなります。
og:url と og:type
og:url には、トラッキングパラメータを含まない最終的な正規の公開URL、つまり実際にユーザーに着地してほしいURLを指定します。og:type はあまり悩む必要はありません。記事なら article、それ以外は website で十分です。og:type が間違っていてカードが壊れることはほとんどありませんが、画像がないとカードは確実に崩れます。
OGP画像とは？
OGP画像とは、og:image タグで指定したファイルのことです。ページ内の最初の <img> でも、CSSの背景画像でもありません。あくまで og:image に書かれたURLそのものです。
OGP画像が表示されない原因は、だいたい次の3つのどれかです。
-
相対パスになっている。
content="/og.jpg"は頭の中では動きそうですが、クローラーが期待どおりに解決してくれるとは限りません。必ずhttps://から始まる絶対URLを使いましょう。 - 公開されていない。 ログインやステージング環境のパスワード、ボット対策ルールの裏に画像が置かれている。
- URLに有効期限がある。 今日は有効でも来週には403を返す、署名付きCDNリンクなど。
<!-- ❌ fragile -->
<meta property="og:image" content="/covers/field-notes.jpg" />
<!-- ✅ absolute, public, stable -->
<meta property="og:image" content="https://example.com/covers/field-notes.jpg" />
OGP画像のサイズはいくつにすべき？
大きな画像プレビュー向けのOGP画像サイズとして最も一般的なのは 1200 × 630 px です。LinkedInでも1200 × 627か1200 × 630にしておけば無難です。形式はJPG・PNG・WebPが広くサポートされています。
Facebook、LinkedIn、Slackは 約1.91:1 にトリミングすることが多いです。端の部分が切られるので、顔・ロゴ・テキストは中央寄せにしておきましょう。画像内の文字は大きめに。小さい文字はカードサイズになると灰色のにじみにしか見えません。
何をチェックすべきか（記述した値、解決後のURL、ファイルが読み込めるか、ピクセルサイズ）の詳細は、OGP画像チェッカーが確認する項目のガイド を参照してください。
Twitterカード（X）
Xは今でも独自の twitter:* タグを読みます。こちらは property= ではなく name= を使います。
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Field notes from a wet week" />
<meta name="twitter:description" content="Two lines that stand alone in the feed." />
<meta name="twitter:image" content="https://example.com/covers/field-notes.jpg" />
<meta name="twitter:site" content="@example" />
一番重要なのは twitter:card です。
-
summaryはテキストの横に小さな画像が並ぶコンパクトなカードです。何も指定しない場合の従来のデフォルトです。 -
summary_large_imageはタイトルの上に横長の大きな画像を表示します。
大きな画像のレイアウトにしたいなら、summary_large_image を明示的に指定しましょう。Twitter用タグがない場合、XはOGPの対応するタグにフォールバックできます（twitter:title → og:title、twitter:image → og:image）。twitter:site と twitter:creator はただのアカウント名なので、画像のないカードを救ってはくれません。
自分のページがどのレイアウトを要求していて、どのフォールバックが効いているかは、実際にポストしてTwitterのプレビューを確認する前に、summary と summary_large_image の違いも解説しているTwitterカードチェッカー で確認できます。
各プラットフォームはOGPタグをどう読むか
Facebookのリンクプレビューは主に og:title、og:description、og:image、og:url を使います。og:title がない場合はHTMLの <title> にフォールバックします。また、Facebookはリンクのメタデータをかなり強めにキャッシュします。「直したのに古いまま」問題の主な原因はこれです。横長のトリミングやキャッシュの挙動については Facebookリンクプレビューのタグとキャッシュに関するガイド で解説しています。
LinkedInのプレビューはOGPタグに加えて、設定していれば og:site_name も読みます。落とし穴は、LinkedInは twitter:image をフォールバックとして使わない ことです。Twitter用タグだけを設定していると、Twitterのプレビューは完璧なのに、LinkedInの投稿では画像が出ない、ということが起こります。投稿作成画面でもカードはキャッシュされます。この2つの問題は LinkedInプレビューがカードに何を読むかのガイド で詳しく扱っています。
Slack・WhatsApp・Discord・Telegram
これらのアプリもOGPタグからリンクを展開します。Slackはタイトル・説明文・画像を、たいてい横長のトリミングで表示します。WhatsAppはタイトル・説明文・画像からコンパクトなカードを作ります。主要なOGPタグが正しく、画像が公開された絶対URLであれば、これらのプレビューも基本的に問題なく動きます。とはいえ、アプリごとにキャッシュやトリミングの仕方が違うので、大きなリリースの前には確認しておきましょう。
古い・壊れたリンクプレビューのデバッグ
クライアントから「リンクを貼ったときの画像や文字がおかしい」と言われたら、それは画像・見出し・その下の一文のことです。問題は2つに分けて考えます。
- 公開中のHTMLが間違っている。 タグが足りない、画像URLが相対パス、JavaScript実行後にしかタグが存在しない、など。
- HTMLは正しいが、プラットフォームが古い取得結果をキャッシュしている。
1つ目は curl で自分で確認できます。curl はおおむねクローラーと同じものを見ています。
# What does the raw HTML say? (no JavaScript executed)
curl -sL https://example.com/blog/field-notes | grep -iE 'og:|twitter:|<title|name="description"'
# Does the image actually load, and as an image?
curl -sI https://example.com/covers/field-notes.jpg | grep -iE '^HTTP|content-type'
2つ目は、各プラットフォームの公式ツールが必要です。
- Facebook デバッガー（developers.facebook.com のシェアデバッガー）では、Facebookがキャッシュしている内容を確認し、再スクレイピングを依頼できます。
- LinkedIn Post Inspector はLinkedInで同じ役割を果たします。
チャットアプリ向けの小技として、無害なクエリ文字列（?v=2）を付けると、アプリに新しいURLとして扱わせることができます。ただしテスト中だけにとどめ、og:url は正規URLのままにしておきましょう。
OG Scopeでまとめてチェックする
毎回すべてのページに curl を叩くのは面倒なので、無料のOGPチェッカー兼OGPプレビューツール OG Scope を作りました。公開URLを貼り付けて Preview を押すだけで、アカウント登録は不要です。
動作の流れは次のとおりです。
- ブラウザからURLを送信すると、OG Scopeのサーバーが公開HTMLを取得します。安全なリダイレクトは追従し、プライベートアドレスやlocalhostは拒否します。
- OGPタグ、Twitterカードのタグ、ページタイトル、メタディスクリプション、canonical URL、ファビコンを読み取ります。
- Facebook、LinkedIn、X、WhatsApp、Slack、Discord、Telegram の推定カードを、メタデータ一覧表・画像チェック・簡単なチェックリストとあわせて表示します。
メタタグ分析ツールやメタディスクリプションチェッカーとしても使えますが、対象はリンクプレビューを構成するタグ（title、description、canonical、ファビコン、OGP、Twitterカード）に絞っています。SEOのスコアを出すツールではありません。
画像チェックはOGP画像チェッカーとして機能します。記述したとおりの og:image の値、解決後の絶対URL、ファイルが実際に読み込めたか、そしてファイルから読み取れる場合はピクセルサイズを表示します。縦横どちらかが200 px未満なら警告を出します。サイズが読み取れなかった場合、その欄は空欄のままで、推測値は表示しません。
サイト上でも明記している制限事項は次のとおりです。
- カードはあくまで推定です。 Facebook、LinkedIn、Xのスクリーンショットではなく、OG Scopeはこれらの企業とは無関係です。
- 対象ページのJavaScriptは実行しません。タグがクライアント側でしか出てこない場合、OG Scopeからは見えません。ほとんどのクローラーからも見えないので、だからこそ知っておく価値があります。
- 表示されるのはプラットフォームのキャッシュではなく、HTMLを その場で新しく取得した結果 です。その意味で、自分のマークアップ用のOpen Graphデバッガーと言えます。プラットフォーム側のキャッシュをクリアするには、前述の公式ツールが引き続き必要です。
- 取得に成功した結果は約10分間キャッシュされることがあります。検索履歴は保存しません。詳細は aboutページ をご覧ください。
カードに何が表示されるのか、各タグをどう書くべきかをさらに詳しく知りたい方は、Open Graphプレビューガイド をどうぞ。
私が普段やっているワークフローはこんな感じです。
- デプロイする。
- URLをOG Scopeに通して、指摘された箇所（
og:descriptionの欠落、画像の相対パス、twitter:cardの未設定など）を直す。 - FacebookやLinkedInでまだ古いカードが出る場合は、公式ツールで再スクレイピングする。
- 公開で投稿する前に、テスト用のDMにリンクを貼って確認する。
チェックリスト
-
すべてのタグがJSで後から追加されるのではなく、サーバーレンダリングされた
<head>に含まれている -
og:titleはカード向けに書かれていて、60文字前後に収まっている -
og:descriptionは1〜2文のシンプルな文章になっている -
og:imageはHTTPSの絶対URLで、公開アクセス可能、サイズは1200 × 630 - 1.91:1のトリミングを想定して、画像の重要な部分が中央にある
-
og:urlが正規URLになっている -
og:typeがwebsiteまたはarticleになっている -
大きなカードにしたい場合、
twitter:cardをsummary_large_imageにしている -
LinkedInは無視するので、
twitter:imageだけに頼っていない
よくある質問
OGP画像とは何ですか？
og:image で指定されたファイルです。ほとんどのSNSのリンクプレビューカードでメイン画像として表示されます。HTTPSの公開された絶対URLである必要があります。
OGP画像のサイズはどれくらいが良いですか？
1200 × 630 px のJPG・PNG・WebPで、被写体を中央に配置するのがおすすめです。
プレビューに古い画像が表示され続けるのはなぜですか？
プラットフォームが以前の取得結果をキャッシュしているためです。まず公開中のHTMLを確認し、そのうえでFacebookのシェアデバッガーやLinkedIn Post Inspectorで再スクレイピングを依頼してください。
OGPタグがあれば、Twitter用のタグは不要ですか？
XはOGPにフォールバックするので、厳密には必須ではありません。ただし、大きな画像のレイアウトにしたい場合は twitter:card だけは設定しておきましょう。
OG Scopeは無料ですか？入力したURLは保存されますか？
無料で、アカウント登録も不要です。成功した結果は短時間（約10分）キャッシュされますが、検索履歴は残りません。詳しくは プライバシーポリシー をご覧ください。
OG Scopeでおかしなプレビューを見つけたら？
URLと期待していた表示内容を お問い合わせページ から送ってください。
SNSでのシェアをうまくいかせるコツは、<head> に正しいタグを数行書いておくことと、投稿前に一度チェックすること、これだけです。次にシェアするURLを OG Scope に貼って、クローラーから何が見えているか確認してみてください。