OGPプレビュー
OGPタグの設定内容をSNS別にプレビュー
OGPチェックリスト
og:title が設定されている
og:description が設定されている
og:image が設定されている
og:url が設定されている
タイトルが35文字以内
ディスクリプションが120文字以内
プレビュー
X (Twitter) — Summary Card with Large Image
OG Image
タイトル
説明文
example.com
OG Image
EXAMPLE.COM
タイトル
説明文
LINE
OG Image
タイトル
説明文
Google検索結果
https://example.com
タイトル
説明文が表示されます。Google検索結果ではmeta descriptionの内容が使われます...
HTMLメタタグ
OGP（Open Graph Protocol）とは？
OGPは、FacebookがWebページの情報を構造化するために策定したプロトコルです。HTMLの<head>内にmetaタグを記述することで、SNSでページがシェアされた際にタイトル・説明文・画像を指定できます。
必須のOGPタグ
- og:title — ページのタイトル。30〜35文字が推奨
- og:description — ページの説明。70〜120文字が推奨
- og:image — シェア画像のURL。1200×630px推奨
- og:url — ページの正規URL
- og:type — ページの種類（website、article等）
X（Twitter）カードの設定
X（旧Twitter）では、OGPに加えてtwitter:cardメタタグを設定することで、カードの表示形式を指定できます。summary_large_imageを指定すると大きな画像付きカードが表示され、クリック率の向上が期待できます。
OGPデバッグツール
- Facebook シェアデバッガー — OGPのキャッシュクリアと検証
- X カードバリデーター — Twitterカードの表示確認
- LINE URL Checker — LINEでの表示確認