OGPプレビュー
URLを入力してOpen GraphおよびTwitter Cardメタタグを取得し、SNSでの表示をライブモックアップで確認できます。
このツールについて
OGPプレビューツールを使えば、任意のURLがFacebook、Twitter（X）、 LinkedIn、SlackなどのSNSで共有された際にどのように表示されるかを 正確に確認できます。リンクを公開してから見た目を確かめるのではなく、 Open GraphやTwitter Cardのメタタグを事前に検査・デバッグできます。
Open Graphは、2010年にFacebookが開発したプロトコルで、Webページが
リンクプレビューでのコンテンツ表現を制御できるようにするものです。
ページの<head>セクションにog:title、og:description、
og:imageなどの<meta>タグを追加することで、ソーシャルカードに
表示されるタイトル、説明文、プレビュー画像を決定できます。
これらのタグがない場合、プラットフォームはヒューリスティクスにフォールバック
するため、見栄えの悪い誤解を招くプレビューが表示されることがあります。
Twitterは独自のTwitter Cardシステムを導入しており、カードタイプ
（summaryおよびsummary_large_image）に加えて、
twitter:siteとtwitter:creatorによるクリエイターとサイトの
帰属表示が可能です。Twitter固有のタグがない場合、ほとんどのプラットフォームは
Open Graphのタグにフォールバックするため、両方のタグセットを設定することで
最も幅広い互換性が得られます。
このツールは指定されたURLのHTMLをサーバー経由で取得し、関連するすべての メタタグを解析します。検出された各タグの一覧表を表示し、Facebook、 Twitter、Google検索のピクセル精度のモックアップをレンダリングし、 画像の欠落、タイトルの長さ超過、説明文の短さなどの問題をフラグで通知します。 文字数カウンターにより、推奨範囲（タイトル50〜60文字、説明文150〜160文字） 内に収めることができます。
デプロイを検証する開発者、キャンペーンを作成するマーケター、ブログ記事の SNS共有を最適化するコンテンツクリエイターなど、このツールを使えば リンクがWeb上でどのように表示されるかを即座に確認できます。タグを ゼロから作成・更新する必要がある場合は、 <a href={getLocalePath(locale, "/tools/meta-tag-generator")} className="text-primary hover:underline"> メタタグジェネレーター との併用が最適です。
使い方
- プレビューしたいURLを入力フィールドに入力します。
https://プレフィックスがない場合は自動的に追加されます。 - FetchをクリックするかEnterを押して、ページのメタタグを取得します。
- ソーシャルメディアプレビューセクションで、Facebook、Twitter、Googleでのページの表示を確認します。
- 警告パネルで欠落または最適でないタグがないか確認し、HTML内でフラグが付いた問題を修正します。
- 抽出されたメタタグテーブルで、すべてのタグとその内容を確認します。
- Copy HTMLをクリック（またはCtrl+Shift+Cを押す）して、検出されたすべてのタグをHTMLマークアップとしてクリップボードにコピーします。
よくある質問
Open Graphタグとは何ですか？
Open Graphタグは、HTMLページの<head>内に配置される<meta>要素です。リンクが共有されたときにSNSプラットフォームが表示するタイトル、説明文、画像、URLを指定します。一般的なタグにはog:title、og:description、og:image、og:urlがあります。
Open GraphとTwitter Cardsの違いは何ですか？
Open GraphはFacebookが作成し、Facebook、LinkedIn、Slackなど多くのプラットフォームで使用されています。Twitter CardsはTwitter（X）独自のシステムで、summaryやsummary_large_imageなどのカードタイプをサポートしています。Twitter固有のタグがない場合、TwitterはOpen Graphタグにフォールバックするため、両方を定義するのが最善です。
プレビューで画像が表示されないのはなぜですか？
最も一般的な原因は、og:image URLが絶対URLではなく相対パスである、画像URLが404を返す、サーバーのrobots.txtまたはCORSポリシーで画像がブロックされている、画像サイズが小さすぎる（Facebookは1200x630ピクセル以上を推奨）などです。
推奨されるタイトルの長さは？
検索エンジンやSNSプラットフォームでは、50〜60文字のタイトルが理想的です。60文字を超えるタイトルはGoogle検索結果やSNSカードで切り捨てられる可能性があります。このツールには文字数カウンターが表示されるので、最適な範囲内に収めることができます。
推奨される説明文の長さは？
メタディスクリプションは150〜160文字が最も効果的です。短すぎると検索結果やSNSプレビューのスペースが無駄になり、長すぎると切り捨てられます。このツールは範囲外の説明文に警告を表示します。
データは安全ですか？
このツールでは、ブラウザがCORS制限により任意のURLを直接取得できないため、同じドメイン上でホストされている軽量なサーバーサイドプロキシを通じてURLを取得します。HTMLからメタタグを解析するだけで、データの保存、ログ記録、第三者への共有は一切行いません。
認証が必要なページをテストできますか？
いいえ。サーバーサイドプロキシは匿名ボットとしてページを取得するため、SNSクローラーと同じ動作になります。ログインが必要なページの場合、取得されるのはログインページになります。認証が必要なページをテストするには、まず一般公開のステージング版をデプロイしてください。