リンクを共有しても、プラットフォームは単にアドレスを表示するわけではありません。ページを取得し、head からいくつかのタグを読み取って、画像、見出し、1 行のテキストからなるカードを組み立てます。どのタグを読むかは、リンクがどこに投稿されたかによって変わります。X はまず自分のタグを探し、なければ Open Graph のタグに戻ります。一方 Facebook と LinkedIn は Open Graph しか読みません。タグがなくても空欄にはならず、プラットフォームはページから別のものを拾います。多くの場合、最初に見つけたテキストです。下にアドレスを入力してページのタグを読み取るか、自分で書いてください。カードは 6 つのプラットフォームそれぞれの組み立て方で描かれます。
プラットフォームごとに読むタグが違う
X はまず自分のタグを確認し、なければ Open Graph に戻ります。Facebook と LinkedIn は Open Graph しか読まないので、X のタグはそこでは何の働きもしません。Slack と Discord はどちらでも受け取ります。そのため 1 つのページから互いに一致しない 6 つのカードが生まれ、確かに設定したはずの見出しが半分のカードで欠けることもあります。ここでの各プレビューは、そのプラットフォームが実際に使う順序に従っています。
Facebook と LinkedIn は読み取った内容を覚えている
どちらも、最初にあなたのページを取得したときに見つけた内容のコピーを保持し、長い間手放しません。タグを直してもカードは変わらず、これは正しい修正が失敗したように見える最も多い原因です。プラットフォームにページを読み直すよう依頼する必要があり、どちらにもそのための手段があります。Facebook の Sharing Debugger と LinkedIn の Post Inspector です。これらのキャッシュを代わりに消せるツールは存在せず、このツールも例外ではありません。ここに表示されるのは現在のタグの内容であって、Facebook がまだ表示している内容ではありません。
タグがなくても空欄にはならない
プラットフォームは空白を残さず、何かで埋めます。説明のタグがなければページから 1 行を取りますが、たいていは最初に見つけた文であり、多くのサイトではそれがメニュー項目や Cookie の通知です。画像がなければカードはファビコンの横の 1 行のテキストにまで縮みます。プレビューはこうした置き換えもそのまま再現します。
サイズと、切り取られる位置
幅が約 600px を下回ると、ほとんどのプラットフォームは大きな画像カードをやめてテキストの横の小さなサムネイルに切り替えます。これははるかに弱いカードです。1200 × 630 が多くの人の目指すサイズです。切り取りは中央から行われるため、上端、下端、左右の端に近いものは消える可能性があります。写真の下部に入れた電話番号や、ポスターの上部に置いた名前などです。画像はここでブラウザーに読み込んで実測しているので、表示されるサイズは幅のタグの申告値ではなく実際の値です。
同じタグ 1 組から 6 つのカード。プラットフォームごとに読み方が違うためです。
- それぞれのレイアウトで
- それぞれが使うタグの順序で
- 並べて表示
- ブラウザーで実測
- タグではなく実際のピクセル
- 実際に切り取られる形で
- 見出しと説明
- それぞれが切れる位置
- それぞれがどのタグ由来か
- そこにあるタグをそのまま
- フォールバックもそのとおりに
- 何も保存しない