OGP
よみ: オージーピー
SNSやチャットツールで Web ページの URL がシェアされた際、ページのタイトル・説明文・サムネイル画像を「カード形式」で魅力的に表示させるための設定(meta タグ)です。Open Graph Protocol の略。
- 検索結果の見た目を決めるのが「meta description」。
- SNS 上の見た目を決めるのが「OGP」。
OGP は SNS 流入の「第一印象」を決めるため、公開前チェックの必須項目です。設定がないと味気ないテキストリンクだけになり、クリック率が大きく低下してしまいます。
主な設定項目（HTML の head 内に記述）
- og:title：ページのタイトル。
- og:description：ページの説明文。
- og:image：サムネイル画像(推奨サイズは 1200×630px)。
- og:url：ページの URL。
実務での確認ポイント
- プレビュー確認：各 SNS が提供する公式ツール(シェアデバッガーや Card Validator など)を使い、意図した通りにカードが表示されるかテストする。
- キャッシュの更新：画像を差し替えた直後は、SNS 側に古い画像(キャッシュ)が残って表示されることがあるため、ツールを使って情報を最新に更新する。
- 独自タグの確認：X(旧 Twitter)の
twitter:cardなど、特定の SNS 専用の追加タグが設定されているか確認する。
よくある落とし穴（NG 例）
- OGP 自体が未設定で、シェア時に画像が出ない(クリック率の大幅な損失)。
- og:image の画像サイズが不適切で、変に見切れたり余白ができたりしている。
- トップページの OGP 設定を全ページで使い回しており、記事ごとの内容が伝わらない。
- 画像やタイトルを修正したのに、SNS 側のキャッシュを更新し忘れて古いままになっている。
言葉をよく利用する人
- Web 担当者(発注側)
- SEO 担当者
- マーケター
- コーダー / フロントエンドエンジニア
- デザイナー
会話上での使用例
公開前に、記事をSNSでシェアしたときの見た目を確認したい場面
-
Web担当者
公開前に、この記事をXでシェアしたときの見た目を確認しておきたいです。
-
コーダー
OGPは設定済みなので、シェアデバッガでプレビューしてみましょう。画像は1200×630pxで用意していますが、タイトルの文字切れがないかもあわせてチェックします。
-
Web担当者
お願いします。第一印象が大事なので、しっかり見ておきたいです。
シェア画像を差し替えたのに古い画像が出てしまう場面
-
Web担当者
OGPの画像を差し替えたのに、シェアするとまだ古い画像が出てしまいます。
-
コーダー
それはSNS側にキャッシュが残っているためです。シェアデバッガでキャッシュ更新を実行すれば、新しい画像に切り替わりますよ。
-
Web担当者
なるほど、こちら側ではなくSNS側だったんですね。更新してみます。