リンクプレビュー(OGP)に違う画像やタイトルが出るときの直し方
リンクプレビューに違う画像やタイトルが出る原因を調べ、ページのOGP(Open Graph)タグを直し、FacebookとLinkedInのプレビューを更新して、短縮リンクも確認する方法です。
リンクプレビューに違う画像やタイトルが出る原因は、たいていページのタグが間違っているか、アプリがページの古いコピーを保存していることです。多くのアプリは、og:titleやog:imageなどのページのOpen Graphタグ(OGP)からプレビューを作ります。まずタグを直し、そのあと古いコピーを持っているアプリにページを読み直してもらいます。FacebookならMetaのシェアデバッガー(Sharing Debugger)、LinkedInならPost Inspectorを使います。
このガイドでは、架空の市民劇団「Eastgate Players」を例にします。新作公演のページのプレビューに、去年のポスターとタイトルが出てしまうケースです。自分で編集できるページと、自分で管理している短縮リンクを対象にします。ページを別の人が運営している場合は、その人にタグの修正を依頼してください。
プレビューがどこから来るかを確かめる
プレビューは、転送をすべてたどったあと、リンクが最終的に開くページから作られます。短縮リンク自体にはプレビューがありません。Linksは保存された転送先へ転送し、プレビューの設定はありません。Linksアプリでリンクに付けたタイトルが、プレビューに表示されることはありません。
ページのOpen Graphタグを確認する
プライベートウィンドウでページを開いてソースを表示し、og:で検索します。Open Graphプロトコルでは、基本のタグとしてog:title、og:type、og:image、そしてページ自身の固定アドレスであるog:urlの4つを求めています。劇団が修正したタグは次のとおりです。
<meta property="og:title" content="Harbor Lights: our new show" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Five evenings in April at Eastgate Hall." />
<meta property="og:image" content="https://example.org/img/poster-harbor-lights.jpg" />
<meta property="og:url" content="https://example.org/harbor-lights/" />次のような不具合を探します。
| 不具合 | 直し方 |
|---|---|
og:imageタグがない |
追加する(ないとFacebookが推測し、別の画像を選ぶことがある) |
| タグを古いページからコピーした | このページに合わせて、すべてのog:タグを更新する |
og:imageが去年のファイル名を使い回している |
新しい画像の名前を変え、タグを更新する |
og:imageが/img/poster.jpgのような部分的なパスになっている |
Open Graphの例と同じく、https://から始まる完全なアドレスを使う |
| ページや画像の表示にログインが必要 | 公開のページと画像を使う(プレビューツールはログインしていない) |
og:urlがトップページを指している |
このページ自身のアドレスにする |
| 編集した内容がソースに反映されていない | サイトのキャッシュをクリアする |
劇団のページは去年のページをコピーしたものだったので、og:titleに前回の公演名が残っていました。また、新しいポスターはposter.jpgという同じ名前で古いファイルを置き換えていました。
アプリがキャッシュしたプレビューを更新する
ページを直しても、アプリがすでに保存したプレビューは変わりません。
Facebookの場合は、Metaのシェアデバッガーにページのアドレスを貼り付けます。Metaの共有に関するガイドによると、このツールはクローラーが読み取ったタグを表示し、ページをもう一度取得します。画像はアドレスごとにキャッシュされ、アドレスが変わらない限り更新されません。劇団が差し替えたポスターが古いままだったのはこのためです。Metaは、最初の共有で画像が正しく読み込まれるよう、og:image:widthとog:image:heightの指定も勧めています。
LinkedInの場合は、Post Inspectorにアドレスを入力してプレビューを確認します。LinkedInのヘルプによると、更新が反映されるのは新しい投稿だけです。既存の投稿は古いプレビューのままなので、劇団は新しく投稿し直します。
WhatsAppやX (Twitter)など、ほかのアプリでは、送信する前に下書きでプレビューを確認しましょう。
プレビューツールから見た短縮リンクを試す
ツールが確認するのは、入力したアドレスです。reunified.link/k7m2x9qaのような短縮リンクを共有するなら、短縮リンクもツールで確認しましょう。
Linksは、プレビューツールを含むすべてのアクセスにルールを適用します。国のルールは、その国から接続するツールに一致することがあり、スマートフォンやタブレットとして名乗らないツールはデスクトップとして扱われます。そのため、プレビューにルールの転送先が出ることがあります。すべての転送先に正しいタグを付けておきましょう。ルールの判定方法は転送ルールのガイドで説明しています。
ツールに、リンクを利用できない、またはリンクが存在しないというLinksのページが表示される場合は、トラブルシューティングガイドを参照してください。
短縮リンクの転送先を変更したあとも、プレビューをキャッシュしたアプリには古いページが表示されることがあるので、ツールで短縮リンクをもう一度確認します。
プレビューがクリック数に与える影響を理解する
多くのアプリは、リンクが貼り付けられた時点でそのリンクを取得します。Linksは、認識したクローラー、リンクプレビュー、ブラウザの先読みを転送しますが、カウントもクレジットの請求もしません。Metaの共有用クローラーもその1つなので、シェアデバッガーで確認してもクリックはカウントされません。Linksが認識しないツールのアクセスは、クリックとしてカウントされます。
自分がブラウザでテストのために開いた分はカウントされ、同じ人が2回開けば2回とカウントされます。Linksが各クリックについて何を記録するかは、分析とプライバシーのガイドで説明しています。
共有するたびにプレビューを確認する
次のチェックリストを使いましょう。
- プライベートウィンドウでページのタグを確認する。
- 変更した画像には、すべて新しいファイル名を付ける。
- 短縮リンクを作成するか、その転送先を更新する。
- ページと短縮リンクの両方を、MetaとLinkedInのツールで確認する。
- 下書きのメッセージでプレビューを確認する。
- 投稿したら、各SNSで実際の投稿を1つずつ確認する。
サイトのデザインを変えたあとも確認しましょう。新しいテンプレートでタグが変わることがあります。劇団は今では、ポスターのファイルに公演名を付けています。
Linksは、転送先を変えても同じ短縮アドレスを保ち、認識したプレビューの取得をカウントに含めません。プレビューは自分のページから作られるので、直すべき場所もそのページです。