OGプレビュー — X・Facebook・LinkedIn・Slack・Discord
URLからOpen Graphタグを取得、またはHTMLを貼り付け。5つのプラットフォームの実寸でシェアカードを確認できます。
1200 × 630 (1.91:1) — one image serves every platform
概要
シェアカードは、多くの人がそのページで最初に目にするものです。しかも5つの プラットフォームがそれぞれ違うレイアウトで描画します。このツールは同じタグから 5種類すべてを実際のフィード幅で描くので、「LinkedIn だとタイトルが切れるのか？」を 推測ではなく目で確認できます。
生成されるタグブロックはそのまま <head> に貼れる形式で、content の値は
HTML エスケープ済みです。
使い方
- 上部の欄にページのURLを入れて fetch meta を押すと、サーバーがタグを読み取って各欄に流し込みます。paste HTML でソースを貼り付ける方法もあり、そちらはタブ内で完結します。
- タイトル・説明・サイト名・画像URLは手で調整して、別案を試せます。
- ALL と個別プラットフォームを切り替えて、比較したり1つに集中したりできます。
- カウンタを見てください。切り詰められる長さになると橙色に変わります。
- copy tags を押して、ページの
<head>に貼り付けます。
実際に効くタグ
5 つのプラットフォーム、1 組のタグ。それぞれが何を、どの順で読むか。
| タグ | 効果 | 補足 |
|---|---|---|
og:title | カードの見出し | <title> にフォールバック。幅の狭いカードでは約 60 文字で切り詰め |
og:description | 本文 | <meta name="description"> にフォールバック。約 155 文字 |
og:image | 画像 | 絶対 URL 必須。 相対パスはどのクローラーも解決しない |
og:url | 共有時の正規 URL | プラットフォームはこれで重複排除するので、誤った値は 2 ページのエンゲージメントを統合してしまう |
og:type | website か article | 描画が変わることはまれ。article は一部で追加フィールドを有効にする |
og:site_name | タイトルの上下に出る小さいラベル | X は無視する |
twitter:card | summary か summary_large_image | X がサムネイルを出すか全幅の画像を出すかを決める |
twitter:image | X 用の画像 | 任意。無ければ X は og:image にフォールバックする |
最も多い間違いは og:image が相対パスであることです。ページ URL を基準に解決する
ローカルのプレビューツールでは正しく表示され、それ以外のあらゆる場所では画像の
無いカードになります。クローラーは相対パスを解決しないためです。
2 番目に多いのは og:url が誤った異形を指していることです。トラッキング
パラメータ付き、あるいはサイトが https:// を配信しているのに http:// を
指している、といった形です。プラットフォームはこの値をキャッシュのキーにするので、
この間違いはカードを直しにくくもします。
キャッシュと、修正が反映されない理由
どのプラットフォームも、その URL が最初に共有されたときに組み立てたカードを キャッシュし、こちらが制御できるスケジュールで再取得することはありません。 タグを編集しても、既に共有されたカードは更新されません。
強制的に再取得させる方法はプラットフォームごとに違います。
- Facebook / Instagram — Sharing Debugger の「Scrape Again」
- LinkedIn — Post Inspector
- X — 公開のデバッガはもう無く、URL を変えるのが確実な経路
- Slack — 30 分程度キャッシュし、その後再取得する
- Discord — 強くキャッシュする。URL を変えるのが実用的な対処
つまりこれは、最初の共有の後ではなく前にカードを確認すべき理由です。 既に拡散した誤ったカードは、プレビューで気づいた誤ったカードよりはるかに大きな 問題になります。
画像の実務的な要件
1200 × 630、比率 1.91:1 が 5 つすべてで機能し、作る価値のある唯一のサイズです。 カードを壊す細部は次のとおりです。
- 200 × 200 未満 はいくつかのプラットフォームがそのまま拒否します。
- 約 5 MB 超 は、リサイズせずに破棄するクローラーがあります。
- 透過 PNG はプラットフォームが使う背景と合成され、その背景はライトモードと ダークモードで異なります。不透過の画像を使ってください。
- 端に置いた文字は切り取られます。同じ画像をプラットフォームごとに少しずつ 違う形で切り取るためです。重要なものは中央 80% の中に収めてください。
- 認証の背後にある画像は空のカードになります。クローラーはログインしておらず、 Cookie も送りません。
プレビューが実物と違い得る点
このツールが描くのは、各プラットフォームのカードをその実寸で再現したもので、 プラットフォームから撮ったスクリーンショットではありません。ここから 2 つの 限界が出ます。
1 つは、プラットフォームはレイアウトを随時変えることです。パディングや行数の 扱いが変われば、再現との差が生まれます。切り詰めの境界に近いタイトルは、実物と プレビューで 1 行分ずれ得ます。だからカウンタが橙色になったら、境界ぎりぎりを 狙うのではなく短くする方が安全です。
もう 1 つは、ダークモードです。プラットフォームによってカードの背景色が変わり、 透過 PNG は合成先が変わります。不透過の画像を使えばこの差は消えます。
使用例
- 公開中のページの点検: URL を貼って fetch meta を押すだけで各欄が埋まり、SNS が組み立てる姿が見えます。
- 新規ページの設計: 画像を空のままプレースホルダで作り込み、実際の 1200 × 630 の URL ができたら差し替えます。
- 長いタイトル: 90文字の見出しを貼ると、X では収まるのに Facebook では2行に折り返すことが分かります。
注意事項
プレビューは各プラットフォームのカードを実寸で忠実に再現したものであって、 実際のプラットフォームから取得したスクリーンショットではありません。各社は レイアウトを随時変更しますし、独自のキャッシュを持つものもあります。すでに 共有済みのカードは、そのプラットフォームのデバッガでキャッシュを消すまで 古い画像のままになることがあります。
タグの抽出は og:* を優先し、無ければ twitter:*、さらに <title> と
<meta name="description"> の順で拾います。クローラー自身の優先順位に
おおむね合わせており、fetch meta でも貼り付けでも同じ順序です。
サーバー側の取得はリダイレクトを最大5回まで追い、ページの先頭512kBまでを読み、 HTML 以外は拒否します。返すのは決められたメタキーの値だけで、ページの他の 内容が返ることはありません。