OGPプレビュー
OGP情報を入力して、各プラットフォームでの表示をリアルタイムでプレビューします。
プレビュー
Facebook
画像なし
example.com
ページタイトル
ページの説明文がここに表示されます。
Twitter (X)
画像なし
example.com
ページタイトル
ページの説明文がここに表示されます。
Slack
サイト名
ページタイトル
ページの説明文がここに表示されます。
なし
LINE
画像なし
ページタイトル
ページの説明文がここに表示されます。
OGPプレビューツールの使い方
Open Graph（OGP）情報を入力すると、Facebook、Twitter（X）、Slack、LINEの各プラットフォームでリンクを共有した際の表示をリアルタイムでプレビューできます。og:imageにはURLを入力してください。各プラットフォームごとに表示形式が異なるため、事前に確認することで最適なOGP設定を行えます。
OGP（Open Graph Protocol）とは？
OGPは、Facebookが提唱したプロトコルで、WebページがSNSやメッセンジャーで共有された際にリッチなプレビュー（タイトル、説明文、画像）を表示するための仕組みです。HTMLの<head>タグ内にmeta要素として記述します。OGPを正しく設定することで、SNS上でのクリック率が大幅に向上します。
推奨設定
- og:title: 40文字以内が推奨。長すぎると各プラットフォームで切り捨てられます。
- og:description: 90文字以内が推奨。簡潔にページの内容を説明してください。
- og:image: 1200 x 630px の画像が推奨。各プラットフォームで最適に表示されます。
よくある質問（FAQ）
Q. 画像がプレビューに表示されません
A. og:imageには外部からアクセス可能なURLを指定してください。ローカルファイルパスや認証が必要なURLは使用できません。また、CORSの制限により一部の画像は表示されない場合があります。
Q. 実際のSNSでの表示と異なる場合がありますか？
A. このツールはCSSで各プラットフォームの表示を再現していますが、実際の表示とは若干異なる場合があります。最終確認には各プラットフォームの公式デバッガー（Facebook Sharing Debuggerなど）をご利用ください。