OGPタグジェネレーターとは？

OGP 用の meta タグを入力内容から組み立てて、そのままコピーできるツールです。og:title、og:description、og:url、og:image に加えて、画像サイズ、alt、og:type、og:site_name、og:locale などもまとめて生成できます。

必要に応じて X の twitter:card と twitter:site も追加できるので、シェア用 meta タグを一通り用意したいときに便利です。

使い方

1. タイトル、説明、URL、画像 URL などを入力します。
2. 必要なら画像サイズ、alt、タイプ、サイト名、ロケールも指定します。
3. X カードを追加したい場合は、チェックをオンにしてカードタイプとアカウントを設定します。
4. 右側に生成された meta タグを確認してコピーします。

入力内容はリアルタイムでコードへ反映されるため、必要なタグだけを見ながら整えられます。

生成できる主なタグ

• og:title
• og:description
• og:url
• og:image
• og:image:width
• og:image:height
• og:image:alt
• og:type
• og:site_name
• og:locale
• twitter:card
• twitter:site

X 用の設定はチェックをオンにした場合だけ追加されます。

出力例

たとえばタイトル、説明、URL、画像 URL を入力し、X カードも有効にすると、出力は次のようになります。

<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="ページの説明" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:type" content="website" />

<!-- Twitter Card Tag -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@username" />

活用シーン

• 新しいページに OGP タグを入れたいとき
• シェア画像や説明文の meta タグをまとめて用意したいとき
• X カードの summary と summary_large_image を切り替えて準備したいとき
• 手書きの meta タグで記述ミスを減らしたいとき

使うときの注意点

• このツールはタグ生成用で、実際の表示確認は OGPチェッカー や OGP画像シミュレーター で行うのが確実です
• 画像 URL やページ URL には絶対 URL を使うほうが安全です
• 入力値はそのまま content 属性へ入るため、最終的な HTML への組み込み時は内容を見直してください