OGタグプレビュー - Open Graphメタタグチェッカー
Open GraphとTwitterカードの値を入力して、ソーシャルメディアでのプレビューをリアルタイムで確認できます。すぐに使えるメタタグコードを生成。
Open Graphメタタグとは？
Open Graph（OG）メタタグは、Facebook、Twitter、LinkedIn、Discordなどのソーシャルメディアプラットフォームでウェブページが共有された際に、どのように表示されるかを制御するHTMLメタ要素です。ソーシャルメディアのプレビューカードに表示されるタイトル、説明、画像、URLを定義します。適切に設定されたOGタグは、ソーシャルシェアからのクリック率を大幅に向上させることができます。
OGタグプレビューツールの使い方
- OG値を入力 — og:title、og:description、og:image URL、og:url、og:type、og:site_nameを入力します。
- Twitterカードタグを追加 — 必要に応じて、Twitter/Xカードのタイトル、説明、画像を上書きします。
- ライブプレビューを確認 — Facebook、Twitter、LinkedIn、Discordでページがどのように表示されるかを正確に確認します。
- 生成されたコードをコピー — 「コードをコピー」をクリックして、すぐに貼り付けられるHTMLメタタグを取得します。
OGタグプレビューツールを使う理由
- 4つのプラットフォームプレビュー — Facebook、Twitter/X、LinkedIn、Discordのプレビューを同時に確認できます。
- リアルタイム更新 — 入力するとすぐにプレビューが更新され、ページをリロードする必要はありません。
- コード生成 — 正しいフォーマットのメタタグHTMLコードを自動的に生成します。
- Twitterカードのサポート — Twitter固有の上書き用の個別のフィールド（twitter:title、twitter:imageなど）があります。
- サーバー不要 — すべてブラウザで実行されます。データはサーバーに送信されません。
- サイズガイドライン — 最適な画像サイズ（1200x630px）に関する推奨事項が組み込まれています。
FreeToolboxと他のOGプレビューツールの比較
| 機能 | FreeToolbox | OpenGraph.xyz | MetaTags.io |
|---|---|---|---|
| プラットフォーム | 4 (FB, TW, LI, DC) | 3 (FB, TW, LI) | 3 (Google, FB, TW) |
| リアルタイムプレビュー | はい | はい | はい |
| コード生成 | はい | はい | はい |
| Discordプレビュー | はい | いいえ | いいえ |
| アカウント不要 | はい | はい | 無料版は制限あり |
| 広告 | 最小限 | 普通 | 多い |
よくある質問
推奨されるog:imageのサイズは？
推奨サイズは1200 x 630ピクセル（1.91:1のアスペクト比）です。これはFacebook、Twitter、LinkedIn、Discordでうまく機能します。PNGまたはJPG形式を使用し、ファイルサイズを8MB未満にしてください。
このツールがURLからOGタグを取得できないのはなぜですか？
ブラウザのセキュリティ（CORSポリシー）により、JavaScriptが他のドメインからコンテンツを取得することができません。このツールでは代わりに手動入力を利用していますが、これは実際にタグを公開する前にプレビューするのに適しています。
OGタグとTwitterカードタグの両方が必要ですか？
Twitter/Xは、Twitter固有のタグがない場合、OGタグにフォールバックします。ただし、カードの種類を制御するには、twitter:cardを追加することをお勧めします。Twitterと他のプラットフォームで異なるコンテンツを表示したい場合にのみ、Twitter固有のタグを使用してください。
どのog:typeを使用すればよいですか？
ホームページや一般的なページには「website」、ブログ投稿やニュースには「article」、製品ページには「product」を使用します。デフォルトの「website」はほとんどの場合に機能します。
実際のライブOGタグをテストするにはどうすればよいですか？
ページにメタタグを追加した後、FacebookのSharing Debugger（developers.facebook.com/tools/debug）、Twitter Card Validator、LinkedIn Post Inspectorを使用して、タグが正しく機能していることを確認してください。