ツールを実行
Webページのタイトルや説明文、画像URLなどの情報を入力するだけで、SNS共有時に適切なカード情報を提示するためのOpen Graphメタタグをまとめて生成できます。「実行」をクリックすると、結果欄にタグが表示されます。ページの種別は初期値のwebsite、言語設定は初期値のen_USが適用されます。記事ページ用のarticle設定や、日本語向けのja_JPへの変更も可能です。画像URL、ページURL、サイト名は任意入力となっており、値を入力した場合のみ対応するメタタグが追加されます。入力された文字列はHTMLエスケープ処理が行われるため、安全にコピーしてWebサイトのHTMLヘッダー部分へ貼り付けて利用できます。
使い方
- 「タイトル」欄にWebページのタイトルを入力します（メタタグを表示するにはタイトルの入力が必要です）。
- 必要に応じて「説明文」「画像URL」「ページURL」「サイト名」を入力します。
- ページの種別（初期値: website）や言語（初期値: en_US）を用途に合わせて変更します。
- 「実行」をクリックすると、結果欄にコードが表示されます。そのコードをコピーし、WebページのHTML内にあるheadタグ内に貼り付けます。
使用例
- トップページのタグ生成: タイトルに「My Tech Blog」、説明文に「技術ブログです」、種別に「website」、言語に「ja_JP」を指定して基本メタタグを生成する。
- 個別記事のタグ生成: タイトルに「CSS入門」、画像URLに「https://example.com/ogp.png」、ページURLに「https://example.com/css」、種別に「article」を指定してSNSカード用のメタタグを生成する。
よくある質問
タグが出力されない場合は何を確認すればよいですか？
タイトル欄が未入力または空白の場合は、結果欄にタグが表示されません。タグを表示するにはタイトル欄にテキストを入力してください。
画像URLやサイト名は必ず入力する必要がありますか？
必須ではありません。画像URL、ページURL、サイト名は任意入力であり、入力された項目のみ対応するタグが結果欄のコードに追加されます。
日本語サイトの場合の言語設定は何を指定すべきですか？
言語欄の初期値はen_USになっています。日本語向けのWebサイトを作成する場合は「ja_JP」に変更してご利用ください。
生成されたタグはHTMLのどこに貼り付ければよいですか？
結果欄に表示されたタグは、WebサイトのHTMLファイル内にあるhead要素（<head>と</head>の間）に貼り付けて配置します。