OGタグのチェックとリンクプレビュー方法(ステップバイステップガイド)

誰かがあなたのリンクをFacebook、X、LinkedIn、WhatsApp、Slackに貼るたびに、プラットフォームは小さな隠れたメタタグ群を読み取り、ソーシャルカードに変換します:画像、タイトル、説明、ドメインです。これらのタグが欠落していたり不正形式だったりすると、プラットフォームは即興で対応します——即興のカードは、自分で選んだカードよりほぼ確実に劣ります。だからこそ、公開前にOGプレビューチェックを行うことは、テクニカルSEOで最も費用対効果の高い5分間タスクの1つなのです。本ガイドでは、OGタグの正しいチェック方法、実際のプラットフォームがレンダリングする2枚のプレビューカードの読み方、そしてチェックで見つかるありふれた問題のすべての修正方法を解説します。

OG(Open Graph)タグとは?

Open Graphは、Facebookが2010年に導入したメタデータ標準で、現在では事実上すべてのソーシャルプラットフォーム、メッセージアプリ、さらにはAI回答エンジンに採用されています。タグはHTMLの<head>セクション内に置かれ、ページが他で共有されたときの表示方法を記述します。コアセットは次のとおりです:

<head>
  <meta property="og:title" content="Best Running Shoes 2026 — Lab-Tested">
  <meta property="og:description" content="We tested 42 pairs over 600 miles. Here are the 9 best models.">
  <meta property="og:image" content="https://example.com/images/running-shoes.png">
  <meta property="og:url" content="https://example.com/best-running-shoes/">
  <meta property="og:type" content="article">
  <meta property="og:site_name" content="Acme Sports">
</head>

これに加えて、ほとんどのサイトはTwitterカードタグ(twitter:card、twitter:title、twitter:description、twitter:image)も追加しています。Xは自動的にOGタグへフォールバックできますが、twitter:cardタグは、大きなヒーロー画像カードとコンパクトなサマリーカードのどちらをレンダリングするかをXに伝えるものなので、明示的な注意に値します。これらすべてのタグを手作業で書く際の背景の全体——隣に置かれるSEOタイトル、メタディスクリプション、canonical URLを含む——については、ウェブサイトへのメタタグ追加方法のガイドをお読みください。

OGプレビューが重要な理由

ソーシャルカードは実質的にページの広告であり、スクロール中の人がクリックするかどうかを判断する前に目にする、通常は唯一のものです。適切な大きな画像、判読できる見出し、1行の約束を備えたページは、素のURLを表示するページや、さらに悪いことにレイアウトから切り取られた無関係な画像を表示するページより、一貫して多くのクリックを獲得します。公開前にOGタグをチェックすれば、3つのものを同時に守れます:SNSやチャット共有からのクリックスルー率、プラットフォーム間のブランドの一貫性、そして同じメタデータを再利用するサービスにとってのクローラビリティです。

最もよくある失敗は、最も静かな失敗でもあります。og:imageの欠落はテキストのみのカードを生み、競合の隣では壊れて見えます。/images/hero.pngのような相対画像URLはブラウザでは問題なく機能しますが、完全な絶対URLを必要とするSNSプラットフォームでは失敗します。95文字のog:titleは文の途中で切り詰められます。ステージングドメインのcanonicalは、すべての共有を誤ったホストに向けさせます。これらのエラーのいずれも、CMSのどこでも警告を発しません——確実に捉える唯一の方法は、ライブURLでOGプレビューを実行し、実際にレンダリングされるものを見ることです。

OGタグのチェック方法:手順

ステップ1:OGプレビューツールを開く

無料のOGプレビュー&チェッカーにアクセスします。このツールは、ソーシャルクローラーとまったく同じ方法——公開サーバーから、ログインセッションにアクセスせずに——ページを取得するため、ツールが見るものがFacebookやXが見るものです。登録もインストールも不要です。

ステップ2:URLを貼り付けてチェックを実行する

https://を含む完全なページアドレスを入力欄に貼り付け、Check & previewを押します。ツールはサーバーサイドでページをリクエストし、HTMLをパースして、og:title、og:description、og:image、og:url、og:type、og:site_name、4つのTwitterカードタグ、素の<title>タグ、canonicalリンクを抽出します。複数ページを監査する場合は、重要なランディングページごとに繰り返します——OGタグはサイト単位ではなくページ単位で設定されるからです。

ステップ3:2枚のプレビューカードを読む

ツールは2枚の並んだプレビューをレンダリングします。Facebookカードは、大きな画像、小さなグレーの大文字のドメイン、タイトル、説明を表示し、フィードでのリンクの見え方を再現します。Xカードはtwitter:cardの値に従います:summary_large_imageは大きな16:9のヒーローカードをレンダリングし、summaryは小さな正方形サムネイル付きのコンパクトカードをレンダリングします。ページにTwitterタグがまったくない場合、ツールはカードにOGフォールバックバッジを付け、代わりにOpen Graphの値を使います。これはX自体がすることとまったく同じなので、プレビューは真実であり続けます。

ステップ4:赤と黄の項目をすべて修正する

プレビューの下には、タグごとに1行のチェックリストがあります。緑は存在し長さ制限内、黄は存在するがリスクあり——たとえば60文字を超えるog:titleや110文字を超えるog:description(どちらもソーシャルカードで視覚的に切り詰められます)、またはtwitter:cardの欠落——赤は欠落で、og:imageの欠落は画像なしカードがクリック魅力の過半を失うため高リスクとして扱われます。欠けているものがわかったら、メタタグジェネレーターで1分以内に修正済みタグブロックを作成し、<head>に貼り付け、OGプレビューを再実行してすべてがレンダリングされることを確認します。

OGのベストプラクティス

推奨画像サイズを使う。og:imageの広く受け入れられた標準は、1200×630ピクセル(1.91:1のアスペクト比)のJPG、PNG、またはWebPで、おおむね8 MB以下、絶対https:// URLです。Xの大画像カードは約1200×675(16:9)を使うため、1200×630の画像は両プラットフォームで十分機能します。プラットフォームごとに切り取り方が微妙に異なるため、重要なコンテンツは外周から離して配置します。

表示長の制限を守る。og:titleは約60文字以内、og:descriptionは約110文字以内に保ち、考えの途中で切り詰められないようにします。これらは厳密な仕様上限ではなく表示のガイドラインですが、主要なカードが実際に表示する量と一致しています。

常に絶対かつcanonicalなURLを使う。og:imageとog:urlは、本番ドメイン上の完全修飾URLでなければなりません。理想はcanonicalタグと一致させることです。そうすれば、プラットフォームがトラッキングパラメータを付けたり、ステージングホストをインデックスしたりしません。

重要なページごとに固有のタグを与える。記事、商品ページ、主要ランディングページは、それぞれ固有のタイトル・説明・画像を持つべきです。ユーティリティページにはサイト全体共通のフォールバック画像でも許容範囲ですが、共有にクリックをもたらすのは固有の画像です。

公開前だけでなく、公開後にも再チェックする。プラットフォームは積極的にキャッシュします。すでに共有されたページのタグを修正したら、プラットフォーム自身のデバッガー(Facebook Sharing DebuggerまたはXのカードツール)で再スクレイプを強制し、最後に1回プレビューを実行してライブカードが更新されたことを確認します。

OGタグチェックに関するよくある質問

ページのOGタグをチェックするには?

最速の方法は、当サイトのOGプレビュー&チェッカーのような無料のOGプレビューツールにページURLを貼り付けることです。ライブページをサーバーサイドで取得し、すべてのOG・Twitterカードタグを抽出し、FacebookカードとXカードを並べてレンダリングし、各タグを緑・黄・赤でマークするため、何を修正すべきか正確にわかります。代替手段はページソースを表示して”og:”を手動検索することですが、レンダリングされたカードや長さの問題は表示されません。

OG画像が表示されないのはなぜですか?

4つの原因がほぼすべてのケースをカバーします:og:imageタグが完全に欠落している、画像URLが絶対https URLではなく相対になっている、画像ファイルが小さすぎる(プラットフォームは通常200×200ピクセル以上を要求)か未対応形式である、またはプラットフォームがページのキャッシュされた古い版を配信している——後者の場合はFacebook Sharing Debuggerで再スクレイプを強制します。OGプレビューツールなら、画像URLがそもそも解決できるかを即座に示せます。

og:titleとog:descriptionはどのくらいの長さにすべきですか?

og:titleは最大約60文字、og:descriptionは約110文字を目安にします。これらはFacebookカードとXカードが通常テキストを視覚的に切り詰めるポイントです。この長さを超えてもハードエラーにはなりません——OGプロトコル自体はもっと許容します——しかし上限を過ぎた部分はユーザーに見えないだけなので、重要な語は前に置きます。

OGタグが既にある場合もTwitterカードタグが必要ですか?

なくても機能はします。Xは自動的にOGタグへフォールバックするからです。しかし、明示的なtwitter:cardタグがなければ、大画像カードとコンパクトサマリーカードを選べず、エッジケースのレンダリングも予測しにくくなります。基本の4つのTwitterタグの追加は、ジェネレーターなら1分で済み、推測を排除します。

OGタグはどのくらいの頻度で再チェックすべきですか?

新規ページは公開前にチェックし、テーマ更新、プラグイン更新、ヘッドレスCMS移行、ドメイン変更など、テンプレートに触れる作業の後には主要ランディングページを再チェックします。壊れたソーシャルカードの多くは、メタブロックを静かに落としたリデザインにさかのぼれます。最も共有される10ページの四半期ごとの監査は、合理的なルーチンです。

公開前にプレビューしよう

OGタグは小さく、目に見えず、不釣り合いなほど強力です:オーディエンスが実際にリンクを共有する場所で、ページが作る第一印象を決めるからです。重要なページごとにOGプレビューを実行し、赤い項目を修正し、黄色い項目を削り、1200×630画像で標準化する規律ある習慣は、サイトの他の何ものにも触れずにSNSのクリックスルー率を押し上げます。今日はホームページとベストな記事から始めましょう——今すぐOGタグをチェックし、見つかったギャップはメタタグジェネレーターで埋めます。