Open Graph 生成ツール — OG・Twitter Card タグとプレビュー
開発者ツールOpen Graph 生成ツールは、タイトル・説明・URL・画像から、SNS がリンクのシェアカードを表示するために読み取る og:* と twitter:* のメタタグを作成します。
AI支援翻訳をレビュー中
このページはAIの支援で翻訳され、まだ専門家によるレビューを完了していません。重要な判断の前に、引用元をご確認ください。
概要
Open Graph は、Facebook・Slack・KakaoTalk などのサービスがリンクのプレビューカード（タイトル・説明・画像）を描画する際に読み取るメタタグの規約で、Twitter Card はその X 向け拡張です。このツールは og:title、og:description、og:url、og:image、og:site_name、twitter:card の各タグを生成し、入力内容からシェアカードのプレビューを表示します。実際の表示は各プラットフォームのキャッシュやポリシーによって変わることがあります。
output = <meta property="og:*"> のセット + <meta name="twitter:*"> のセット
使い方
- 1カードのタイトル、説明、ページ URL、画像 URL を入力します。
- 2og:type と Twitter Card の形式を選びます。
- 3生成してタグを <head> にコピーし、Open Graph チェッカーで確認します。
参照表
| タグ | 必須 | 備考 |
|---|---|---|
| og:title | 必須 | シェアカードのタイトル |
| og:type | 必須 | コンテンツの種類（website、article など） |
| og:image | 必須 | カード画像 — 1200×630px（1.91:1）を推奨 |
| og:url | 必須 | ページの canonical URL |
| twitter:card | 推奨 | X のカード形式（summary、summary_large_image） |
出典・基準
- The Open Graph protocol - Open Graph protocol
- About X Cards - X Developer Platform
よくある質問
入力内容や画像 URL はサーバーに送信されますか？
いいえ。タグの生成とカードのプレビューはブラウザ内で実行されます。プレビュー画像は入力した URL からブラウザが直接読み込むだけで、このサービスを経由することはありません。
og:image の推奨サイズはどれくらいですか？
1200×630 ピクセル（比率 1.91:1）が最も広く使われている推奨サイズです。ほとんどのプラットフォームで大きなカードを表示するには、画像は少なくとも 600×315 ピクセル必要です。
OG タグがあれば Twitter Card タグは不要ですか？
X は twitter:* タグが無い場合に Open Graph タグにフォールバックしますが、カード形式を確実に制御するには twitter:card を明示的に指定するのが安全です。