Open Graph チェッカー
Open Graph タグは、ページのリンクが Facebook、X、LinkedIn、Slack やチャットアプリに貼られたときに、そのページがどう見えるかを決める meta タグです。URL を入力すると、このチェッカーはページを 1 回だけ取得し、各プラットフォームが実際に使うタグとフォールバックを正確に示し、4 つのシェアカードを描画し、シェア画像の実際の寸法を確認します。コンパニオンガイド投稿前にシェアカードを確認するでは、見つけた問題の直し方を順に説明しています。より広範な定期チェックには、代わりにウェブサイトヘルスチェックを使ってください。
最終更新:
継続的に監視したいですか？myeventwatch で無料監視——有効期限とダウンタイムのアラート、カード不要。
チェックの仕組み
チェッカーは、入力された URL に対して保護されたサーバー取得を 1 回だけ行い、リダイレクトをたどって、最終ページの静的 HTML —— プラットフォームのスクレイパーが見るのと同じ HTML —— を読み取ります。og: タグと twitter: meta タグ、ページの <title> と meta description を解析し、プラットフォームごとに、各シェアカードが実際に表示する値と、その値の出どころを割り出します。フォールバックで供給された値にはフォールバックのラベルが付くため、完全に見えるカードの下に不足タグが隠れることはありません。
他のすべてを形作る制限が 1 つあります。これは通常の HTTP 取得であり、ブラウザではありません。そしてプラットフォームのスクレイパーもブラウザではありません —— どちらも JavaScript を実行しません。スクリプトによって挿入されたタグ、クライアント側で描画されたタグ、ログイン後にのみ追加されるタグは、ここでも見えず、Facebook、X、LinkedIn、Slack でもまったく同じように見えません。タグが JavaScript バンドルの中にしか存在しないなら、共有にとっては存在しないのと同じです。結果に表示されるもの —— 最終 URL、HTTP ステータス、生のタグ表、描画された 4 つのカード —— が、スクレイパーが扱わなければならない静的な真実です。
フォールバック、相対画像の罠、スクレイパーのキャッシュ
プラットフォームごとにフォールバックの仕方が違うため、同じページが 1 つのアプリでは正しく見え、別のアプリでは崩れて見えることがあります。Facebook は og: タグを直接読みます。X はまず自前の twitter: タグを読み、不足している場合は対応する og: タグにフォールバックします。LinkedIn は og: タグだけを読むため、完璧な Twitter Card 設定もそこでは役に立ちません。Slack はまず og: タグを読み、次に twitter: タグを読みます。下のチェックリストは、不足しているフィールド、空のフィールド、プラットフォームがフォールバックで埋めるフィールドをすべて示し、フォールバック先のソース名も明記します。
最もよくある静かな失敗は、相対パスの og:image です。/images/share.jpg のような値はテンプレートやブラウザでは問題なく見えますが、ほとんどのスクレイパーはそれを何に対しても解決できないため、カードには単に画像が表示されません。修正は常に、スキームを含む絶対 URL です。2 つ目の罠はキャッシュです。各プラットフォームはスクレイパーが取得した内容をキャッシュするため、タグを直してもすでに出回っている投稿は更新されず、新しいプレビューでも、プラットフォームに URL の再スクレイプを依頼するまでは古いカードが配信され続けることがあります。まずタグを直し、ここで検証し、それから再スクレイプしてください —— この順序でなければ、壊れたバージョンを再びキャッシュしてしまいます。
正直さの限界：ここのプレビューは各プラットフォームの文書化された挙動のシミュレーションであり、実際の投稿のスクリーンショットではありません。プラットフォームごとに切り抜き、角の丸め、切り捨ての方法は異なり、カードレイアウトは予告なく変わり、ログイン状態によって見え方が変わることもあるため、カードは忠実なモデルとして扱い、保証とは考えないでください。シミュレーションではないものが 1 つあります。シェア画像の寸法は、ページが宣言する og:image:width と og:image:height の値ではなく、実際の画像ファイルのヘッダーから読み取ります —— 宣言値は主張にすぎず、このチェッカーはファイル自体と照合します。
チェック対象と、その背後にあるルール
| チェック対象のタグ | og:title、og:description、og:image、og:url、og:type、og:site_name に加え、twitter:card、twitter:title、twitter:description、twitter:image —— そしてフォールバックのソースとしてページの <title> と meta description。 |
| 推奨画像サイズ — 1200 × 630 px | 1200 × 630 は正式な標準ではなく、プラットフォームのガイダンスです。Facebook が推奨するサイズであり、X、LinkedIn、Slack が最もうまく扱える大きなカードのサイズです。より小さい画像も表示されますが、カードが切り抜いたり、小さなサムネイルにフォールバックしたりすることがあります。 |
| og: タグ —— og:title、og:description、og:image —— を直接読み、og: タグが不足している場合にのみページの <title> と meta description にフォールバックします。 | |
| X（Twitter） | まず twitter:title、twitter:description、twitter:image を読みます。それぞれ不足している場合は対応する og: タグにフォールバックします。twitter:card がカードレイアウトを決め、不足している場合は X が見つけた内容から推測します。 |
| LinkedIn と Slack | LinkedIn は og: タグだけを読みます —— twitter: タグはそこでは役に立ちません。Slack はまず og: タグを読み、次に twitter: タグを読むため、4 つの中で最も寛容です。 |
| 相対画像 URL | og:image と twitter:image は、スキームを含む絶対 URL でなければなりません。ほとんどのスクレイパーは相対パスを解決できず、結果は画像のないカードになり、どこにもエラーは出ません。 |
| 画像の寸法 | 実際の画像ファイル —— その PNG、JPEG、GIF、WebP ヘッダー —— から、バイトサイズと形式とともに読み取ります。宣言された og:image:width と og:image:height は比較のために表示されますが、それだけで信頼されることはありません。 |
| 寸法不明 | チェッカーが画像ファイルを取得も解析もできなかったことを意味します —— タイムアウトした、リクエストを拒否された、またはヘッダーを読めない形式だった場合です。その場合、ページが宣言した寸法（あれば）が、スクレイパーを含む全員が持つ唯一の情報になります。 |
よくある質問
共有したリンクに画像が表示されないのはなぜですか？
よくある原因を順に挙げると、og:image がまったくないこと、og:image がスクレイパーの解決できない相対 URL であること、画像が小さすぎるか、スクレイパーが取得できない場所にあること（ログインの内側、robots ルールでブロックされている、エラーを返している）、またはプラットフォームが画像が存在する前のキャッシュ済みスクレイプを表示し続けていることです。上のチェックを実行してください —— どれが当てはまるかを示します —— タグを直し、それからプラットフォームに再スクレイプを依頼してください。
Open Graph タグと Twitter タグ、両方必要ですか？
実務上は、必要です。Facebook と LinkedIn は og: タグだけを読みますが、X は自前の twitter: タグを優先し、og: タグをフォールバックとして使います。完全な og: セットに twitter:card タグを加えればほとんどのケースをカバーできますが、明示的な twitter:title、twitter:description、twitter:image が、X のカードを Facebook のカードと変える唯一の方法です —— そして Slack は両方のセットを、og: を先に読みます。
実際の投稿がこのプレビューと違うのはなぜですか？
ほとんどの場合、キャッシュが原因です。各プラットフォームのスクレイパーは URL に対して取得した内容をキャッシュし、タグを編集してもそのキャッシュは無効化されません。修正前に作られた投稿は古いカードを保持し、プラットフォーム自体のデバッガーでも、再スクレイプが強制されるまではキャッシュ版が表示され続けることがあります。よりまれな違いは切り抜きです。プラットフォームは現在のレイアウトに合わせて切り抜きや切り捨てを行い、このプレビューは文書化された挙動のシミュレーションであって、スクリーンショットではありません。
このチェッカーは JavaScript を実行しますか？
いいえ —— それは意図的です。チェッカーは静的 HTML を 1 回だけ取得します。これはプラットフォームのスクレイパーが行うこととまったく同じで、スクレイパーも JavaScript を実行しません。したがって、スクリプトやクライアント側フレームワークによって追加されたタグがここに不足している理由は、Facebook、X、LinkedIn、Slack で不足する理由とまったく同じです。タグが JavaScript で描画される場合は、共有で数えられるためにサーバー描画された HTML の中に存在しなければなりません。
og:image はどのサイズにすべきですか？
可能な限り 1200 × 630 px を使ってください。これは正式な標準ではなく、プラットフォームのガイダンスです —— Facebook が推奨するものであり、X、LinkedIn、Slack の大きなカードが前提とするサイズです。ファイルは適度に小さく保ち、PNG または JPEG を使い（WebP の対応はスクレイパーによって異なります）、常に絶対 URL で参照してください。このチェッカーは 1200 × 630 未満の画像にフラグを立て、ファイルから測定した実際の寸法を教えてくれます。