リンクプレビューは宛先ページの 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 つのキャッシュ、それだけです。
ブログの関連記事
よくある質問
リンクプレビューが表示されないのはなぜですか？
リンクプレビューは宛先ページの HTML にある Open Graph メタタグ、つまり og:title、og:description、og:image、og:url から生成されます。これらのタグが欠落している、不正な形式である、または画像に到達できない場合、プラットフォームはレンダリングする素材がなく、裸のリンクにフォールバックします。もう一つよくある原因はキャッシュです。プラットフォームがすでに一度ページを取得し、空または古い結果を保存しており、デバッガーツールで強制更新するまでそれを表示し続けます。
Facebook や LinkedIn のリンクプレビューを修正するにはどうすればいいですか？
プラットフォーム独自のツールで URL を確認してください。Facebook Sharing Debugger または LinkedIn Post Inspector です。それぞれがページを新たに取得し、見つかった Open Graph タグを正確に表示し、「再スクレイプ」ボタンでページを再取得してキャッシュされたカードをクリアできます。まずページの欠落または誤ったタグを修正してから再スクレイプしてください。プレビューは数分以内に更新されます。これらのデバッガーは壊れたプレビューを診断して更新する最も速い方法です。
短縮リンクはリンクプレビューを壊しますか？
通常のリダイレクトを使う短縮サービスなら壊しません。短縮リンクを共有すると、プラットフォームのクローラーがリダイレクトをたどって宛先ページに到達し、そこで Open Graph タグを読み込むため、プレビューには宛先のカードが表示されます。つまり長い URL と同じプレビューが表示されます。プレビューが壊れるのは、宛先にタグがない場合、リダイレクトチェーンがクローラーを混乱させる場合、またはリンクがリダイレクトではなく iframe マスキングを使っている場合です。適切なタグを持つページへの 1 ホップのクリーンな短縮リンクは、長い URL と同じようにプレビューされます。
リンクプレビューがあるプラットフォームでは表示されるのに、別のプラットフォームでは表示されないのはなぜですか？
各プラットフォームは独自のクローラーを独自のルールと独自のキャッシュで運用しています。Facebook は Open Graph を読み、X は Twitter Card タグを読んで（なければ Open Graph にフォールバック）、アプリによってはほとんどプレビューをレンダリングしません。つまり Open Graph タグはあるが Twitter Card タグがないページは、Facebook では完璧に表示されるのに X では裸のリンクになることがあります。修正方法は Open Graph と核心的な Twitter Card タグの両方を含め、それぞれのプラットフォームのデバッガーでキャッシュを個別にクリアすることです。
修正されたリンクプレビューが更新されるまでどのくらいかかりますか？
タグが欠落していた場合、プラットフォームが次に URL をクロールしたとき、通常はデバッガーで再スクレイプしてから数分以内にプレビューが表示されます。問題がキャッシュされた古いプレビューなら、キャッシュが期限切れになるか強制更新するまで誤った状態のままです。強制更新はデバッガーがオンデマンドで行います。最悪のケースは積極的にキャッシュし手動更新機能を持たないプラットフォームで、数時間待つか、キャッシュを回避するためにわずかに異なる URL を共有する必要があります。
リンクプレビューに表示される画像を変更できますか？
できます。宛先ページの og:image タグを表示したい画像に設定し（1200x630 ピクセルが信頼できるデフォルトサイズ）、各プラットフォームのデバッガーで URL を再スクレイプして古いものをクリアしてください。プレビュー画像は常にリンク自体ではなく、宛先ページのタグから取得されます。したがって短縮リンクで画像を上書きすることはできません。リンクが指すページの og:image を管理することで画像をコントロールしてください。
Elidoを試す
URLを貼り付けて短縮リンクを取得
登録不要。リンクは30日間有効。永久に保存するには登録してください。
Free、登録不要 · 1日あたり2件