リンクプレビューは宛先ページの HTML にある Open Graph タグから生成されます。og:title、og:description、og:image、og:url です。WhatsApp、Facebook、Slack、X にリンクを貼り付けると、そのプラットフォームのクローラーがページを取得し、これらのタグを読み込んでカードをレンダリングします。プレビューが表示されない場合、ほぼ必ず次の二つのどちらかが原因です。タグが欠落または壊れているか、プラットフォームが空の結果をキャッシュしてまだそれを表示し続けているかです。
この一つの事実、プレビューはリンクではなく宛先から生成されるという事実が、問題を修正可能にしています。デバッグの対象はプラットフォームではなく、ページのタグとプラットフォームがそれをキャッシュした内容です。このガイドではプレビューが壊れる理由、重要なタグの種類、短縮リンクが原因かどうか（通常はそうではない）、そして各プラットフォームのキャッシュをクリアする具体的なツールを説明します。
リンクの短縮も行っている場合は、URL の短縮方法でその部分を確認できます。短縮リンクに関する疑問は誤解が多いため、専用のセクションを設けています。
リンクプレビューが壊れる理由#
プレビューが失敗する理由は少数の予測可能なパターンに収まり、それを把握することが修正の半分です。
- Open Graph タグの欠落または不正な形式。
og:titleやog:imageがなければ、クローラーがカードを構築する素材がなく、裸のリンクになります。これが圧倒的に最も多い原因です。 - 到達できない、またはサイズが大きすぎる画像。
og:imageの URL が 404 を返す、ログインの裏にある、またはプラットフォームが時間内に取得できないほど大きい。カードは画像なしでレンダリングされるか、まったく表示されません。 - キャッシュされた空の状態。 プラットフォームがタグが存在する前に URL をクロールし、「プレビューなし」を保存して、強制的に再確認させるまでそれを表示し続けている。
- JavaScript のみによるレンダリング。 ほとんどのソーシャルクローラーは JavaScript を実行せず、生の HTML を読みます。タグがクライアントサイドで挿入されている場合、クローラーはそれを見られません。
最後の点は現代のシングルページアプリが常に陥る問題です。クローラーは HTML をリクエストし、空のシェルを受け取って去ります。Open Graph プロトコルの仕様ではタグが提供された HTML 上でどのように見えるべきかを定義していて、修正方法は常にタグがクローラーの受け取る HTML に含まれており、後からスクリプトで追加されるのではないことを確認することです。
プレビューを支える Open Graph タグ#
4 つのタグがほぼすべての仕事をします。これらを正しく設定すれば、ほとんどのプラットフォームでクリーンなカードがレンダリングされます。
og:title はカードの見出しです。og:description はその下のテキスト行です。og:image は画像であり、最も間違いやすい項目です。約 1200x630 ピクセルの画像の絶対 URL を指定し、認証なしで公開からアクセスできるようにしてください。og:url はページの正規アドレスであり、リンクにトラッキングパラメーターが付いていてもプレビューを安定させます。
X は独自の twitter:card タグ群を読み、それがない場合は Open Graph にフォールバックします。これがページが Facebook では完璧に表示されるのに X では裸に見える原因です。安全なアプローチは両方を含めることです。4 つの Open Graph タグに加えて twitter:card、twitter:title、twitter:description、twitter:image を記述します。ページの head に数行の HTML を追加するだけで、どこでも機能するカードと一箇所でのみ機能するカードの違いが生まれます。Google は関連するクローラーと特殊タグの動作についてドキュメントを公開しており、検索の観点からも参考になります。
短縮リンクはリンクプレビューを壊しますか？#
これが URL 短縮サービスのブログに人々が訪れる問いですが、答えは安心できるものです。クリーンな短縮リンクはプレビューを壊しません。短縮リンクを共有すると、プラットフォームのクローラーがリダイレクトをたどって宛先ページに到達し、そこで Open Graph タグを読み込むため、カードには長い URL と全く同じように宛先のプレビューが表示されます。
プレビューが短縮リンク絡みで壊れるのは特定のケースだけです。リダイレクトのチェーン、つまり短縮リンクが別の短縮リンクを指してそこからページへ、というパターンはクローラーを混乱させたりタイムアウトを引き起こしたりする可能性があります。1 ホップに保ちましょう。これはリダイレクトを高速かつ SEO フレンドリーに保つのと同じ規律です。本当のリダイレクトではなく iframe マスキングを使う短縮サービスはプレビューを壊します。クローラーがラッパーを見るのであって宛先を見るのではないからです。これはその手法が悪い考えである理由の一つで、リンクのクローキングと URL マスキングで詳しく説明されています。そして宛先ページ自体に Open Graph タグがなければ、どんな短縮リンクもそれを生成することはできません。カスタムドメインの 1 ホップリダイレクトを使って適切なタグを持つページへ向ければ、短縮していないリンクと同じプレビューが得られます。
クリーンに 1 ホップでリダイレクトし、視聴者と良いプレビューの間に入り込まない短縮リンクが必要なら、Elido の無料ワークスペースを開始して、適切なタグを持つページへ最初のリンクを向けてください。
プラットフォーム別の修正方法#
タグが正しくなったら、残る作業は各プラットフォームのキャッシュをクリアすることで、主要なプラットフォームにはすべてツールが用意されています。
- Facebook と Instagram。Facebook Sharing Debugger で URL を確認します。見つかったタグと「再スクレイプ」ボタンが表示され、ページを再取得してキャッシュされたカードをクリアできます。Instagram は同じクローラーを共有しているため、これで Instagram のプレビューも対応できます。
- LinkedIn。LinkedIn Post Inspector を使います。LinkedIn はプレビューを約 1 週間キャッシュし、インスペクターが早期更新を強制する唯一の方法です。
- X (Twitter)。カードバリデーターがページを再取得し、カードがどのようにレンダリングされるかを表示します。
twitter:cardタグが存在することを確認して再テストしてください。 - WhatsApp、iMessage、Slack、Discord。これらには公開デバッガーがありません。Open Graph に従いますが、キャッシュが強力です。回避策は、わずかに異なる URL を共有することです。無害なクエリパラメーターを追加または変更すると、アプリが新しい URL として扱い、新たにクロールします。
パターンはどこでも同じです。ページのタグを修正し、プラットフォームに再確認させます。単にキャッシュされているだけのプレビューは、再スクレイプしてから数分で修正されます。タグが欠落していたプレビューは、クローラーが次にページを確認したときに表示されます。
共有前のチェックリスト#
リンクを視聴者に送り出す前に、30 秒の確認で裸のリンクという恥ずかしい事態を防げます。
- 宛先に
og:title、og:description、og:image、og:urlが含まれ、Twitter Card タグもあることを確認する。 og:imageの URL をブラウザで直接開く。公開環境で約 1200x630 のサイズで読み込まれる必要がある。- 短縮リンクを含む最終的な URL を Facebook デバッガーで実際のカードを確認する。
- 短縮リンクを共有する場合、1 ホップで宛先にたどり着くことを確認し、チェーンになっていないことを確かめる。
この 4 つを実行すれば、重要なすべてのプラットフォームで初回からプレビューが表示されます。カードは魔法ではなく、プラットフォームが意地悪しているのでもありません。ページ上の 4 つのタグとクリアすべき 1 つのキャッシュ、それだけです。
ブログの関連記事#
Elidoを試す
URLを貼り付けて短縮リンクを取得
登録不要。リンクは30日間有効。永久に保存するには登録してください。
Free、登録不要 · 1日あたり2件