Open Graphプレビューとは？

Open Graphプレビューは、URLをFacebook、Twitter、LinkedInなどでシェアした際の表示を正確にプレビューできます。OGメタタグの値を入力すると、公開前にソーシャルシェアカードの見え方をリアルタイムで確認できます。

プレビューは og:title、og:description、og:image、og:site_name、og:url を読み込み、各SNSの実際のレイアウトを再現します。Facebook はタイトルを約88文字で切り、Twitter の大きな画像カードは2:1比が必要、LinkedIn は約200文字で説明文を省略します。

使い方

1. Open Graphタグ（タイトル、説明、画像URL、サイト名、URL）を入力してください。
2. Google 検索、Facebook、Twitter、LinkedIn、WhatsApp、Slack、Discord、Pinterest の8種類のカード形式のプレビューをリアルタイムで並べて確認できます。
3. タイトルの長さ、説明文、画像サイズを調整し、すべてのプラットフォームでプレビューが最適に表示されるようにしてください。

使用するタイミング

• ブログ記事やマーケティングページを公開する前に、SNSでの見え方を確認したいとき。
• 既存サイトのシェア時に画像が空白だったり、見出しが崩れている原因を探るとき。
• 新しいOG画像テンプレートを作って、タイトルがビジュアルに被らないか確認するとき。

結果

新しいブログ記事をLinkedInでシェアする前に、OG画像が不自然にトリミングされていないか、説明文がTwitterの200文字制限内で読みやすいかを確認できます。

よくある質問

Open Graph 画像のサイズはどれくらいが安全ですか?

1200×630 ピクセルが定番です。Facebook と LinkedIn は 1.91:1 で表示し、Twitter の summary_large_image も同じ比率です。ファイルサイズは 5 MB 未満に抑え、JPEG か PNG を使ってください。

メタタグを変えても Facebook がプレビューを更新しないのはなぜ?

Facebook は OG データを24時間ほどキャッシュします。URL を Meta の Sharing Debugger に貼り、「Scrape Again」を押すと再取得が走ります。LinkedIn では Post Inspector で同じことができます。

og:* タグがあれば twitter:* タグは要らない?

Twitter は twitter:* タグが無い場合に og:title、og:description、og:image を読みに行くので、基本ページは og タグだけで動きます。Twitter 専用のタイトルや画像を出したいときだけ twitter:card と twitter:image を追加します。

Twitter の summary と summary_large_image はどう違う?

summary はテキストの横に小さな正方形サムネイルが付き、ニュースや記事リンクに向きます。summary_large_image はテキストの上に横長の画像を大きく表示し、ランディングページや動画など視覚優先のコンテンツ向きです。

アニメーション GIF を og:image にしてもいい?

各SNSは GIF を受け取りますが、表示されるのは最初の1フレームだけです。重要な情報がその1枚に収まる静止画 PNG/JPEG にするか、動きを短い MP4 にして og:video で参照してください。

関連ツール