Open Graph メタタグ完全ガイド：ソーシャルリンクプレビューを制御する

Open Graph メタタグとは、HTML ページの <head> に置く <meta property="og:…"> 形式のタグだ。誰かが Facebook、LinkedIn、Slack、Discord、WhatsApp をはじめとするほとんどのプラットフォームであなたのリンクをシェアしたとき、表示されるタイトル・説明文・画像を、このタグが制御する。一度定義しておけば、ほぼすべてのネットワークが素の URL ではなくリッチなプレビューを描画してくれる。X（Twitter）は独自の Twitter Card タグを読むが、対応するタグが無ければ Open Graph タグにフォールバックする。だから、しっかり作り込んだ一組のタグさえあれば、リンクが届きうるほぼすべての場所をカバーできる。

この一つのプロトコルが、見出し・要約・1200×630 の画像付きのリンクと、誰もクリックしない裸のアドレスとを分ける。

本ガイドでは、必須の Open Graph タグ 4 つ、og:image のサイズ規則、Twitter Card のフォールバック、各プラットフォームがプレビューを描画・キャッシュする仕組み、シェアが空白になる典型的なミス、そしてデプロイ後に結果をデバッグする方法までを順に扱う。

Open Graph メタタグとは何か

Open Graph は、もともと Facebook で作られ ogp.me で仕様が公開されているオープンなプロトコルで、任意の Web ページが自身をリッチなオブジェクトとして記述できるようにする。プラットフォームはリンクの内容を推測する代わりに、わずかなタグを読み取ってプレビューカードに変換する。

構文は、property 属性と content 値を持つただの HTML メタタグで、ドキュメントの <head> 内に置く。

<meta property="og:title" content="How Open Graph Tags Work">

property 属性に注目してほしい。SEO 向けの従来型 HTML メタタグ（meta description、robots、viewport）は name を使う。Open Graph は property を使い、Twitter Card はまた name に戻る。ここを取り違えると通らない。property="og:title" を期待するクローラーは、name="og:title" を読み取らない。

リンクをカードに変換するほぼすべてのプラットフォームが Open Graph を読む。Facebook、LinkedIn、Slack、Discord、WhatsApp、Pinterest、Telegram はいずれもこれを解釈する。X は目立った例外だ。独自の twitter:* タグを優先するが、見つからないものは og:* タグにフォールバックする。だから重複して書く必要はめったにない。

Open Graph は従来型の SEO メタタグを置き換えるのではなく、その隣に並んで機能する。<title> と canonical リンクは依然として検索を左右し、meta description は依然として検索スニペットを形づくる。Open Graph タグはランキングには一切触れず、ソーシャルカードを担当する。完成した <head> はたいてい、これら 3 つのファミリーをまとめて携えている。

これらを手書きするのは繰り返しが多く、気づかないうちに間違えやすい。Open Graph・メタタグジェネレーターは、短いフォームからブロック全体を組み立て、その場でプレビューし、厄介な細部（属性名、絶対 URL、画像サイズ）を一貫して保ってくれる。だから自分で覚えておく必要はない。

本当に必要な Open Graph のコアタグ

Open Graph は数十のプロパティを定義しているが、良いシェアに必要なのはほんの一握りだ。まず必須の 4 つから始め、説明文を 1 つ足す。ほとんどのページはそこで止めていい。

必須の 4 タグ：og:title、og:type、og:image、og:url

プロトコル上、4 つのタグが必須だ。1 つでも欠けると、プラットフォームはカードを取り下げるか、出来の悪い推測で埋める。

<meta property="og:title" content="How Open Graph Tags Work">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:url" content="https://example.com/open-graph-guide">

og:title はカード上の太字の見出しだ。og:type はオブジェクトを分類する（詳しくは後述）。og:image はプレビュー画像で、絶対 HTTPS URL でなければならない。og:url はページの正規アドレスで、プラットフォームはこれを使ってシェアを重複排除し、エンゲージメントを集約する。

og:description と SEO の meta description との違い

og:description は、シェアカードのタイトル下に表示される短い要約だ。

<meta property="og:description" content="A practical guide to og:title, og:image and Twitter Card tags.">

これは SEO の <meta name="description"> とは別のタグで、別の読み手のためのものだ。meta description は Google の検索結果ページでクリックを奪い合い、おおよそ 155 文字を基準に測られる。一方、Open Graph の説明文はソーシャルカード上で読まれ、そこではスペースがより限られ、最初の一文が重みを担う。og:description を省くと、ほとんどのプラットフォームは meta description にフォールバックするので、たいていは省略して構わない。ソーシャル向けのフックが検索スニペットと異なるべきときにだけ、専用のものを書けばいい。

og:type とそれが解放する機能

og:type は、ページがどんな種類のものかをプラットフォームに伝える。よく使う値は website、article、product、profile だ。ホームページやランディングページは website、ブログ記事は article になる。

article を選ぶと、素の website タイプでは使えない追加のプロパティと機能が解放される。

<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-07-16T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">

これらの article:* タグは公開日や署名（byline）をカードに送り込み、さらにページを Pinterest のリッチピン（Rich Pins）の対象にする。リッチピンは Open Graph マークアップから構造化データを直接引き出す。記事には og:type を article、それ以外すべてには website を設定すれば、対応するフィールドは自然とついてくる。

以下は、ほとんどのページが実際に使うタグのリファレンスだ。

タグ	制御する内容	値の例
`og:title`	カードに表示される見出し	`How Open Graph Tags Work`
`og:type`	オブジェクトの種類：`website`、`article`、`product`、`profile`	`article`
`og:image`	プレビュー画像（絶対 HTTPS URL）	`https://example.com/og/cover.png`
`og:url`	ページの正規 URL	`https://example.com/open-graph-guide`
`og:description`	タイトル下の要約	`A practical guide to social meta tags.`
`og:site_name`	サイト全体の名前	`Example`
`og:locale`	コンテンツの言語と地域	`en_US`

og:image：サイズ・比率・シェアを壊す規則

画像はプレビューで人が最初に見る部分であり、ほとんどのシェアが崩れる場所でもある。og:image のサイズとフォーマットを正しくすれば、1 つのファイルがどこでも通用する。

1200×630（1.91:1）という普遍的な標準

推奨される og:image のサイズは 1200×630 ピクセル、1.91:1 のアスペクト比だ。この 1 枚の画像が、Facebook、LinkedIn、Slack、Discord、そして X の summary_large_image カードで正しく描画される。だからプラットフォームごとに別のファイルを用意する必要はない。

サイズの下限も重要だ。Facebook は 200×200 より小さい画像を無視し、600×315 未満のものには窮屈な正方形のサムネイルを表示する。幅が 1200 ピクセルを下回ると、大きなカードはぼやけて見え始める。1200×630 を狙えば、すべての閾値を一度にクリアできる。

og:image:width と og:image:height が重要な理由

プラットフォームがあなたのリンクに初めて出会ったとき、画像はまだダウンロードされていない。画像は非同期に取得される。あらかじめ寸法を宣言しておけば、プラットフォームは正しいスペースを確保し、すぐにカードをレイアウトできる。

<meta property="og:image" content="https://example.com/og/cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Open Graph guide cover with the title in large type">

これらを省くと、ページの一番最初のシェアは、クローラーが追いつくまで空白のまま描画されることがある。付けておけば、最初に貼り付けた時点でカードは正しく表示される。og:image:alt タグは、対応するプラットフォームでスクリーンリーダー向けに画像を説明する。

ファイル形式とサイズ

JPG または PNG を使う。どちらもあらゆるクローラーで確実にデコードされる。それこそが og:image の要点だ。自分の制御下にないサーバー上で描画されなければならないのだから。目安としてファイルは 1 MB 未満、WhatsApp 向けには 300 KB 未満に保つ。WhatsApp は他より厳しい。書き出したファイルがそれより重いなら、画像圧縮ツールに通して、見た目の品質を損なわずに 1 MB 未満へ落とそう。

ここでモダンなフォーマットに手を伸ばしたくなるが、ここは我慢のしどころだ。新しいフォーマットはブラウザ向けにはバイト数を節約するが、一部のソーシャルクローラーはそれらを一貫してデコードできない。だから WebP や AVIF の og:image は、それを読めないプラットフォームでは空白で返ってくることがある。そのトレードオフは WebP vs AVIF vs JPEG：2026 年に選ぶべき画像フォーマットで扱っている。シェア画像に限っては、JPG か PNG にとどめよう。プラットフォームは端を異なる形で切り取るので、ロゴと見出しは中央の 1080×600 のセーフゾーン 内に収め、重要なものが切れないようにしよう。

絶対 HTTPS URL の規則

og:image と og:url は、相対パスではなく完全な https://… URL でなければならない。/cover.png のようなパスは、エディタ上でも公開中のページ上でも問題なく解決される。しかし、あなたの URL を取得しに来たクローラーには、それを解決するための基準（base）が無い。だからシェアは空のまま返ってくる。画像はまた、公開されていてアクセス可能でなければならない。robots.txt がクローラーをブロックしていたり、ファイルが認証の背後にあったりすると、プレビューは空白のままになる。

上記すべてを決定づける制約がもう一つある。クローラーは JavaScript を実行しない。Facebook、LinkedIn、WhatsApp、Telegram、Discord は、あなたの生の HTML を取得し、そこに書かれているものを読む。ページ読み込み後にフレームワークがクライアント側で注入したタグは、彼らには見えない。だから Open Graph タグは、サーバーレンダリングされた HTML か静的な HTML の中に存在しなければならない。

Twitter／X カード：1 タグだけ、あとは Open Graph にフォールバック

X は独自の Twitter Card メタタグを使うが、Open Graph との重なりが大きいので、書く量は予想よりずっと少ない。実際には、1 つのタグを足して、残りはフォールバックに任せる。

twitter:card は唯一の必須 Twitter タグ

完全な Open Graph タグ一式があっても、twitter:card が無ければ X はカードをまったく描画しない。これは唯一必須の Twitter Card タグだ。

<meta name="twitter:card" content="summary_large_image">

値がレイアウトを決める。summary_large_image は、1200×630 の画像向けに作られた大きなバナーカードになる。summary は、テキストの横に小さな正方形サムネイルを添えたコンパクトなカードになる。

<meta name="twitter:card" content="summary">

name 属性に注目してほしい。Twitter Card タグは name を使う。Open Graph が使う property ではない。

X が title・description・image で og:* にフォールバックする仕組み

タイトル・説明文・画像については、対応する twitter:* タグが無いとき、X はあなたの og:title、og:description、og:image を読む。だから twitter:title や twitter:image をわざわざ書くことはめったにない。twitter:card を設定し、Open Graph タグをきれいに保てば、X はそれらからカードを組み立てる。

空の twitter:image という罠

このフォールバックには鋭い落とし穴が一つある。空のタグは「存在する」とみなされるのだ。twitter:image を空の値で出力すると、X は og:image へフォールバックせずにその空の値を使い、カードは画像を失う。

<!-- 誤り：フォールバックをブロックし、カードから画像を失わせる -->
<meta name="twitter:image" content="">

<!-- 正しい：タグ自体を省けば X は og:image を読む -->

規則はシンプルだ。空のソーシャルタグは決して出力しない。値が無いときは、そのタグを省く。

Slack と Discord の特有事項

Slack は Twitter Card を先に読み、次に Open Graph を読む。さらに twitter:label と twitter:data を通じて、2 つの追加フィールドを表に出せる。

<meta name="twitter:label1" content="Reading time">
<meta name="twitter:data1" content="11 minutes">
<meta name="twitter:label2" content="Written by">
<meta name="twitter:data2" content="Ada Lovelace">

これらは Slack の展開表示（unfurl）の下に、小さなラベル付きの詳細として表示される。Discord は Open Graph を読み、他の誰も使わない一工夫を加える。埋め込みの左のアクセントバーを、ページの theme-color で着色するのだ。

<meta name="theme-color" content="#5865F2">

各プラットフォームでリンクプレビューがどう描画されるか

同じタグでも、読み手によって異なるソーシャルメディアのリンクプレビューが生まれる。各プラットフォームはタグの独自のサブセットを選び、独自の期間だけキャッシュし、1 つ 2 つの癖を加える。次の表がクイックリファレンスだ。

プラットフォーム	読むタグ	キャッシュ	特徴的な挙動
Facebook	Open Graph	約 30 日	200×200 未満の画像を無視。600×315 未満では小さな正方形を表示
LinkedIn	Open Graph	約 7 日	古いプレビューは Post Inspector で消去
X（Twitter）	`twitter:card` + `og:*` にフォールバック	短い	`twitter:card` が無ければカードは一切出ない
Slack	Twitter Card、次に Open Graph	メッセージごと	`twitter:label`／`twitter:data` を追加フィールドとして描画
Discord	Open Graph	メッセージごと	埋め込みのアクセントバーに `theme-color` を使用
WhatsApp	`og:title` + `og:image`	メッセージごと	メタデータは上部に置きたい。画像は 300 KB 未満に
Telegram	Open Graph	メッセージごと	JPEG か PNG からのみ確実に描画
Pinterest	Open Graph または Schema.org	—	記事のリッチピンには `og:type=article` が必要

キャッシュの列は、よくある驚きを説明してくれる。タグを直し、シェアし直しても、Facebook は何週間も古いタイトルを表示し続ける、というやつだ。Facebook は Open Graph データを約 30 日間、LinkedIn は約 7 日間保持する。だから編集内容は、キャッシュが切れるか、強制的に更新するまで反映されない。下記のデバッガーはまさにそれを行う。

よくある Open Graph のミス（とその見つけ方）

壊れたプレビューのほとんどは、短いリストのエラーに行き着く。どれもローカルでは問題なく見え、クローラーが公開ページを取得したときにだけ失敗する。

相対パスの og:image

相対パスはブラウザ上では描画されるが、シェアすると壊れる。クローラーには、それを解決するための基準 URL が無いからだ。

<!-- シェアすると空白 -->
<meta property="og:image" content="/cover.png">

<!-- どこでも描画される -->
<meta property="og:image" content="https://example.com/cover.png">

og:url の欠落、または canonical との不一致

og:url が無いと、シェア数やエンゲージメントが URL のバリエーション（www の有無、トラッキングパラメータ付き、末尾スラッシュ付き）に散らばってしまう。canonical リンクと og:url の両方を、同じ単一の URL に向けよう。そうすればシグナルはまとまったままになる。

画像が小さすぎる、またはアスペクト比が違う

200×200 未満の画像は問答無用で無視され、1.91:1 から大きく外れたものは、意図しない形で切り取られる。1200×630 で出せば、どのプラットフォームでもフレーミングは予測可能だ。

twitter:card の忘れ

Open Graph タグ一式が揃っていても、twitter:card が無ければ X ではカードが出ない。これは、リンクが LinkedIn では見事に見えるのに X では何も表示されない、最もよくある原因だ。

クローラーに見えないクライアントレンダリングのタグ

シングルページアプリが読み込み後に Open Graph タグを注入すると、JavaScript を実行しないクローラーはそれらを一度も見ない。タグはサーバー側でレンダリングするか、HTML を事前レンダリング（プリレンダリング）しよう。

最初の 1024 バイトより後に置かれた charset

<meta charset="utf-8"> 宣言は、ドキュメントの最初の 1024 バイト以内に現れなければならない。さもないとブラウザはそれを無視し、タイトルや説明文の非 ASCII 文字が文字化けすることがある。<head> の中で一番先頭に置こう。

<head>
  <meta charset="utf-8">
  <!-- 以降にその他すべてが続く -->
</head>

Open Graph タグのテストとデバッグ方法

公開 URL に対して検証していないプレビューを、決して信用してはいけない。重要なプラットフォームは 3 つのツールでカバーでき、どれもキャッシュの強制更新ができる。

Facebook Sharing Debugger は、あなたの公開 URL を取得し、Facebook が何を解析したかを正確に表示し、欠落したタグや不正な形式のタグを一覧にする。最も便利なボタンは「Scrape Again」で、Facebook の約 30 日のキャッシュをオンデマンドで更新する。修正を 1 か月待たずに反映させる、最も速い方法だ。

LinkedIn Post Inspector

LinkedIn Post Inspector は、LinkedIn について同じ仕事をする。URL を貼り付けると、ページを再取得し、LinkedIn の約 7 日のキャッシュをクリアする。だから更新したタイトルや画像は、何日も後ではなく次のシェアで表示される。

X のカード検証は開発者ポータルへ移行した

X はスタンドアロンの Card Validator を廃止した。カード検証は公開 URL ではなく、X 開発者ポータルの中にある。だから多くのチームは別の方法で X カードを確認する。X は og:* にフォールバックするので、Facebook と LinkedIn のデバッガーが X の読むタグをすでに確認してくれており、twitter:card のレイアウトそのものについては、サードパーティのプレビューツールがその隙間を埋める。

デプロイ前にプレビューする

デバッガーは、すでに公開されている URL しか検査できない。空白の画像に気づくには、まずいタイミングだ。編集している最中に、カードをプレビューしよう。Open Graph・メタタグジェネレーターは、あなたが入力した値から Google、Facebook、X、LinkedIn、Slack、Discord のプレビューを描画し、比率の誤りを捉えるためにブラウザ内で og:image の実際の寸法を読み取り、既存の <head> を取り込むこともできる。だから、壊れたシェアを出荷前に診断できる。

クイックチェックリスト

すべてのページが最低限携えるべきものは次のとおりだ。コピーして自分の値に差し替えれば、どこでも描画されるプレビューが手に入る。

<meta charset="utf-8">
<title>Your page title</title>
<meta name="description" content="Your 150-character summary.">
<link rel="canonical" href="https://example.com/page">

<meta property="og:title" content="Your page title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page">
<meta property="og:image" content="https://example.com/og/page.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:description" content="Your 150-character summary.">

<meta name="twitter:card" content="summary_large_image">

出荷前に要点を一通り確認しよう。1200×630 の絶対 HTTPS og:image、canonical と一致する og:url、twitter:card の存在、そしてサーバー側でレンダリングされたタグ。これを速くするユーティリティをもっと広く見て回りたいなら、初心者ガイド：開発者ツールで作業効率を向上が残りをまとめている。ブロック全体を一度に生成してプレビューする準備ができたら、Open Graph・メタタグジェネレーターがそれを書き、チェックし、デプロイ前にすべてのカードを見せてくれる。

よくある質問

Open Graph タグと Twitter Card タグの違いは？

Open Graph は、Facebook、LinkedIn、Slack などが読むクロスプラットフォームのプロトコルだ。一方、Twitter Card タグ（twitter:*）は X 専用だ。X は対応する twitter:* タグが無いとき OG タグにフォールバックするので、通常は OG に加えて単一の twitter:card 値があれば足りる。

Open Graph タグは Google の検索ランキングに影響する？

影響しない。Open Graph タグと Twitter Card タグは Google のランキングを左右しない。これらはシェアされたときにリンクがどう見えるかを制御し、ソーシャルからのトラフィックを生む。SEO には従来型の <title> と canonical タグが効く。meta description はスニペットとクリック率を形づくるが、直接のランキング要因ではない。

Open Graph タグは HTML のどこに置く？

<head> 要素の中、サーバーレンダリングされた HTML か静的な HTML の中だ。Facebook、LinkedIn、WhatsApp、Telegram のクローラーは JavaScript を実行しないので、クライアント側で注入されたタグは見えない。<meta charset> を先頭に置き、最初の 1024 バイト以内に収めよう。

1 枚の画像で Facebook・X・LinkedIn に対応できる？

できる。1 枚の 1200×630（1.91:1）画像が、Facebook、LinkedIn、Slack、Discord、そして X の summary_large_image カードで正しく描画される。公開 URL で HTTPS 配信し、og:image:width／og:image:height を宣言すれば、最初のシェアが空白になることはない。

リンクプレビューに画像が表示されないのはなぜ？

よくある原因はこうだ。絶対 HTTPS URL ではなく相対パスの og:image、200×200 未満の画像、X での twitter:card の欠落、あるいはクローラーが実行できない JavaScript で注入されたタグ。修正後は Facebook Sharing Debugger で再スクレイプしよう。

すべてのページに独自の Open Graph タグが必要？

理想的にはそうだ。各ページは、その特定のページを反映した og:title、og:description、og:image、そして canonical な og:url を持つべきだ。そうすれば、シェアされたリンクは関連性のあるプレビューを表示する。サイト全体で共通のフォールバックは無いよりましだが、ページごとのタグの方がはるかに多くのソーシャルクリックを勝ち取る。