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