Open Graphプレビュー

無料オンラインOpen Graphプレビュー・検証ツール

Facebook、Twitter（X）、LinkedIn、Discord、SlackなどのSNSでURLが共有されたときの表示を確認できます。この無料Open GraphプレビューツールはページのOGメタタグを取得し、各プラットフォームに近いプレビュー、充実度スコア、不足タグの詳細分析を表示します。

Open Graphプロトコルとは？

Open Graphプロトコルは、2010年にFacebookによって作成され、任意のWebページをソーシャルグラフ上のリッチオブジェクトとして扱えるようにします。SNSはproperty="og:..."属性を持つメタタグを読み取り、プレビューカードに表示するタイトル、説明、画像、その他のメタデータを決定します。

重要なOpen Graphタグ

<!-- Required OG Tags -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

<!-- Recommended OG Tags -->
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

Twitter Cardタグ

Twitter/Xはリンクプレビュー用に独自のメタタグを使用します。Twitter専用タグがない場合はOpen Graphタグにフォールバックします。主なカードタイプはsummaryとsummary_large_imageです。

各プラットフォームでのOGタグの使われ方

OG画像のベストプラクティス

このツールの使い方

1. URLを入力: プレビューしたいページの完全なURLを入力欄に貼り付けます。
2. プレビューをクリック: ツールがページを取得し、Open Graph、Twitter Card、メタタグを抽出します。
3. プレビューを確認: Facebook、Twitter/X、LinkedIn、Discordのタブを切り替えてリンクの表示を確認します。
4. スコアを確認: OGスコアと不足しているタグの詳細を確認します。
5. すべてのタグを見る: すべてのタグタブで検出されたメタタグを確認します。
6. 修正して再テスト: ページのメタタグを更新して再デプロイし、もう一度テストします。

よくあるOGタグの問題

こんな人に最適