OGPチェッカー：OGタグとリンクプレビューをテスト

OGPチェッカーは、誰かが投稿やチャットにあなたのリンクを貼り付けたときに、クローラーが何を見るかを示します。ページのog:*とtwitter:*のメタタグで宣言されたタイトル、説明、画像です。プレビューに違う画像が出る、画像が出ない、記事のタイトルではなくサイト名が出る。そんなときの原因は、ほとんどの場合そのわずかなHTMLの数行にあり、このページはそのどの行かを教えてくれます。

Open Graphタグの確認方法

1. 共有したいページのURLを入力して、タグを確認を押します。リダイレクトはたどられ、最終的なURLが解析されます。
2. プレビューを見ます。Facebook、X、LinkedIn、チャットアプリがリンクカードをどう配置するかの近似で、それぞれが読むタグをもとに作られています。
3. チェック結果を順に確認します。エラーはプレビューを壊し、警告は一部のプラットフォームで見栄えを悪くし、注意は望ましい習慣です。それぞれ、何を変えるべきかが書かれています。
4. 修正して、再確認します。推奨タグのボックスには、現在の値が入った、編集しやすいタグのブロックが用意されます。
5. 修正をデプロイしたら、各プラットフォームのキャッシュを更新します（下記参照）。そうしないと、過去のシェアには古いプレビューが残り続けます。

ステージングサイト、ログインが必要なページ、localhostのものは、HTMLを貼り付けに切り替えてください。ページのソースを貼り付ければ、同じチェックがブラウザの中で実行されます。

すべてのページに必要なOpen Graphタグ

Open Graphは、ほとんどのリンクプレビューの土台となるプロトコルです。すべてのページに4つのプロパティを必須としており（ogp.me）、LinkedInは、共有プレビューのために存在すべきタグとして、タイトル、画像、説明、URLを挙げています（LinkedInヘルプ）。

同じタグが2回現れた場合は、最初のものが優先されます。値が競合するときは、上から順に最初のタグを優先するのがプロトコルの仕様です。重複は、たいていテーマとSEOプラグインの両方がタグを出力していることが原因で、チェッカーはそれを警告します。

Twitter（X）カードのタグ

Xは独自のtwitter:*タグを読み、そのほとんどでOpen Graphにフォールバックします。Xのカードのマークアップ解説（X開発者ドキュメント、アーカイブ版（英語））によれば、次のとおりです。

• twitter:card：カードの種類。summary（小さな正方形の画像）かsummary_large_image（横長の画像）です。なくても、og:type、og:title、og:descriptionがあれば、サマリーカードが表示されることがあります。
• twitter:title：最大70文字。og:titleにフォールバックします。
• twitter:description：最大200文字。og:descriptionにフォールバックします。
• twitter:image：5MB未満。JPG、PNG、WEBP、GIF（最初のフレームのみ）。SVGは非対応です。og:imageにフォールバックします。
• twitter:image:alt：最大420文字。og:image:altにフォールバックします。

実際には、Open Graphに1行、<meta name="twitter:card" content="summary_large_image">を足せば、Xにも対応できます。

og:imageのサイズ：各プラットフォームの要件

1枚の画像で、すべてを満たせます。1200 × 630ピクセル、PNGまたはJPEG、5MB未満です。LinkedInの最小値とFacebookの幅の推奨を満たし、比率はおよそ1.91:1で、Xは2:1の大きなカードのために少しトリミングします。トリミングで切れないよう、文字やロゴは端から離してください。Xは、サイト共通のロゴではなく、ページごとに固有の画像を求めています。これは、どこでも通用する理にかなったルールです。

リンクプレビューがおかしい理由と、直し方

古い画像やタイトルが表示され続ける

各プラットフォームは、プレビューをキャッシュします。Facebookは画像をURL単位でキャッシュし、URLが変わらない限り更新しません（Meta for Developers）。そのため、変更した画像は新しいファイル名でアップロードし、Sharing Debuggerにページを通して、再取得を促してください。LinkedInでは、Post InspectorでURLを更新します。

画像がまったく出ない

上のプレビュー画像の表を確認してください。よくある原因は、og:imageが相対パスになっている、画像がクローラーに403や404を返す（ホットリンク対策、保護されたディレクトリ、CDNのルール）、SVGである、5MBを超えている、のいずれかです。LinkedInは、要件を満たす画像でも、サイトがLinkedInによる取得をブロックしていると失敗することがあると説明しています。

ブラウザにはタグがあるのに、ここでは見つからない

タグは、ページの読み込み後にJavaScriptで追加されている可能性があります。クローラーは、サーバーが送るHTMLを読むので、タグをサーバーでレンダリングされるHTMLや、事前にビルドされたHTMLに移してください。シングルページアプリでは、共有プレビューのために、サーバーサイドレンダリングかプリレンダリングが必要になることがほとんどです。

違うページがプレビューされる

URLがリダイレクトする場合、クローラーは最終的なページをプレビューします。チェッカーはリダイレクトの回数を表示し、リダイレクトチェッカーは、すべての転送先を一覧にします。また、og:urlがトップページではなく、そのページ自身を指していることも確認してください。テンプレートでよくある間違いです。

Open Graphタグと、SEOのメタタグの違い

<title>、メタディスクリプション、canonicalリンクは検索エンジン向けで、Open GraphとTwitterのタグはシェア向けです。両者は異なっていてもかまいません。シェア用の見出しを、検索用のタイトルより印象的にすることもできます。ただし、canonical URLとog:urlは一致させるべきで、ページを宣伝する前に、noindexのrobotsディレクティブがないかも確認しておく価値があります。チェッカーは、X-Robots-TagのHTTPヘッダーを含め、これらすべてを報告します。

チェッカーが、入力されたURLに対して行うこと

当社のサーバーは、ページを1回リクエストし、最大8回のリダイレクトをたどり、先頭の最大600KBだけを読み（<head>の終わりで止まります）、最大2枚のプレビュー画像の冒頭部分をダウンロードして、サイズと形式を読み取ります。取得するのは、標準ポートの公開http(s)アドレスだけで、プライベート、ローカル、クラウドのメタデータ用のIPは、リダイレクト先がそこを指す場合も含めて拒否します。何も保存されません。プレビューのカードは、そのあと画像をあなたのブラウザで直接読み込みます。キャンペーンのリンクを共有するなら、UTMビルダーで作成し、他人のリンクを共有するなら、先にURL整理ツールでトラッキングを取り除いてください。