会社のホームページをブラウザで開くと、内容は正しく更新されている。それなのに、LINEやX、FacebookにURLを貼ると、古いタイトルや別ページの画像が表示される。
こうした「シェアしたときだけ表示が合わない」状態は、小規模な会社のサイトでもよく起こります。原因の多くは、ページの本文とは別に用意された「シェア用の情報」にあります。
本記事では、表示がずれたときに何を確認し、どの順番で直せばよいかを整理しました。HTMLの細かな書き方には踏み込まず、担当者が状況を判断できるところまでを扱います。
結論｜「ページの中身」と「シェア用の情報」を分けて確認する
SNSでの表示がずれたときは、まず次の2つを分けて確認します。
1つ目は、ブラウザで開いたときのページの中身です。タイトル、本文、写真がこれにあたります。2つ目は、SNSやチャットにURLを貼ったときに表示されるシェア用の情報です。
ブラウザで正しく見えていれば、サイトの公開自体は問題なく動いています。直す対象は、シェア用の設定か、SNS側に残った古い情報に絞れます。
ブラウザで開いても古い内容が表示される場合は、ページ本文の更新が反映されていない状態です。この場合は、シェアの設定より先にページの更新作業を確認しましょう。
二つを混ぜて考えると直す場所が一度に増え、作業が止まりやすくなります。
シェアしたときに表示がずれる理由
SNSやメッセージアプリは、URLが貼られるとページを読み込み、カード形式のプレビューを作ります。
このとき参照するのは、画面に表示されている本文ではなく、ページ内に埋め込まれた「OGP（Open Graph Protocol）」と呼ばれる設定です。
OGPで指定する主な項目は、次の3つです。
- シェア用のタイトル
-
プレビューの見出しとして表示される文言です。ページの見出しとは別に設定できます。
- シェア用の説明文
-
タイトルの下に表示される短い紹介文です。未設定だと本文の冒頭などが自動で使われ、途中で切れることがあります。
- シェア用の画像
-
プレビューに大きく表示される画像です。全ページ共通にしていると、どのURLでも同じ画像になります。
本文を書き換えても、これらの設定が古いままならプレビューは変わりません。全ページで同じ画像を指定していれば、どのページを貼っても会社ロゴだけが表示されます。
さらに、SNS側には一度読み込んだプレビューをしばらく保存しておく仕組み（キャッシュ）があります。
サイト側で設定を直しても、SNSが以前の情報を使い続けるため、反映までに時間差が生まれます。
よくあるずれ方と見分け方
表示のずれ方を見れば、確認すべき場所はおおよそ見当がつきます。
| 症状 | 考えられる原因 | 確認する場所 |
|---|---|---|
| ブラウザでも古い内容が表示される | ページ本文の更新が反映されていない | 管理画面の公開状態、更新作業 |
| 本文は新しいのに、プレビューだけ古い | SNS側に以前の情報が残っている | 各SNSの再取得の手段 |
| どのページを貼っても同じロゴが出る | シェア用画像が全ページ共通になっている | テーマやプラグインのOGP設定 |
| 説明文が途中で切れる、意図しない文章が出る | シェア用の説明文が未設定、または長すぎる | ページごとの説明文の設定 |
| 特定のSNSだけ古い | そのサービスに古い情報が残っている | そのサービスでの再取得 |
たとえば、採用のお知らせを更新したのに、社内チャットで共有すると昨年の募集タイトルが表示されるケースがあります。
担当者は「サイトは直した」と認識していても、受け取った側が最初に目にするのはプレビューの古いタイトルです。更新漏れというより、表示の経路が2つあることで起きるずれといえます。
WordPressでは、OGPをSEO系のプラグインやテーマの機能で管理していることが多く、本文の編集画面とは別の場所に設定項目があります。投稿編集画面の下部や、プラグインの設定画面に「SNS」「OGP」「ソーシャル」といった名称で置かれています。
表示のずれを直す手順
確認と修正は、次の順番で進めると迷いにくくなります。
ログインしていない状態のブラウザ（シークレットウィンドウなど）で対象ページを開き、タイトル、本文、画像が最新になっているかを確かめます。ここで古ければ、先にページ本文の更新を済ませます。
管理画面でシェア用のタイトル、説明文、画像を開き、ページの内容に合わせて更新します。画像は横長（1200×630ピクセル程度）で用意すると、多くのSNSで見切れにくくなります。
設定を直しても、SNSに古い情報が残っている場合があります。Facebookには「シェアデバッガー」という公式ツールがあり、URLを入力すると最新の情報を読み込み直せます。
ほかのサービスも、時間の経過とともに新しい情報へ切り替わっていきます。
どのサービスで、どのページの、何がずれていたかを一文で残しておきます。次に同じ現象が起きたとき、確認の手間を大きく減らせます。
直すときに注意したいこと
焦って作業範囲を広げると、原因がかえって見えにくくなります。次の点に気をつけましょう。
- プレビューが変わらないからといって、本文を元に戻したり、サイトを作り直したりしない
- すべてのページ、すべてのSNSを同じ日に揃えようとしない
- 設定項目が見つからないときは、HTMLのソースを無理に編集しない
優先順位の目安も決めておくと進めやすくなります。お知らせやコラム、採用情報のようにシェアされやすいページは、ページごとにシェア用の情報を設定するのがおすすめです。
会社概要のように共有される機会が少ないページは、共通画像でも十分に役割を果たします。確認は、社内でよく使うチャットや、発信に使っているSNSから始めると効率的です。
制作会社や更新担当者に依頼する場合、専門用語で説明する必要はありません。「このURLをLINEで送ると、タイトルと画像が古い」のように、ずれた事実を具体的に伝えれば対応を進めてもらえます。
まとめ
ホームページをSNSでシェアしたときにタイトルや画像がずれる原因は、多くの場合、ページ本文とは別に管理されているシェア用の情報にあります。
- まずブラウザで開き、ページの中身が最新かを確認する
- 中身が正しければ、シェア用の設定とSNS側に残った古い情報を確認する
- 設定を直したあとは、SNS側で再取得するか、反映を待つ
手元にある自社サイトのURLを、普段使っているチャットやSNSに一度貼ってみてください。ブラウザで見える内容とプレビューが揃っているかを確かめるだけでも、次に取るべき対応が見えてきます。
アドメディアでは、Webサイト制作、広告運用、コンテンツ制作、AI活用支援などを行っています。事業に合ったWeb集客の仕組みづくりをご検討の方は、公式サイトよりお問い合わせください。
