Open Graph プレビューワー
EXAMPLE WEBSITE
ページタイトル例
これはソーシャルメディアでシェアされた際に表示されるページコンテンツの説明例です。
https://example.com/page
ページタイトル例
これはソーシャルメディアでシェアされた際に表示されるページコンテンツの説明例です。
example.com
websiteOpen Graph Previewer の使い方
- 1
ページの URL を入力する
確認したいページの完全な URL を「website URL」フィールドに貼り付けます。
- 2
OG データを取得する
「Fetch OG Data」をクリックして、ページの既存の Open Graph のタイトル、説明、画像、サイト名を取得します。
- 3
必要なら手動で編集する
「Edit Manually」に切り替えて、タイトル、説明、画像 URL、type などのフィールドを調整し、プレビューが更新される様子を見ます。
- 4
プレビューしてタグをコピーする
Facebook と Twitter のカードプレビューを確認し、生成されたメタタグをコピーしてページに追加します。
Open Graph とリンクプレビューの決定版ガイド
Open Graph プロトコルとは何か
Open Graph プロトコルは、もともと Facebook が導入した小さなメタタグの一式で、どんなウェブページも、共有されたときに自身をリッチなオブジェクトとして説明できるようにします。素っ気ない青いリンクの代わりに、Open Graph タグを持つページは、見出し、要約、大きな画像を備えたカードに変わります。タグはページの head に存在し、property 属性に og 接頭辞を付けて使います。たとえば og:title や og:image で、値を保持する content 属性と組み合わせます。この標準は広く採用されたため、同じ og タグが今では Facebook だけにとどまらず、はるかに多くの場所でプレビューを動かしています。
Open Graph は、ソーシャルやメッセージングの文脈での見せ方だけに関わるものです。検索順位に直接の影響はありませんが、クリック率や共有には大きく影響します。魅力的なカードはクリックされ再共有される一方、素っ気ない、あるいは壊れたカードはスクロールで読み飛ばされるからです。
中核となる Open Graph タグ
5 つのプロパティが仕事の大半を担います。og:title はカードの見出しで、HTML の title タグとは異なってよく、共有に最適化した言い回しを書けます。og:description はその下を支える一文です。og:image はサムネイルで、視覚的な比重がずば抜けて大きいものです。og:url はカードが指すべきカノニカル URL で、同じコンテンツが複数の URL から到達できる場合でも、共有を 1 つのアドレスにまとめておきます。og:type はそのオブジェクトを説明し、一般的なページには website、ブログ記事やニュース記事には article がよく使われます。
追加のプロパティが結果を整えます。og:site_name は情報源にラベルを付け、og:locale は言語を宣言し、画像については og:image:width と og:image:height が、画像の読み込みが終わる前にプラットフォームがカードのレイアウトを組む助けになります。これらを入力すると、より確実で、より速く表示されるプレビューが得られます。
Twitter Card と、X があなたのタグをどう読むか
X は独自の twitter card タグを使いますが、寛容です。Twitter 専用のタグがない場合は、あなたの Open Graph タグにフォールバックします。鍵となるタグは twitter:card で、summary_large_image はほとんどのブランドが望む大きな画像のレイアウトを生み、summary はテキストの横に小さなサムネイルを置きます。twitter:title、twitter:description、twitter:image、twitter:site を設定して、X 向けに別の文面にしたいときに Open Graph の値を上書きすることもできます。
実際には、幅広く対応するために完全な Open Graph タグを設定し、大きな画像のレイアウトを選ぶために twitter:card だけを追加して、残りは X に Open Graph から継承させるのが良い戦略です。これにより、ほぼ同一の 2 組のタグを維持せずに済みつつ、X でもよりリッチなカードが得られます。
カードの成否を分ける画像の要件
og:image は、ほとんどのプレビューが成功するか失敗するかの分かれ目です。広く推奨されるサイズは 1200×630 ピクセル、おおよそ 1.91 対 1 の比率で、Facebook、LinkedIn、X で大きな画像のカードを切り取られることなくきれいに埋めます。https で始まる、絶対で、公開で到達可能な URL を使ってください。/images/card.png のような相対パスは、サムネイルが単に表示されない第 1 の原因です。スクレイパーには、それらを解決するための基準となる URL がないからです。ファイルは数百キロバイト以下に保ち、重要な文字を端の近くに置くのは避けてください。プラットフォームごとに切り取り方が少しずつ違うからです。
各プラットフォームは、独自の最小・最大サイズも課しています。小さすぎる画像は、極小のサムネイルにフォールバックするか、まったく画像が出ません。極端に大きいファイルはスキップされることがあります。HTTPS で配信される 1 枚の 1200×630 の JPEG または PNG を貫くのが、どこでも一貫して表示させる最も安全な選択です。
Facebook、LinkedIn、Discord、Slack はプレビューをどう描画するか
リンクがこれらのいずれかのプラットフォームに貼り付けられると、そのプラットフォームは独自のスクレイパーボットを送ってページを取得し、カードを描画する前に head を読みます。Facebook は facebookexternalhit を使い、Slack と Discord はそれぞれ独自のボットを持ち、各々が og タグを解析してプレビューを組み立てます。つまりプレビューは、スクレイパーがサーバー側で見たものを反映します。それは、特にログインを必要とするページや、読み込み後に JavaScript でメタタグを描画するページでは、ログイン済みのユーザーが見るものと異なることがあります。
描画がボット側で行われるため、2 つのことが重要になります。第 1 に、あなたの og タグは、スクレイパーが実行しないかもしれないクライアント側スクリプトで後から挿入されるのではなく、サーバーが返す最初の HTML の中に存在しなければなりません。第 2 に、ページは認証なしでボットが到達できなければなりません。さもないと、スクレイパーはあなたのコンテンツの代わりにログインの壁を受け取り、プレビューは空で返ってきます。
キャッシュ、デバッガー、そして再スクレイプの強制
ソーシャルプラットフォームは、スクレイプしたプレビューを積極的にキャッシュし、ときには何日も保持します。これは、更新した Open Graph タグが反映されないという定番の不満の原因です。プラットフォームは、変更前にキャッシュした版をまだ配信しているのです。解決策は、プラットフォーム独自のデバッグツールを使って新しいスクレイプを強制することです。Facebook の Sharing Debugger、LinkedIn の Post Inspector、X の card validator はいずれもページを再取得し、どのタグを解析したかを正確に示してくれます。これは、カードがなぜおかしく見えるのかを診断する手段も兼ねています。
すでに共有された URL でタイトル、説明、画像を変更したときはいつでも、再スクレイプを公開作業の手順に組み込んでください。それをしないと、初期の共有が、古い、あるいは壊れたカードを固定してしまい、ページ自体が正しくなった後も長く居座ることがあります。このプレビューワーを使えば、公開前にタグを確認できるので、後からの修正が少なくて済みます。
最もよくある Open Graph の間違い
繰り返し起きる失敗は予測可能です。og:image がなくカードにサムネイルがない、スクレイパーが解決できない相対的な画像 URL、HTTPS のページ上で HTTP 経由で配信される og:image（一部のプラットフォームはこれを拒否します）、そしてスクレイパーが決して実行しない JavaScript で挿入されるタグです。もう 1 つよくあるのは、og:url をカノニカルでない、あるいはステージングの URL に向けたままにすることで、これは共有数を分散させ、ユーザーを間違った場所へ送りかねません。
より見落としやすい間違いは、Open Graph とあなたの検索スニペットが別物であることを忘れることです。og:title と og:description はソーシャルカードを制御し、HTML の title タグと meta description は Google の検索結果を制御します。両者は同一である必要はありません。それぞれをその文脈に合わせて最適化してください。ソーシャルカードには歯切れよく好奇心をそそるものを、検索スニペットには明瞭でキーワードを意識したものを。
よくある質問
Open Graph タグとは何で、なぜ重要なのですか?
Facebook と Twitter のプレビューはどのように機能しますか?
既存のページがなくてもタグを生成できますか?
URL の取得が失敗したりデータが返らなかったりするのはなぜですか?
ツールは無料ですか?入力した URL はどうなりますか?
関連ツール
こちらの便利なツールもどうぞ