OGプレビュー
OGプレビューはOpen GraphとTwitterカードのタグを読み取り、クローラが実際に表示するリンクカードをフォールバックも含めて示します。og:titleがなければカードは<title>を表示し、多くの場合サイト名が先頭に付きます。相対パスの画像URLはそもそも取得されない、といった沈黙の失敗も報告します。
acme.example
料金
3つのプラン。最低席数なし、ずっと使える無料プランもあります。
acme.example
料金
3つのプラン。最低席数なし、ずっと使える無料プランもあります。
これらのタグに何問題がありますか？
OGプレビューはどう動きますか？
リンクカードは、ページ上のタグをもとに他人のクローラが描画します。そして、うまくいかないあらゆる形が沈黙しています。例外もログも発生せず、ページはブラウザでは正常に見えます。カードだけが少しずれ、クリック率はわずかに低いままです。
フォールバックチェーンが実際の表示を決める
プラットフォームはog:titleを必須にしていません。なければ<title>が使われます。多くのサイトでは<title>はページ名の前にサイト名が付いた形なので、カードは「料金」と表示されるべきところを「Acme Analytics——料金」と表示します。上のプレビューは存在するタグを並べるだけでなく、フォールバックチェーンを解決し、各フィールドがどのソースから来たかを明示します。「欠落」と「存在するが誤り」では必要な修正が異なるためです。
成功に見える失敗
<meta property="og:image" content="/og/pricing.png">は有効なHTMLでありながら完全に壊れています。クローラはページを基準に相対パスを解決しないため、画像は一度も取得されず、カードには灰色の四角が表示されます。ローカルのプレビューでは機能するのに本番では何も表示されないカードの最大の原因であり、相対的な画像URLがスタイルの指摘ではなくcriticalとして報告される理由です。
パターンマッチではなくパースする理由
安易な実装はタグごとの正規表現ですが、最初の実ページで壊れます。content="a > b"は引用された属性の中に>を含み、content='It's here'は素朴な走査を終了させてしまうアポストロフィを持ち、<meta>は自己完結していたり閉じられていなかったり、属性の順序も任意です。そのためドキュメントは、クォートと生テキスト要素を理解するスキャナで一度だけ走査されます。このサイトのJSONツールやXMLツールと同じ方式です。
できないのは画像の取得です。ネットワークリクエストを一切出さないと謳うページからリクエストが出ることになるためです。その代わり、リクエストなしで検証できる項目をチェックします。URLが絶対か、宣言された寸法が十分か、アスペクト比が各プラットフォームがクロップする1.91:1に近いか、alt属性が存在するか。
head内マークアップ
<meta property="og:title" content="Pricing" /> <meta property="og:image" content="/static/og/pricing.png" /> <meta name="twitter:card" content="summary" />
検出結果
critical og:image "/static/og/pricing.png" is not an absolute URL.
Crawlers do not resolve relative paths.
warning og:description Missing. The card falls back to <meta description>.
warning og:image:alt Missing. Screen readers announce nothing.
info twitter:card "summary" renders a small square thumbnail.head内マークアップ → 検出結果
head内マークアップ
<meta property="og:title" content="Pricing" /> <meta property="og:image" content="/static/og/pricing.png" /> <meta name="twitter:card" content="summary" /> <title>Acme Analytics — Pricing</title> <meta name="description" content="Pricing for Acme Analytics." /> <link rel="canonical" href="https://acme.example/pricing" />
検出結果
critical og:image "/static/og/pricing.png" is not an absolute URL. warning og:description Missing. warning og:url Missing. warning og:image:alt Missing. info og:type Missing, so it defaults to "website". info og:site_name Missing.
OGプレビューが対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| og:title | 必須 | <title>にフォールバック | カードの見出しです。なければカードは<title>を使用します。多くのサイトでは<title>の先頭にサイト名が付くため、カードがそのページではなくトップページのように読めてしまいます。 |
| og:description | 必須 | meta descriptionにフォールバック | 見出しの下の2行です。meta descriptionは検索結果のために書かれ、カードのコピーはクリックするかどうか迷っている人のために書かれます。同じ文章であることはまれです。 |
| og:image | 必須 | なし | 絶対URLのhttpsアドレスである必要があります。クローラは相対パスを解決しません。1200×630が各プラットフォームのクロップ基準となるサイズで、600×315未満では引き伸ばされてぼやけます。 |
| og:image:alt | 推奨 | なし | スクリーンリーダーが読み上げ、画像の読み込みに失敗したときにも表示されます。主要なプラットフォームはすべて対応していますが、ほとんどの場合省略されています。 |
| og:image:width / height | 推奨 | 自動検出 | 宣言しておくと、クローラは画像をダウンロードする前にカードのレイアウトを組めます。宣言がないと、ページ取得に続いて画像の2回目のリクエストが発生します。 |
| og:url | 推奨 | 取得したURL | ページの正規アドレスです。なければ、2つのURLで到達できるページはシェア数が両方に分散します。 |
| og:type | 推奨 | website | "article"を指定するとauthorや公開日時のフィールドが使えるようになり、カードの表示方法が変わるクライアントもあります。 |
| og:site_name | 任意 | ホスト名 | LinkedInや一部のチャットクライアントでタイトルの上に表示されます。なければホスト名が表示されます。 |
| twitter:card | 推奨 | summary | summary_large_imageは画像を全幅で表示し、summaryは小さな正方形のサムネイルを表示します。認識できない値はsummaryとして扱われます。 |
| canonical | 推奨 | なし | <link rel="canonical">はOGタグではありませんが、同じだけ重要です。2つのアドレスで到達できる同一ページが自分自身と競合するのを防ぐものだからです。 |
よくある質問
プレビューに画像が表示されないのはなぜですか？
ほとんどの場合、原因は相対URLです。og:imageは絶対URLである必要があります。https://acme.example/og/pricing.pngであり、/og/pricing.pngではありません。クローラは文脈なしで画像を取得するため、解決の基準となるページを持ちません。この理由から、このツールではcriticalとして報告します。2番目に多い原因はログインの背後にある画像、3番目はプラットフォームのユーザーエージェントをブロックするCDNです。
タグを更新したのにカードが変わらないのはなぜですか？
クローラは結果をキャッシュします。FacebookとLinkedInはカードを数日間保持し、Xは約1週間キャッシュします。FacebookのSharing Debuggerにはキャッシュを消すScrape Againボタンがあり、LinkedInのPost Inspectorにも同じ機能があります。実行するまで見えているのは古いタグの結果であり、正しく反映されたはずの変更が反映されていないように見えるのはこのためです。
画像のサイズはいくつにすればよいですか？
1200×630ピクセルです。これはちょうど1.91:1で、各プラットフォームがクロップする比率そのものなので、端が切り取られません。600×315未満は引き伸ばされてぼやけ、これより大幅に横長なものは端が失われます。写真にはJPEG、フラットな図版やテキストにはPNGを使い、サイズは約1MB未満に抑えます。大きい画像を待たずにスキップするクライアントがあるためです。
Open GraphタグがあればTwitterタグは不要ですか？
Xはタイトル、説明、画像についてOpen Graphにフォールバックするため、og:*だけでカードは表示されます。ただしカードタイプまでは選んでくれません。twitter:cardがなければ、大きい画像ではなく小さな正方形のsummaryになります。タグ1つ追加する価値はあります。カードのコピーを他の場所のリンクプレビューと変えたい場合は、twitter:titleも設定する価値があります。
このツールはページや画像を取得しますか？
いいえ。マークアップを貼り付けるとタブ内で解析され、Networkパネルには何も表示されません。これは制限ではなく意図的な制約です。画像を取得するツールなら寸法を測れますが、同時に貼り付けられたすべてのURLを知るサーバーにもなってしまうためです。ここでのチェックは、リクエストなしで検証できる項目に限られます。URLが絶対か、宣言された寸法が十分か、アスペクト比、alt属性の有無です。
どのプラットフォームがどのタグを読みますか？
Open GraphはFacebook、LinkedIn、Slack、WhatsApp、Discord、Telegram、Pinterest、そしてフォールバックとしてXが読みます。Xでは独自のtwitter:*タグがあればそちらが優先されます。さらにクライアント独自の要件も加わります。Slackのunfurlには正方形に近い画像が求められ、Discordはsummaryカードでは小さなサムネイル、summary_large_imageでは全幅のバナーを表示します。