このツールについて
ページを新しく作ったとき、SNSでシェアされた際にどんな見た目になるかを確認しながらタグを用意したい場面があります。このツールはタイトル・説明文・画像URLなどのフォームに入力するだけで、Twitter/X向けのカードとFacebook・LINEなどOGP全般向けのカード、両方のプレビューをその場に表示します。
画像URLをまだ決めていなくても、サンプル画像や画像なしのレイアウトで見た目を確認できます。タイトルや説明文が長すぎる場合や、必須のタグが欠けている場合は、下部にその場で警告が表示されます。
入力が完了したら、そのままコピーしてページの<head>内に貼り付けられるHTMLのmetaタグが生成されます。入力した内容がサーバーに送信されることはありません。
使い方
- タイトル・説明文・ページURLなど、わかる範囲でフォームに入力します。
- 右側にTwitter/XとFacebook・LINE向けのカードプレビューがリアルタイムに表示されます。
- 画像URLが未定の場合は「サンプル画像で確認」「画像なしで確認」を切り替えて見た目を確認できます。
- 警告が出ている場合は内容を見直し、問題がなくなったら生成されたHTMLをコピーしてページに貼り付けます。
特徴
2種類のプレビューを同時に確認
Twitter/X向けのカードと、Facebook・LINEなど一般的なOGP向けのカードを並べて確認できます。
画像が未定でも見た目を確認できる
サンプル画像・画像なしの2パターンで、画像URLが決まる前からレイアウトを確認できます。
不足・文字数オーバーをその場で警告
必須のタグが欠けている場合や、タイトル・説明文が長すぎる場合にその場で警告を表示します。
コピペ用HTMLをそのまま生成
入力内容から、ページの<head>にそのまま貼り付けられるmetaタグのHTMLを生成します。
よくある質問
生成したHTMLはどこに貼り付ければよいですか？
対象ページのHTMLの<head>タグの中に貼り付けてください。既存の同名タグがある場合は重複しないよう置き換えてください。
画像はどのくらいのサイズが推奨ですか？
summary_large_imageやOGPの一般的なカードでは1200×630px前後、Twitterのsummaryカードでは正方形に近い画像（400×400px以上）が推奨されています。
サンプル画像はそのまま公開ページに使えますか？
いいえ。サンプル画像はレイアウト確認用にブラウザ内で生成しているだけの色付きの画像で、実際のOGPタグには含まれません。公開時は実際の画像URLを入力してください。
入力した内容はどこかに送信されますか？
いいえ。プレビューの生成もHTMLの組み立てもすべてブラウザ内で行われます。入力内容がサーバーに送信されることはありません。
