Open Graph プレビュー
タイトルや説明文、画像URLなどのテキストを入力して、SNS共有用のOpen Graphメタタグマークアップを生成・確認できるオンラインツールです。
ツールを実行
Open Graph プレビューは、Webページのタイトルや説明文、画像URLなどの情報を入力することで、SNS共有時に必要なOGPメタタグのマークアップを生成・確認できるオンラインツールです。タイトルを入力すると、タイトルタグや説明タグに加え、タイプ（初期値: website）やロケール（初期値: en_US）が出力に含まれます。画像URL、ページURL、サイト名を追加で入力した場合は、それぞれのメタタグも条件に応じて組み込まれます。入力された各テキスト値はHTMLエスケープ処理が行われるため、安全にマークアップ形式で取得できます。Webサイトのheadタグ内に配置するソーシャル共有用タグの準備や設定内容の事前確認に役立ちます。
使い方
- 「タイトル」欄に対象ページの表題を入力します。
- 必要に応じて「説明文」「画像URL」「ページURL」「サイト名」を入力します。
- 必要に応じて「ページタイプ」（初期値: website）や「ロケール」（初期値: en_US）を変更します。
- 生成ボタンを押すと、結果表示エリアに入力内容に基づいたOGPメタタグが出力されます。
- 表示されたHTMLマークアップをコピーし、対象Webページのheadタグ内に配置して利用します。
使用例
- ブログ記事のタグ生成: タイトルに「最新のWebデザイントレンド」、説明文に「UI設計のポイントを解説」、ページタイプに「article」、ロケールに「ja_JP」を指定して記事用タグを作成する例。
- 企業サイトのトップページ設定: タイトルに「株式会社サンプル 公式サイト」、サイト名に「株式会社サンプル」、画像URLに「https://example.com/og-image.jpg」を指定して基本タグを出力する例。
よくある質問
タイトルを入力しないとどうなりますか？
タイトルが空の状態で実行すると、メタタグのマークアップは出力されません。タグを生成するにはタイトルの入力が必要です。
入力したURLや画像はツール側で実際に読み込まれますか？
いいえ。本ツールは入力された文字列をもとにメタタグのマークアップを構築する仕組みであり、外部URLへのアクセスや画像の取得・検証は行いません。
ページタイプやロケールを空欄にした場合はどうなりますか？
ページタイプは「website」、ロケールは「en_US」が既定値として適用され、タイトルが入力されていればそれぞれのタグが自動的に出力されます。
HTMLの特殊文字はエスケープされますか？
はい。タイトルや説明文に含まれる特殊文字はHTMLエスケープ処理が行われた上でメタタグのマークアップとして出力されます。