Facebookデバッガーとは？SE視点でわかるOGP・キャッシュと更新されない理由

「Facebookデバッガー」という言葉を見たとき、私は少し手が止まりました。

Facebookに、デバッガー？

SEの私が「デバッガー」と聞いて思い浮かべるのは、ブレークポイントやステップ実行です。
しかしFacebookデバッガーは、それとは少し違いました。

仕組みを整理すると、出てくるのはHTML、OGP、外部からのアクセス、そしてキャッシュ。Webエンジニアにはなじみのある技術です。

この記事では、Facebookデバッガーとは何か、OGP画像が更新されないのはなぜかを、SE視点で一つずつ整理します。

Facebookデバッガーとは？SE視点で仕組みを整理

まずは「Facebookデバッガーとは何なのか」から整理します。

名前だけを見るとプログラムをデバッグするツールのようですが、役割をWebシステムとして捉えると理解しやすくなります。

Facebookデバッガーはプログラムをデバッグするツールではない

一般に「Facebookデバッガー」と呼ばれているものとして、MetaにはSharing Debuggerという開発者向けツールがあります。

ただし、JavaやPHPで使うデバッガーとは役割が異なります。

ブレークポイントを設定したり、Facebook内部のプログラムをステップ実行したりするツールではありません。

私なりにSEの言葉へ置き換えるなら、

「Facebook側から、自分のWebページがどう認識されているのかを確認するための調査ツール」

と考えると分かりやすくなります。

たとえば、次のような場面です。

• アイキャッチ画像を変更したのに古い画像が表示される
• タイトルを変更したのに以前の情報が表示される
• 意図したOGP画像にならない
• Webサイトでは正常なのにFacebook側では表示が違う

こうしたときに、Facebook側がWebページをどう認識しているのかを確認するために使います。

FacebookとWebサイトはどうつながっている？

私が最初に疑問に思ったのは、Facebookと普通のWebサイトがどうつながっているのか、ということでした。

Facebook APIを使って、Webサイトから情報を送っているのだろうか。

SEをしていると「外部サービスとの連携」と聞くだけで、REST APIやJSON、アクセストークンなどを想像してしまいます。

しかし今回のOGPについては、もっとシンプルに考えられます。

自分のWebサイト
       ↓
HTMLを公開
       ↓
OGPを記述
       ↓
Facebook側がURLへアクセス
       ↓
Webページの情報を取得
       ↓
シェア情報として利用

WebサイトからFacebookへ送るというより、Facebook側がWebページを見に来る。

まずは、このイメージを持っておくと後の話が理解しやすくなります。

Facebook APIとFacebookデバッガーは別の役割

Facebookには、開発者向けの仕組みとしてGraph APIなどもあります。

しかし、WebページのOGPを確認するSharing Debuggerとは役割が異なります。

【Sharing Debugger】

Webページ
   ↓
HTML・OGP
   ↓
Facebook側が取得
   ↓
認識状態を確認


【Graph API】

アプリケーション
   ↓
APIリクエスト
   ↓
Graph API
   ↓
許可されたデータや機能を扱う

「OGP画像が更新されないので確認したい」という目的なら、最初からGraph APIについて理解する必要はありません。

FacebookだからAPI、デバッガーだからプログラム。

名前からそう想像していた私にとって、ここを分けて考えたことが最初の整理になりました。

Facebookデバッガーを理解するためのOGPとキャッシュ

Facebookデバッガーの役割が分かったところで、次はタイトルにもある「OGP」と「キャッシュ」を整理します。

OGP画像が更新されない現象を理解するには、この二つを分けて考えることが大切です。

OGPとはWebページに記述するメタデータ

OGPはOpen Graph Protocolの略です。

Open Graph Protocolの公式仕様では、基本的なメタデータとしてog:title、og:type、og:image、og:urlなどが定義されています。

<meta property="og:title" content="記事のタイトル">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/article/">
<meta property="og:image" content="https://example.com/image.jpg">

それぞれを簡単に整理すると、次のようになります。

• og:title：ページを表すタイトル
• og:type：ページやオブジェクトの種類
• og:image：ページを表す画像
• og:url：ページを表すURL

OGPという名前だけを見ると少し特殊に感じますが、Webサイト側から見ればHTMLに記述されたメタデータです。

私はここまで分解して、ようやく「いつものWeb開発の延長にある話なんだな」と理解できました。

OGP画像を変更したのに更新されないのはなぜ？

たとえば、WordPressの記事でアイキャッチ画像を変更したとします。

ブラウザでは新しい画像になっている。

ところがFacebook側では古い画像が表示される。

「変更したはずなのに、なぜ古いものが出るんだろう？」

Webシステムを扱っていると、この現象には少し既視感があります。

そこで候補の一つとして浮かぶのがキャッシュです。

ただし、「Facebookのキャッシュが原因だ」と最初から決めつけるのは避けたいところです。

原因としては、たとえば次のようなものが考えられます。

• HTMLのog:imageがまだ古い
• og:imageのURLが間違っている
• 画像へ外部からアクセスできない
• WordPressやWebサーバー側に古い情報が残っている
• CDNなどに古い情報が残っている
• Facebook側が以前取得した情報を認識している

一つの現象でも、原因候補は一つとは限りません。

Webサイト側とFacebook側を分けて考える

ここで、SEとして一度システムを分けてみます。

【Webサイト側】

WordPress
   ↓
HTML
   ↓
OGP
   ↓
画像


【Facebook側】

Webページへアクセス
   ↓
情報を取得
   ↓
取得した情報を認識
   ↓
シェア表示

障害調査をしていると、「正常です」という言葉だけでは原因を切り分けられないことがあります。

画面が正常なのか。HTMLが正常なのか。APIレスポンスが正常なのか。

今回も同じです。

「Webサイトは正常」ではなく、「公開HTMLのog:imageまでは正常」というところまで確認する。

そこが正しければ、次のレイヤーへ進む。

派手ではありませんが、こうして一つずつ範囲を狭めていくほうが、結果的に原因へ近づきやすいと私は感じています。

Facebookデバッガーの使い方とOGPが更新されないときの確認方法

ここからは実際の確認方法です。

ポイントは、Sharing Debuggerだけを操作するのではなく、Webサイト側からFacebook側へ順番に確認することです。

1．まず公開HTMLのOGPを確認する

最初に確認するのはFacebookではなく、自分のWebサイトです。

WordPressの管理画面でアイキャッチ画像を変更していても、公開されているHTMLのog:imageが期待どおりとは限りません。

<meta property="og:image"
      content="https://example.com/new-image.jpg">

実際に公開されたHTMLを確認し、og:imageが新しい画像URLになっているかを見ます。

ここが古いのであれば、Facebook側を調べる前にWebサイト側を確認します。

2．og:imageの画像URLを確認する

次に、og:imageへ設定されているURLそのものを確認します。

URLが正しいか、画像が存在するか、外部から取得できる状態か。

「Facebookで画像が出ない」という結果だけを見るのではなく、Facebookが取得しようとしている画像までたどるのがポイントです。

3．WordPress・Webサーバー・CDNのキャッシュを確認する

Webサイトの構成によっては、Facebookへ情報が届くまでに複数のレイヤーがあります。

WordPress
   ↓
Webサーバー
   ↓
CDN
   ↓
インターネット
   ↓
Facebook

管理画面では変更済みでも、外部から取得したHTMLには古いOGPが残っている可能性があります。

WordPressのキャッシュプラグインやWebサーバー、CDNなどを利用している場合は、それぞれの状態も確認します。

4．Facebook Sharing Debuggerで認識状態を確認する

Webサイト側が正しいことを確認したら、Facebook側へ進みます。

Meta for Developersで提供されているSharing Debuggerを開き、確認したいWebページのURLを入力します。

ここで意識したいのは、単に「エラーがあるか」を探すのではなく、

「Facebook側は現在、このURLをどう認識しているのか」

を確認することです。

OGP画像の問題なら、Webサイト側で設定したog:imageと、Facebook側が認識している情報を比較します。

Webサイト側
og:image = new-image.jpg

        ↓ 比較

Facebook側
認識している画像 = ?

SEの言葉に置き換えるなら、Sharing Debuggerは外部システム側の状態を確認するための調査画面と考えると、私はしっくりきます。

5．修正後は必要に応じて再取得する

Webサイト側を修正したあと、Facebook側が以前取得した情報を認識している場合は、Sharing Debuggerから再取得を試します。

画面上では「Scrape Again（もう一度スクレイピング）」などの操作として確認できます。

変更前

Webサイト：old-image.jpg
Facebook ：old-image.jpg


Webサイトを変更

Webサイト：new-image.jpg
Facebook ：old-image.jpg


再取得

Webサイト：new-image.jpg
Facebook ：新しく取得した情報

「再取得すれば直る」とだけ覚えるより、Webサイト側を修正し、その状態をFacebook側にもう一度取得してもらうと理解したほうが、次にトラブルが起きたときにも応用できます。

SE視点で考えるFacebookデバッガーとトラブルの切り分け

Facebookデバッガーを調べていて私が感じたのは、名前ほど特殊な仕組みではないということでした。

そして、ここにはFacebook以外のトラブルにも使えるSEの基本的な考え方があります。

「デバッガー」という名前に引っ張られなくていい

最初の私は、「デバッガー」という名前に引っ張られていました。

ブレークポイント、ステップ実行、変数、スタックトレース。

だからFacebookとうまく結びつかなかったのです。

しかし、Sharing Debuggerを、

「Facebookという外部システムから、自分のWebページがどう見えているのかを確認するツール」

と考えると、一気に身近になります。

自分のWebサイト
       ↓
Facebookが情報を取得
       ↓
Facebook側の認識を確認

システムAの状態を変更した。

でもシステムBでは以前の状態が見えている。

ではAの出力を確認し、Bが何を取得しているのか確認する。

普段の外部システム連携で行っている切り分けと、それほど遠い話ではありません。

20年以上SEをしていても、知らない技術はある

私は20年以上、Webアプリケーション開発に携わってきました。

それでも、知らない技術はいくらでもあります。

若いころは、知らない言葉が出てくると少し焦っていました。

周りは知っているのではないか。経験年数が増えれば、何でも知っていなければいけないのではないか。

でも今は、少し違うように考えています。

知らないことより、知らないものに出会ったときにどう整理するか。

今回もFacebookデバッガーという言葉を丸暗記するのではなく、HTML、OGP、外部システム、キャッシュという、自分が知っているところまで戻って考えました。

分からないものを小さく分けて、一つずつ確認する。

地味ですが、長くエンジニアを続けるうえで、私はこういう積み重ねを大切にしています。

Facebookデバッガーに関するFAQ

最後に、FacebookデバッガーやOGPについて迷いやすいポイントをFAQ形式で整理します。

細かな仕様は変わる可能性があるため、実際に利用するときはMetaなどの公式情報も確認してください。

Q．Facebookデバッガーとは何ですか？

一般にFacebookデバッガーと呼ばれているものとして、MetaのSharing Debuggerがあります。

WebページのURLを指定し、Facebook側がそのページをどのように認識しているのかを調査するときに利用します。

Q．Facebookデバッガーはどこにありますか？

Meta for Developersで提供されているSharing Debuggerから確認できます。

利用条件や画面構成は変更される可能性があるため、利用時は公式の最新画面を確認してください。

Q．OGPとは何ですか？

OGPはOpen Graph Protocolの略です。

Webページについてのタイトル、種類、画像、URLなどのメタデータをHTML内に記述するための仕組みです。

Q．OGP画像を変更したのにFacebookで更新されないのはなぜですか？

原因は一つとは限りません。

公開HTMLのog:imageが古い、画像URLに問題がある、WordPressやCDNなどに古い情報が残っている、Facebook側が以前取得した情報を認識している、といった可能性があります。

Q．「もう一度スクレイピング」を実行すれば必ず更新されますか？

必ず更新されるとは限りません。

Webサイト側のOGPそのものが間違っていれば、再取得しても期待した結果にはなりません。

まず公開HTMLや画像URLを確認してからFacebook側を調べるのが基本です。

Q．FacebookデバッガーとFacebook APIは同じものですか？

役割が異なります。

Sharing DebuggerはWebページがFacebook側からどう認識されているかを確認する用途で、Graph APIはアプリケーションから許可されたデータや機能を扱うためのAPIです。

まとめ｜FacebookデバッガーはOGPとキャッシュを分けて考える

「Facebookに、デバッガー？」

最初は少し不思議に感じましたが、仕組みを分解すると、HTML、OGP、外部からのアクセス、キャッシュというWeb開発になじみのある話につながっていました。

OGP画像が更新されないときも、一気に原因を当てる必要はありません。

公開HTMLは正しいか
       ↓
OGPは正しいか
       ↓
画像URLは取得できるか
       ↓
キャッシュはどうか
       ↓
Facebook側ではどう認識されているか

一つずつ確認し、問題のない場所を候補から外していく。

Facebookデバッガーの使い方以上に、私はこの切り分け方を覚えておくことが大切だと感じています。

20年以上SEをしていても、知らない技術はいくらでもあります。

でも、すべてを最初から知っている必要はありません。

分からなければ、自分が分かるところまで戻ってみる。

そこから、あせらず一つずつつなげていく。

Facebookデバッガーも、OGPとキャッシュの仕組みまで分けて考えてみると、最初に感じたほど遠い技術ではありませんでした。

情報ソース・引用元

本記事では、Facebook Sharing DebuggerやOGPについて、公式情報を中心に確認・整理しています。

• The Open Graph protocol
• Meta for Developers：Sharing Debugger

本記事は公開されている公式情報をもとに、Webアプリケーションエンジニアの視点から仕組みを整理したものです。
Metaのサービスや開発者向けツールの仕様・画面は変更される可能性があります。
また、WordPressやWebサーバー、CDNなどの構成によってOGPが更新されない原因は異なるため、実際の環境では公開HTMLやキャッシュ、Facebook側の認識状態を順番に確認してください。