LINEでOGPが表示されない原因と解決策を徹底解説|キャッシュ問題から設定ミスまで

家電・スマホ・PC

LINEでURLをシェアしたとき、タイトルや画像がきれいに表示されることってありますよね。
あれが「OGP(オープングラフプロトコル)」の機能なんですが、設定したはずなのに表示されないことがある、あるいは「古い画像のまま変わらない」という状況に悩んでいる人はかなり多いようです。

この記事でわかること

  • LINEでOGPが表示されない主な原因と仕組み
  • LINEのキャッシュをクリア・更新する具体的な方法
  • OGPタグの正しい書き方と設定時によくあるミス
  • WordPressとHTMLそれぞれでのOGP対応手順

そもそもOGPとは何か、LINEとの関係を理解しよう

見出し画像1

OGPがなぜLINEで表示されないのか、その理由を理解するには、まず「OGPとは何か」という基本を押さえておく必要があります。
仕組みを知るだけで、トラブルの原因がぐっとわかりやすくなります。

OGPの基本的な仕組み

OGPとは「Open Graph Protocol(オープングラフプロトコル)」の略で、WebページのURLをSNSなどでシェアしたときに、タイトル・説明文・画像・サイト名などを自動で引っ張ってきて表示するための仕組みです。
もともとはFacebookが提唱した規格ですが、現在はLINEやX(旧Twitter)、その他多くのSNSやメッセージアプリで広く使われています。

たとえば、LINEのトーク画面でURLを貼り付けると、そのページのサムネイル画像やタイトルが自動的にプレビュー表示されますよね。
あれはLINEがそのURLにアクセスして、ページのHTMLに書かれたOGPタグの情報を読み取ることで実現しています。
つまり、OGPタグがHTMLに正しく記述されていないと、LINEでのプレビューが正常に表示されない可能性があるわけです。

OGPタグはHTMLの<head>タグ内に記述するメタタグで、主に以下のような種類があります。

  • og:title:ページのタイトル
  • og:description:ページの説明文
  • og:image:サムネイル画像のURL
  • og:url:ページの正規URL
  • og:type:コンテンツの種類(website、articleなど)
  • og:site_name:サイト名

これらが正しく設定されていれば、LINEでシェアしたときにきれいなプレビューが表示されるはずです。
逆に言えば、どれか一つでも書き方がおかしかったり、設定が抜けていたりすると、表示が崩れたり、まったく表示されなかったりします。

LINEがOGP情報を読み取る仕組み

LINEでURLを共有すると、LINEのサーバー(クローラー)が自動的にそのURLにアクセスし、ページのHTML内にあるOGPタグの情報を取得します。
この取得した情報は、LINEのサーバー内にキャッシュ(一時保存データ)として保存されます。

次回以降、同じURLがシェアされたとき、LINEはWebページに再アクセスするのではなく、このキャッシュから情報を表示します。
これによって表示が速くなるメリットがある一方で、ページの内容を更新してもキャッシュが残っている場合、古い情報が表示され続ける可能性があります。

「OGP画像を差し替えたのに、LINEでは古い画像が表示されたまま」というのは、まさにこのキャッシュが原因です。
この問題はLINEに限った話ではなく、FacebookやXでも同様に起こりますが、LINEではキャッシュのクリアが特に難しいとされており、対処法が限られる場合があります。

また、LINEのクローラーはOGPタグだけでなく、ページのHTMLタグ(<title>タグなど)からも情報を取得しようとする場合があります。
そのため、OGPタグを設定していないのに何らかの情報が表示されるケースや、意図しない情報が混在して表示されるケースもあります。
これはLINEの独自仕様によるもので、他のSNSとは挙動が若干異なることがあります。

表示されない・変わらないの違いを整理する

「OGPが表示されない」と一口に言っても、実は状況によって原因が異なります。
大きく分けると次のパターンがあります。

状況 主な原因
最初から何も表示されない OGPタグの記述ミス・設定漏れ、画像URLの誤り
以前の情報のまま変わらない LINEサーバー側のキャッシュが残っている
画像だけ表示されない 画像のサイズ・形式・URLの問題
他のSNSでは表示されるのにLINEだけNG LINEのクローラーへの対応不足

自分がどのパターンに当てはまるかを最初に確認してから対処法を探すと、解決までの時間をかなり短縮できます。

LINEでOGPが表示されない主な原因を確認しよう

見出し画像2

「なんで表示されないんだろう?」と悩んでいるとき、原因はだいたいいくつかのパターンに絞られます。
ここでは特によくある原因を順番に見ていきましょう。

原因① OGPタグの記述ミスや設定漏れ

一番多いのが、OGPタグそのものの記述ミスや、必要なタグが抜けているケースです。
特に手動でHTMLを書いている場合は、タイポ(打ち間違い)や属性の書き忘れが起きやすい傾向があります。

よくある記述ミスの例としては次のようなものがあります。

  • property属性ではなくname属性を使ってしまっている(OGPタグはpropertyが正しい)
  • content属性の値に余分なスペースや改行が入っている
  • og:imageに相対URLを使ってしまっている(絶対URLが必要)
  • <head>タグの外に記述してしまっている

特にog:imageに相対URLを使うのは非常によくあるミスです。
たとえば「/images/ogp.jpg」のような書き方は、ローカル環境では問題なく見えても、LINEのクローラーが正しく画像URLを解釈できない可能性があります。
必ず「https://example.com/images/ogp.jpg」のような完全なURLで記述するようにしてください。

記述が正しいかどうかを確認するには、後述する「OGP確認ツール」を使うのが手っ取り早いです。
自分の目だけではなかなか気づきにくいミスでも、ツールを使えばすぐに発見できます。

原因② 画像ファイル自体に問題がある

OGPタグの記述は正しいのに画像だけ表示されない、という場合は、画像ファイルそのものに問題がある可能性があります。

LINEのOGP画像には、いくつかの条件があります。

  • 画像サイズ:推奨は1200×630px程度。
    あまりに小さい画像(300px以下など)は表示されないことがある
  • ファイル形式:JPG・PNG・GIFが一般的。
    WebPは環境によっては非対応の場合がある
  • ファイルサイズ:大きすぎると読み込みに失敗するケースがある。
    目安は1MB以下が望ましい
  • 画像URLのアクセス可否:設定したURLに実際にアクセスできるかどうか(パスワード保護や404エラーになっていないか)

特に「画像URL自体は合っているつもりなのに表示されない」という場合、画像ファイルが実際にそのURLに存在しているかを、ブラウザで直接そのURLを開いて確認してみることをおすすめします。
意外と「ファイルを差し替えたつもりが、実はアップロードされていなかった」というケースも多いです。

原因③ LINEサーバーのキャッシュが残っている

OGPの設定は正しいのに古い情報が表示され続ける場合、LINEのキャッシュが原因であることがほとんどです。
これはサイトオーナー側の問題ではなく、LINE側の仕様による部分が大きいです。

LINEは一度取得したURLの情報をサーバーにキャッシュとして保存するため、ページを更新してもすぐには反映されません。
このキャッシュの保持期間はLINE側の都合で決まるため、外部から強制的にクリアするのが難しい状況です。

以前はLINEが公式のキャッシュクリアツールを提供していましたが、現在はそのツールが使えない場面も増えています(最新の状況は公式サイトをご確認ください)。
そのため、キャッシュ問題を解決する一つの方法は「URLを変える」ことです。この点については次のセクションで詳しく説明します。

原因④ LINEのクローラーがページにアクセスできない

LINEがOGP情報を取得するためには、LINEのクローラーがページにアクセスできる必要があります。
次のような状況ではクローラーのアクセスがブロックされてしまい、情報を取得できないことがあります。

  • Basic認証(ベーシック認証)がかかっていてパスワードが必要な状態
  • ステージング環境やローカル環境で外部からアクセスできない
  • .htaccessやrobots.txtでクローラーをブロックしている
  • サーバーのファイアウォールやセキュリティ設定で特定のIPをブロックしている

開発中のサイトでテストしようとして「表示されない」という場合、このパターンが原因であることも多いです。
本番環境にアップしてから確認するのが確実です。

LINEのOGPキャッシュをクリアする方法と最強の解決策

見出し画像3

原因がわかったら、次は実際の対処法です。
特にキャッシュの問題は多くの人がつまずくポイントなので、使える方法を順番に整理しておきます。

方法① OGP確認ツールでまず現状を把握する

対処を始める前に、まず「現在どんな情報がOGPとして設定されているか」を確認することが大切です。
自分の目でソースコードを見てもわかりにくい場合は、専用のOGP確認ツールを使うのが便利です。

たとえば「OGPチェッカー」や「Card Validator」「OGP確認ツール」などで検索すると、URLを入力するだけでOGPの設定内容を一覧で表示してくれるWebサービスがいくつか見つかります。
これらを使えば、og:imageの画像が正しく設定されているか、og:titleが取得されているかなどをひと目で確認できます。

また、Facebookには「シェアデバッガー」という公式ツールがあり、URLを入力すると現在のOGP情報とキャッシュの状況を確認できます。
LINEのOGPとFacebookのOGPは同じタグを使うため、Facebookのデバッガーで設定内容を確認することは、LINEの表示確認にも役立ちます。
ただし、Facebookのデバッガーを使ったキャッシュクリアはFacebook上での反映に限られる点は覚えておいてください。

方法② LINEの公式キャッシュクリアツールを試す

LINEにはOGP情報のキャッシュを更新するための仕組みが存在しており、過去には「LINE URL Cache Cleaner」のような形で開発者向けに提供されていた時期もありました。
ただし、この仕組みの提供状況や使い方は変わっている場合がありますので、最新の情報についてはLINE Developersの公式ドキュメントをご確認いただくことをおすすめします。

LINEの公式ツールが使える場合、対象URLを入力して情報を再取得させることで、キャッシュがクリアされ、更新後のOGP情報が反映される可能性があります。
ただし、すべての環境・状況で必ずうまくいくとは限らないため、次の方法と組み合わせて使うのが現実的です。

方法③ 最強の解決策は「URLを変える」こと

キャッシュは「URLに紐づいて保存されるデータ」です。
つまり、URLが変わればキャッシュも別物として扱われます。
これが、LINEのOGPキャッシュ問題に対する最もシンプルで確実な解決策です。

具体的には次のような方法があります。

  • URLの末尾にクエリパラメータを追加する(例:https://example.com/page/?v=2)
  • ページのURLそのものを変更する(パーマリンクを変える)
  • 画像URLにバージョン番号やランダム文字列を追加する(例:ogp.jpg?20240101)

なお、URLやパーマリンクを変える場合は301リダイレクトの設定を忘れないことをおすすめします。古いURLからのアクセスや被リンクのSEO効果を失わないためにも、リダイレクト設定はセットで行うようにしてください。

クエリパラメータを追加するだけであれば、元のページのSEOへの影響はほとんどありません。
「とにかく早く新しいOGP情報を反映させたい」という場面では、クエリパラメータの追加が最も手軽な方法です。
LINEで新しいURLとしてシェアすることで、LINEのサーバーが新たにOGP情報を取得し直してくれます。

方法④ しばらく時間を置いて再確認する

急ぎでない場合は、時間を置いてみるのも一つの手です。
LINEのキャッシュには有効期限がある場合があり、一定期間が過ぎると自然に更新されることがあります。
この期間はLINE側の設定によるものとされており、数日から数週間程度で更新されるケースが多いようです。

「すぐに更新する必要はないが、いつかは正しく表示させたい」という状況であれば、正しいOGPタグを設定した上で時間を置いて確認するのが最もリスクの少ない方法です。
ただし、キャンペーンや告知など時間的に重要な場面では、URLを変える方法と組み合わせて対処しましょう。

OGPタグの正しい書き方と設定ミスを防ぐポイント

見出し画像4

OGP表示の問題を根本的に解決するには、そもそもの設定を正しく行うことが一番重要です。
ここでは正しいOGPタグの書き方と、よくある設定ミスをまとめました。

基本のOGPタグの書き方

OGPタグはHTMLの<head>内に以下のように記述します。

まず最低限必要な基本タグの例を示します。
og:titleにはページのタイトルを、og:typeにはコンテンツの種類(トップページならwebsite、記事ページならarticle)を、og:urlにはそのページの正規URLを、og:imageにはサムネイル画像の絶対URLを記述します。

書き方のポイントとしては、metaタグのproperty属性にog:から始まる値を指定し、content属性に実際の値を入れるという形式です。
name属性と混同しやすいので注意しましょう。

また、LINEでのプレビュー表示を意識するならog:imageの設定が特に重要です。
画像なしのプレビューはテキストのみになり、視覚的なインパクトが大きく下がります。

og:imageの設定で気をつけるべきこと

OGP画像の設定は特に細かい注意点が多いです。
代表的なポイントをまとめます。

  • 絶対URLで記述する:「https://」から始まる完全なURLを使う。
    相対パスは使わない
  • 推奨サイズを守る:横1200px×縦630px(アスペクト比1.91:1)が多くのSNSで推奨されている
  • HTTPSであること:HTTPの画像はセキュリティ上の理由から表示されない場合がある
  • 実際にアクセスできるURLであること:存在しないURLを指定しても何も表示されない
  • ファイル形式はJPGかPNGが無難:WebPはLINEでの対応が安定していないことがある

また、og:image:widthとog:image:heightというタグも合わせて設定しておくと、画像サイズの情報がクローラーに明示的に伝わり、より確実に表示される可能性が高まります。
これらは必須ではありませんが、つけておいて損はありません。

よくある設定ミスのチェックリスト

設定が終わったら、以下のポイントを一つずつ確認してみてください。

  • og:imageのURLを直接ブラウザで開いて、画像が表示されるか確認した
  • OGPタグが<head>タグの内側に記述されているか確認した
  • property属性のスペルミスがないか確認した(og:title、og:imageなど)
  • 画像URLがHTTPSになっているか確認した
  • 画像のファイルサイズが大きすぎないか確認した(目安は1MB以下)
  • OGP確認ツールで実際の取得結果を確認した

これらを一通りチェックするだけで、記述ミスによる問題の大半は解決できます。
「設定したつもりだけど表示されない」という場合、このリストの中にたいてい原因が潜んでいます。

WordPressとHTMLそれぞれでのOGP設定方法

見出し画像5

OGPの設定方法は、WordPressを使っているかHTMLを直接書いているかによって異なります。
それぞれのケースに合わせた設定手順を確認しておきましょう。

WordPressでのOGP設定

WordPressでOGPを設定する場合、多くの人はSEOプラグインを使います。
代表的なのは「Yoast SEO」や「All in One SEO」、あるいは「SEO SIMPLE PACK」などです。
これらのプラグインを導入すると、各記事の編集画面でOGPのタイトル・説明文・画像を簡単に設定できるようになります。

Yoast SEOを例に説明すると、記事編集画面の下部にYoast SEOの設定欄が表示され、「ソーシャル」タブを開くとFacebookやX用のOGP設定ができます。
ここで設定した内容が、LINEのプレビューにも反映されます。
特にOGP画像は「ソーシャル画像」として個別にアップロードできるため、アイキャッチ画像とは別にOGP専用の画像を設定することも可能です。

また、WordPressのテーマによっては、テーマ自体にOGP出力機能が内蔵されているものもあります。
その場合は重複してOGPタグが出力されないよう、テーマのOGP機能とプラグインのOGP機能が競合していないか確認することが大切です。
OGPタグが重複して出力された場合、どちらの情報が使われるか不定になり、表示が崩れる可能性があります。

設定後は、前述したOGP確認ツールやFacebookのシェアデバッガーでタグが正しく出力されているか必ず確認してください。
プラグインをインストールしただけで設定を完了したつもりになってしまい、実はタグが正しく出力されていなかったというケースも見受けられます。

HTMLを直接書く場合のOGP設定

WordPressを使わず、HTMLファイルを直接編集している場合は、<head>タグ内にOGPタグを手動で記述します。
基本的な記述例は次のような形になります。

一般的に必要とされるのはog:title・og:type・og:url・og:imageの4つとされています。
これにプラスしてog:descriptionとog:site_nameを追加しておけば、ほとんどのSNSで適切に表示されるようになります。

また、LINEを意識した設定をするなら、og:imageの画像を必ず設定することを強くおすすめします。
LINEのトーク画面でシェアされたとき、画像ありと画像なしではクリック率に差が出る傾向があります。
見栄えのいいOGP画像を一つ用意しておくことで、シェアされたときの反応が変わる可能性があります。

複数のページがある場合、各ページのOGPを個別に設定するのが理想ですが、最低でもトップページだけでもきちんと設定しておきましょう。
特にog:urlは各ページのURLをそれぞれ正確に設定することが大切で、全ページに同じURLを書いてしまうミスには注意が必要です。

LINEだけ表示されない場合の特有の対処法

「FacebookやXではちゃんと表示されているのに、LINEだけ表示されない」という場合は、LINEのクローラー特有の問題が考えられます。

LINEのクローラーは他のSNSとは異なるUser-Agentを使ってページにアクセスします。
サーバーの設定によっては、LINEのクローラーがブロックされていたり、別のコンテンツが返ったりすることがあります。

また、LINEはOGPタグが見つからない場合に、ページの<title>タグや最初の<h1>タグからタイトル情報を取得しようとする場合があるとされています。
そのため、OGPを設定していないのに何かしらの情報が表示される場合や、意図しないタイトルが表示される場合は、このLINE独自の挙動が関係している可能性があります。

この問題への対処としては、まず正しくOGPタグを設定することが基本です。
その上で、LINEのクローラーがページにアクセスできる状態になっているかどうかを確認し、問題が続く場合は前述の「URLを変える」方法で新しい情報を取得させることを検討することをおすすめします。

なお、LINEのOGP関連の仕様は変更されることがあります。
最新の技術仕様や対処方法については、LINE Developersの公式ドキュメントをご確認ください。

まとめ:LINEのOGP表示問題は原因を特定して順番に対処しよう

この記事のポイントをまとめます。

  • OGPとはURLをシェアしたときにタイトル・画像・説明を表示する仕組みで、<head>内のメタタグで設定する
  • LINEでOGPが表示されない原因は主に「タグの記述ミス」「画像の設定ミス」「LINEのキャッシュ」「クローラーのアクセス問題」の4つ
  • キャッシュ問題の最強の解決策は「URLを変える(クエリパラメータを追加するなど)」こと
  • WordPressではSEOプラグインを使うのが手軽で確実。
    タグの重複出力には注意が必要
  • HTMLを直接書く場合はog:imageを絶対URLで設定し、OGP確認ツールで必ず動作確認する
  • LINEだけ表示されない場合は、LINEのクローラー特有の挙動や仕様が影響している可能性がある

LINEでのOGP表示問題は、慣れないうちは「どこが悪いのかさっぱりわからない」という状態になりがちです。
でも、落ち着いて原因を一つひとつ確認していけば、たいていは解決できます。
まずはOGP確認ツールで現状を把握し、タグの記述に問題がないかを確認してみてください。
記述に問題がなくてもキャッシュが邪魔をしているなら、クエリパラメータを追加してURLを変えてみるのが手っ取り早い解決策です。
WordPressを使っているなら、SEOプラグインの設定を見直してみるだけで改善するケースも多いです。
SNSでのシェアがきれいに表示されると、読んでもらえる可能性もぐっと上がります。
ぜひこの記事を参考に、OGPの設定を整えてみてください。

タイトルとURLをコピーしました