Web-Tool.net

OGP correction / handoff guide

OGPが思った表示にならない時：タグ・画像URL・キャッシュを分けて確認

HTMLに書かれた値とSNSが実際に表示する内容は同じとは限りません。タグの有無、画像URL、取得結果の更新を別々に確認します。

既存のOGP検査を開く確認票を保存

まず3つの状態を分ける

このガイドでPASSにできるのは、保存したHTMLからタグ値と修正案を確認できた範囲だけです。

状態意味次の行動
確認済みHTMLの値と修正tagをローカルで検算できた依頼票へ元値と修正案を書く
不足必要なOGP tagがHTMLにない最小限のtagを担当へ渡す
未確認画像到達性・SNSキャッシュ・実表示は検査していない確認範囲をそのまま残す

検索用titleとOGPを混同しない

<title>とmeta descriptionは検索用の元値、og:titleとog:descriptionは共有用の元値です。SNSのfallbackを一律仕様とは扱いません。

title: 店舗案内
og:title: 秋のキャンペーン
og:image: missing
用途と不足箇所を別欄に記録。
<meta property="og:image"
content="https://example.invalid/…">
reachability: UNKNOWN
値があっても到達成功とは限りません。

不足tagを最小限直す

og:imageが欠けている例には、属性値をescapeした1つのmeta tagだけを提案します。重複tagを勝手に追加せず、修正後も再parseします。

<meta property="og:image" content="https://example.invalid/assets/offer.png">

このtagの文字列と属性は確認できますが、画像をfetchしていないため、到達性とSNS表示は未確認です。

相対URL・認証・キャッシュを分ける

  1. /assets/offer.pngをbase URL https://example.invalid/offerで解決する。
  2. URL文字列があることと、画像を取得できることを別の状態にする。
  3. ログイン必須や公開範囲の設定を無許可で迂回しない。
  4. SNSキャッシュの更新や実際の表示は、このfixtureからは判断しない。

修正担当への依頼票

対象ページ、元tag、修正案、確認できた範囲、まだSNSで確認していない点を一緒に渡します。プレビューに似た画面だけで公開成功とは判断しません。

合成fixtureは静的ファイルです。第三者ページ・画像・scriptを取得または実行しません。