Open Graphプレビュー

使い方

1. 1 公開されている任意のURLを貼り付けます。
2. 2 Test（またはEnter）を押すと、ページを取得してog:*およびtwitter:*のメタタグを解析します。
3. 3 Facebook、Twitter / X、LinkedIn、Slackでリンクがどう表示されるかをプレビューし、あわせて検証警告も確認できます。

このツールを使う理由

• 4つのプラットフォームのプレビューを並べて表示。実際のシェアカードに忠実になるよう細部まで再現しています。
• タグの欠落、タイトルの長すぎ、HTTPの画像URLなどを検証警告で発見できます。
• 各プラットフォームが実際に読み取るのと同じ、生のog:*・twitter:*タグを確認できます。
• 結果は10分間キャッシュされ、乱用を防ぐためレート制限も設けています。

よくある質問

Open Graphプレビュー とは？

Open Graphプレビュー（Open Graph Preview）は、あるURLがSNSプラットフォームでシェアされたときにどのように表示されるかを確認できるツールです。ページのOpen GraphタグとTwitter Cardメタタグを読み取り、Facebook、Twitter、LinkedIn、Slackなど各SNSでのシェアカードを再現して表示します。公開前にタイトル、説明文、画像をチェックするのに役立ちます。すべてブラウザ上で動作し、アカウント登録は不要です。

機能

例

https://github.com — page HTML with <meta property="og:title" content="GitHub · Build and ship software...">, og:image, og:type="object", and twitter:card="summary_large_image"

JSON: { resolved_url, status: 200, tags: { title, description, canonical, favicon, og: {title, image, url, type, ...}, twitter: {card, title, image, ...} }, warnings: [] } — rendered as four share-card previews (Facebook, Twitter/X, LinkedIn, Slack) plus a raw tag list; result cached 600s per URL

主な用途

1. 1

   公開前の品質チェック

   ブログ記事やランディングページを公開する前にシェアカードを確認し、og:image の欠落や og:title の文字数超過を検出します。

2. 2

   壊れたシェアカードのデバッグ

   プラットフォームが実際に読み取る、解決済みの og:* と twitter:* の値を正確に確認できます。og:image が絶対 HTTPS URL に解決されているかどうかも含まれます。

3. 3

   プラットフォーム間の比較

   同じURLのタイトル、説明文、画像が Facebook、Twitter/X、LinkedIn、Slack のアンファール（展開表示）でどのように異なるフォールバックになるかを比較します。

参考文献

• The Open Graph Protocol — Open Graph Protocol (ogp.me)
• Sharing for Webmasters (Open Graph tags on Facebook) — Meta for Developers
• Cards Markup Tags (twitter:card meta tags) — X (Twitter) Developer Platform
• <link>: The External Resource Link element (rel="canonical"/"icon") — MDN Web Docs

関連ツール