metaタグ・OGPタグ生成
ページタイトルや説明文、URL、OGP画像などを入力すると、<title>や<meta name="description">などの基本タグ、OGP（og:titleなど）、Twitter Cardのタグがリアルタイムに生成されます。入力した項目に対応するタグのみが出力されるため、不要な空タグは含まれません。生成したHTMLはそのまま<head>内に貼り付けて使用できます。OGP画像のサイズを作る際は ダミー画像生成ツール も参考にしてください。
🔒 ブラウザ内で完結・入力データはサーバーに送信されません
ページ情報
シェアプレビュー
注意事項
- 各項目は未入力の場合、対応するタグ自体が出力されません（空の`content`属性は生成しません）。
- OGP画像は横1200px×縦630px程度（アスペクト比1.91:1）が推奨サイズです。Twitter Cardの`summary_large_image`もほぼ同じ比率を想定しています。
- 本サイトはサーバーに一切通信しない設計のため、シェアプレビューの画像欄は指定したURLをそのまま表示するのみで、画像自体は読み込みません。実際の見た目は公開後に各社の公式デバッグツール（Facebookシェアデバッガー等）で確認してください。
- 入力した文字列に含まれる`<`や`"`などの記号は、HTMLとして壊れないよう自動的にエスケープして出力します。
用語解説
OGP（Open Graph Protocol）
FacebookやX（旧Twitter）などでURLをシェアした際に、タイトル・説明文・画像などを含むカードを表示させるための仕様。`<meta property="og:...">`の形で`<head>`内に記述する。
Twitter Card
X（旧Twitter）でリンクをシェアした際のカード表示を制御するためのmetaタグ。`twitter:card`で表示形式（summary/summary_large_image等）を指定する。
canonical URL
同じ内容のページが複数のURLで存在する場合に、検索エンジンへ「正規のURL」を伝えるためのリンク。`<link rel="canonical" href="...">`で指定する。
よくある質問
OGP画像のおすすめサイズはありますか？
横1200px×縦630px程度（アスペクト比1.91:1）が推奨です。X（旧Twitter）のsummary_large_imageカードもほぼ同じ比率を想定しています。
未入力の項目はどうなりますか？
入力した項目に対応するタグだけが出力され、空のcontent属性を持つタグは生成されません。不要なタグを手作業で削除する必要はありません。
シェアプレビューは実際の表示と同じですか？
同じではありません。通信を行わない設計のため、画像は読み込まずURLを表示するだけです。実際の見た目は、公開後に各SNSの公式デバッグツールで確認してください。
このページをシェア