Open Graph プレビュー - 無料SEOツール

要点

2024 年の Social Media Examiner の報告によれば、Open Graph タグを正しく設定してソーシャルメディアで共有されたコンテンツは、そうでない投稿よりも最大で反応が 2.5 倍になります。

さらに詳しく知るには、こちらに質問

Facebook、LinkedIn、Twitter、WhatsApp でリンクを共有すると、各プラットフォームはページの Open Graph（OG）の meta タグを読み、タイトル、説明文、画像からなるカード形式のプレビューを作ります。タグがなかったり設定が誤っていたりすると、プレビューが崩れて見えたり、違う画像が出たり、クリックを誘わないありきたりな説明文が表示されたりします。

sorank.com の無料の OG プレビューツールを使えば、公開する前に、主要なソーシャルメディアすべてでページがどう見えるかをそのまま確かめられます。誤りを見つけ、見せ方を整え、反応をその場で最大にできます。

Open Graph タグとは

Open Graph は、2010 年に Facebook が作ったプロトコルで、ウェブページをソーシャルグラフの中の豊かなオブジェクトにします。ページの <head> の中に決まった <meta> タグを置くことで、共有されたときの見せ方を制御できます。

中心となる Open Graph のタグは次のとおりです。

og:title、共有カードに表示される見出しです。60 文字以内にしましょう。

og:description、タイトルの下に表示される補足の説明文です。150 - 200 文字を目安にします。

og:image、プレビューの画像です。見た目でもっとも影響の大きい要素です。推奨サイズは1200×630 ピクセルです。

og:url、共有されるページの canonical の URL です。

og:type、コンテンツの種類（website、article、product、video など）を定めます。

og:site_name、サイトまたはブランドの名前です。

Twitter は Twitter カードという独自の仕組みを使い、twitter:card、twitter:title、twitter:description、twitter:image などのタグがあります。ただし、独自のタグがない場合は Open Graph のタグを代わりに使います。

OG プレビューが SEO の戦略で重要な理由

ソーシャルでの共有が SEO とどう関わるのかと思われるかもしれません。ソーシャルの反応は Google の直接のランキング要因ではありませんが、間接的な効果は大きいのです。

ソーシャルからの流入が増える：魅力的で整った共有カードは、ソーシャルメディアからのクリック率を大きく高めます。ソーシャル経由の訪問者が増えれば、被リンク、ブランドへの言及、反応の可能性も広がります。

直帰率が下がる：クリックの前に正確なプレビューを見れば、利用者は何があるかをわかって訪れます。プレビューと中身が合っていると直帰率が下がり、滞在時間が伸びます。どちらも利用者の体験の良さを示す手がかりです。

ブランドの一貫性：どのプラットフォームでもそろった見た目の共有カードは、ブランドの印象を強め、読者の信頼を育てます。

共有の広がり：魅力的なプレビューのあるコンテンツは、共有されやすくなります。共有されるたびに、自然な発見と被リンクの機会が生まれます。

Sorank の OG プレビューツールの使い方

OG プレビューツールは、共有カードの不具合を見つけて整えるのに役立ちます。

手順 1：確認したいページの URL を入力します。ツールがページを取得し、Open Graph と Twitter カードの meta タグをすべて読み取ります。

手順 2：Facebook、Twitter / X、LinkedIn、WhatsApp 向けのプレビューを確認します。共有カードの描かれ方はプラットフォームごとに少しずつ違うため、それぞれでの見た目をそのままお見せします。

手順 3：問題を見つけます。タグの不足、小さすぎる画像、途中で切れるタイトル、推奨の文字数を超えた説明文など、よくある問題をツールが示します。

手順 4：直して再度確認します。meta タグを修正したら、もう一度 URL を入力して、すべてのプレビューが思いどおりになったか確かめます。

OG タグのよくある間違いと直し方

経験のある開発者でも Open Graph で間違えます。よく見かける問題は次のとおりです。

og:image のタグがない：もっとも多い間違いです。画像がないと、プラットフォームは空のカードを表示するか、ページから適当な画像を拾います。必ず 1200×630 ピクセルの質の高い画像を指定してください。

画像が小さすぎる、比率が違う：Facebook は最低 200×200 ピクセルを求めますが、大きなカード形式には 1200×630 を推奨しています。小さすぎる画像や 1.91:1 でない画像は、不自然に切り抜かれるか、大きなカードではなく小さなサムネイルで表示されます。

絶対 URL ではなく相対 URL を使う：OG タグの値は、すべて https:// で始まる絶対 URL でなければなりません。/images/og.jpg のような相対パスは、ソーシャルメディアでは働きません。

タグの重複や矛盾：同じページに og:title や og:image が複数あると、クローラーが迷います。各 OG タグは 1 回だけ現れるようにしてください。

キャッシュを消さない：Facebook をはじめとするプラットフォームは OG のデータを強くキャッシュします。タグを更新したら、Facebook の Sharing Debugger で再取得を促し、古いキャッシュを消す必要があります。

Twitter 専用のタグがない：Twitter は OG タグを代わりに使いますが、twitter:card を summary_large_image で指定しておけば、小さな要約カードではなく大きな画像形式で表示されます。

プラットフォーム別の OG の要件

ソーシャルメディアにはそれぞれの要件とくせがあります。

Facebook：画像の最小サイズは 200×200px、推奨は 1200×630px です。og:type は article、product、video などに対応します。キャッシュが強いため、Sharing Debugger で更新します。タイトルの上限は 60 文字、説明文の上限は 200 文字です。

Twitter / X：twitter:card の meta タグが必要です。summary（小さな画像）と summary_large_image（大きな画像）のカードに対応します。画像の最小サイズは、summary が 144×144px、大きな画像が 300×157px です。Twitter のタグがなければ OG タグを代わりに使います。

LinkedIn：OG タグをそのまま使います。推奨の画像サイズは 1200×627px です。article と website の種類に対応し、確認用に独自の Post Inspector を備えています。

WhatsApp：リンクのプレビューに OG タグを読みます。og:image は HTTPS で配信する必要があります。プレビューは端末にキャッシュされ、消すには利用者がアプリのキャッシュを削除する必要があります。

OG 画像を作るときの基本

OG 画像は、共有カードでもっとも大切な要素です。次の目安に沿って作ってください。

・どこでも正しく表示されるよう、1200×630 ピクセル（1.91:1）を使います。
・プラットフォームごとの切り抜きに備えて、大切な文字や要素は画像の中央 80% に収めます。
・ひと目でわかるよう、ブランドのロゴや色を入れます。
・スマートフォンで見る人が多いため、太く読みやすい文字を高いコントラストで使います。
・読み込みを速くするため、ファイルサイズは5 MB 以下（できれば 1 MB 以下）にします。
・写真には JPEG、文字を重ねた図には PNG を使います。
・サイト共通のありきたりな画像で済ませず、大切なページにはそれぞれ専用の OG 画像を作ります。
・Twitter / X などは暗い表示に対応しているため、暗い背景でも確認します。