Open Graph メタタグを生成する方法

このツールでできること

ページのタイトルや説明などを入力し、共有用の Open Graph メタタグのマークアップを作成するためのツールです。ページ情報をまとめて確認したいときや、HTML に貼り付ける内容のたたき台を用意したいときに使えます。タイトルが入力されていない場合は、処理は成功してもマークアップは作成されません。

使い方の手順

1. タイトルを入力します。マークアップを作成するには、空でないタイトルが必要です。
2. 説明を入力します。タイトルと説明は、生成されるマークアップの基本要素として使われます。
3. 必要に応じて画像 URL、ページ URL、サイト名を入力します。画像 URL を入力した場合だけ画像要素が追加され、ページ URL やサイト名も、それぞれ値を入力した場合だけ対応する要素が追加されます。
4. 種類とロケールを確認します。値を指定しない場合、種類は website、ロケールは en_US になります。
5. 入力内容を確認して生成します。入力した値は、マークアップ内で HTML 用にエスケープされます。
6. 出力されたマークアップを確認し、必要なページのメタ情報として利用します。このツールは入力されたページ情報からマークアップを組み立てるもので、URL や画像の有効性、各サービスでの表示結果を確認するものではありません。

出力の見方と注意点

タイトルを入力して生成した場合、出力にはタイトル要素と説明要素が含まれます。画像 URL、ページ URL、サイト名を入力した場合は、それぞれに対応する要素も出力に加わります。入力しなかった任意項目の要素は、追加されません。

種類とロケールを指定しなかった場合は、それぞれ website と en_US が使われます。日本語ページ向けに利用する場合、ロケールの初期値が目的に合うかを確認し、必要なら入力値を指定してください。タイトルが空、または値として成立しない場合は、エラーになるとは限らず、マークアップが出力されない状態になります。

使用例

商品紹介ページの共有用メタ情報を準備するため、基本情報と任意の URL を入力して出力の構成を確認します。

タイトルに「春の新商品」、説明に「新商品の概要を紹介します。」を入力し、画像 URL とページ URL も指定して生成します。

タイトル要素と説明要素が含まれ、画像 URL、ページ URL、サイト名を入力した場合は対応する要素も加わります。種類とロケールを省略した場合は、それぞれ website と en_US になります。

制限事項

• 入力情報からマークアップを組み立てる機能であり、URL や画像の有効性、対応サービスでの表示結果を確認する機能ではありません。

よくある間違い

• タイトルを入力せずに生成しようとすると、処理が成功してもマークアップが作成されません。まず空でないタイトルを入力してから、もう一度生成してください。

よくある質問

タイトルが空でも Open Graph メタタグは生成できますか？

タイトルが空の場合、処理は成功してもマークアップは作成されません。空でないタイトルを入力すると、タイトル要素と説明要素を含むマークアップが生成されます。

画像 URL は必須ですか？

値を入力した場合だけ、画像 URL に対応する画像要素が追加されます。入力しなければ、その要素は出力されません。

種類とロケールを省略するとどうなりますか？

種類を指定しない場合は website、ロケールを指定しない場合は en_US が使われます。必要に応じて入力値を変更して確認してください。