Open Graph・Twitter Card生成ツールとは
Open GraphタグとTwitter Cardタグはソーシャルプラットフォーム、メッセージングアプリ、リンクプレビューツールでページが共有されたときにどのように表示されるかを制御します。プレビューのタイトル、説明、画像、ページURL、カード形式を定義します。デフォルトのプレビューが間違ったテキストや画像を引き出す場合に役立ちます。
クイックアンサー
Open GraphとTwitter Cardのメタタグを生成してソーシャルプラットフォーム、メッセージングアプリ、リンクプレビューツールで共有されたときのページの表示を制御します。画像には絶対URLを使用し公開後にテストします。
Last updated: 2026-06-11
制限事項
- 生成されたタグは各ページのHTMLのheadセクションに配置する必要があります。ソーシャルプラットフォームとメッセージングアプリはページがビルドされたときではなく取得されたときにこれらのタグを読み取ります。
- ソーシャルプラットフォームはプレビューを積極的にキャッシュします。ogタグやtwitterタグを更新した後は各プラットフォームのデバッガーやシェアテスターを使用してキャッシュの更新を強制してください。
- 一部のプラットフォームは特定のタグを無視します。Xはtwitter:cardを読み取りますがFacebookやLinkedInはog:タグを使用します。すべてのプラットフォームがすべてのディレクティブをサポートするわけではありません。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- ページタイトル、説明、正規URL、サイト名、プレビュー画像URLを入力します。
- Open Graphタイプを選択します。通常のページにはwebsite、ブログ投稿にはarticleを使用します。
- 生成されたメタタグをページのheadセクションにコピーします。
- 絶対画像URLを使用し公開後にページをテストします。
主な用途
- ブログ投稿を公開する前にソーシャル共有タグを準備します。
- 静的HTMLページ用の再利用可能なメタタグブロックを作成します。
- コピーペースト前にタイトル、説明、画像の長さをプレビューします。