FacebookはOGPでリンクを展開する
Facebookに貼られたURLは、リンク先のOGPタグを読み取ってカード状に展開されます。og:title、og:description、og:imageが投稿の見出し・説明・サムネイルになります。
FacebookはこれらのOGP情報を強くキャッシュする傾向があり、一度取得した内容をしばらく保持します。そのため、メタ情報を後から直しても投稿に反映されないことがあります。
この特性を理解しておくと、後述するシェアデバッガーでの更新作業がなぜ必要なのかが分かりやすくなります。
まず整えるOGPの要点
Facebookで安定してカードを表示させるために、ページ側で押さえておきたい項目を挙げます。
これらを最初に整えておけば、後からの修正回数を減らせます。とくにog:imageとog:urlは、サムネイル表示と正規URLの判定に直結するため、抜けがないか丁寧に確認しましょう。
- og:title: 投稿に表示されるタイトル
- og:description: リンクの説明文
- og:image: サムネイル画像。横長で十分な解像度のものを用意する
- og:url: 正規のURL。同じページに複数URLがあるときの基準になる
最短手順:まずこの3ステップで完了
公開URLをFacebookでシェアは、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。
手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
- 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
- 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る
シェアデバッガーでキャッシュを更新する手順
OGPを直したのに反映されないときは、Facebookのシェアデバッガーで再取得をかけます。次の順で進めます。
再取得を実行すると、Facebookがその場でページを読み直し、最新のメタ情報でプレビューが更新されます。投稿前にこの手順を挟むだけで、古い情報のまま公開してしまう事故を防げます。
- ページのHTMLにOGPタグを設定し、公開URLでアクセスできる状態にする
- Facebookのシェアデバッガーを開き、対象の公開URLを入力する
- 表示されたプレビューと、Facebookが読み取った値を確認する
- 情報が古い場合は再取得(再スクレイプ)を実行する
- 更新後のプレビューで画像とタイトルが正しいか最終確認してから投稿する
画像が表示されないときのチェック
サムネイルが出ない原因の多くは、og:imageのURLが外部から見えない、あるいは画像が小さすぎることです。画像は公開ページから到達できるパスに置き、HTTPSで配信されるようにします。
また、デバッガーのログにはどのタグをどう解釈したかが表示されます。og:imageの行に問題が出ていないか、画像サイズの警告が出ていないかを確認すると原因を絞り込めます。
ギガサイト便でFacebookシェアをテストするときのコツ
ギガサイト便はHTMLやZIPをドロップするだけで 〇〇.giga-site.com の共有URLを発行します。HTTPSが自動で付き、画像もCDNから配信されるため、og:imageの到達性を確かめる用途に使いやすいURLになります。
シェアデバッガーで表示を確認しながら、文言や画像を調整したくなったら、同じURLのままファイルを差し替えられます。リンクを送り直さずに、デバッガーで再取得するたびに最新の中身を検証できます。
公開URLにはnoindexが付くため検索には出ませんが、これは閲覧制御ではありません。社内向けの確認ページなど見せたくない相手がいる場合は、パスワードやメール認証を併用してください。
よくある質問
Facebookでサムネイル画像が表示されません。
og:imageのURLが公開ページから到達でき、HTTPSで配信されているか確認してください。画像が小さすぎる場合も表示されないことがあります。シェアデバッガーのログで警告が出ていないかも合わせて確認しましょう。
メタ情報を直したのに投稿が古いままです。
Facebookは取得したOGP情報をキャッシュします。シェアデバッガーで対象URLを再取得(再スクレイプ)すると、新しいタイトルや画像に更新されます。
Facebook専用のメタタグは必要ですか。
Facebookは標準のog:系タグを読み取ります。本記事の範囲では、og:title・og:description・og:image・og:urlを正しく整えることを優先すれば十分です。
確認用のページをFacebookで試して問題ありませんか。
ギガサイト便の公開URLにはnoindexが付くため検索には出ません。ただしURLを知る人には見えるため、限定したい場合は認証を併用してください。差し替えも同じURLで行えます。
最短で進める場合でも省略しないほうがよい確認は何ですか?
不要ファイルや秘密情報の除去、スマホ表示確認、共有相手と期限の明記は省略しないほうが安全です。URLを作る速さより、誤共有を防ぐことを優先します。