Twitter Card用メタタグを生成する方法

Twitter Card用メタタグを作る前に

このツールは、タイトルを中心に、Twitter Card用のHTMLメタタグを作成するために使います。記事やページに設定するメタデータの下書きをまとめたいときに、タイトル、説明、画像URL、サイト名、作成者を入力して確認できます。タイトルが空の場合は、マークアップもメタデータ項目も生成されません。

生成手順と入力項目

1. タイトル欄に、対象ページのタイトルを入力します。生成には空でないタイトルが必要です。
2. 必要に応じて、説明、画像URL、サイト、作成者の各入力欄を埋めます。空でない値を入力した項目だけが、対応するメタデータとして追加されます。
3. カードタイプを確認します。指定しない場合は summary_large_image が使われます。
4. 生成されたHTMLメタタグを確認し、タイトルや任意項目の内容が意図したものかを見直します。入力値はHTML用にエスケープされてからマークアップへ挿入されます。

生成結果の読み方と注意点

タイトルを入力した場合、生成結果にはカードタイプとタイトルのメタデータが含まれます。説明、画像URL、サイト、作成者を入力した場合は、それぞれに対応する項目が加わります。タイトルが空なら結果は生成されないため、入力漏れと結果なしを区別して確認してください。生成されたHTMLが表示されても、実際のリッチプレビュー、プラットフォームでの受理、URLの妥当性まではこの結果だけで判断できません。

使用例

商品紹介ページの共有用メタデータを準備するため、タイトルと説明を入力して生成結果の項目構成を確認します。

タイトルに「春の新商品」、説明に「新作ラインアップを紹介します」を入力し、生成結果にカードタイプ、タイトル、説明の各メタデータが含まれる形を確認します。

タイトルを入力した結果として、カードタイプとタイトルのメタデータが含まれます。説明も入力した場合は、説明に対応するメタデータ項目が加わります。

制限事項

• 生成されるのはTwitter Card用のHTMLメタタグです。結果だけで、実際のリッチプレビューやプラットフォームでの受理、URLの妥当性を判断することはできません。

よくある間違い

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

よくある質問

タイトルだけでも生成できますか？

空でないタイトルを入力した場合、カードタイプとタイトルのメタデータが含まれます。タイトルが空なら、マークアップもメタデータ項目も生成されません。

画像URLや説明は必須ですか？

説明、画像URL、サイト、作成者を入力すると、空でない項目に対応するメタデータが追加されます。未入力の任意項目は追加されません。

カードタイプを指定しないとどうなりますか？

カードタイプを指定しない場合は summary_large_image が使われます。