OGPタグ生成ツール(og:title/og:imageなどを自動出力)

URL・タイトル・説明・画像URLを入れるだけ。Open Graph + Twitterカードのmetaタグをまとめて生成します。

コピペでOK プレビューつき 画像/キャッシュ注意を確認

使い方

  1. ツールを開き、canonical URL・タイトル・画像URLを入力します。
  2. 必要に応じて説明、サイト名、Twitter設定を追加します。
  3. 生成されたmetaタグをコピーして、ページのheadに貼り付けます。
  4. プレビューと注意を確認し、画像比率やキャッシュ再取得を必要に応じて調整します。

OGPとは

OGP(Open Graph Protocol)は、SNSやチャットでURLが共有されたときのカード表示内容を伝えるためのメタデータです。

og:title、og:description、og:image などを設定すると、共有時の見え方をコントロールしやすくなります。

Twitterカードタグをあわせて設定すると、サービス間でプレビュー挙動を揃えやすくなります。

画像サイズの目安(見え方を安定させる)

Meta系の目安(参考)

  • 最小の目安: 200×200。
  • 安定しやすい例: 1200×630以上、少なくとも600×315以上。
  • 比率は1.91:1付近が目安。
  • ファイルサイズは8MB以下の案内があります。

Xカードの目安(参考)

  • summary_large_image は2:1付近が目安。
  • 目安範囲: 最小300×157、最大4096×4096。
  • ファイルサイズは5MB未満の案内があります。
  • JPG/PNG/WEBP/GIFなど対応形式を利用します。

反映されないとき(キャッシュと再取得)

  • SNSクローラーは取得済みのOG情報をキャッシュすることがあります。デバッガー/インスペクタで再取得を試します。
  • 画像差し替えが反映されない場合、画像URLを変更すると改善することがあります(ファイル名変更やクエリ付与)。
  • og:image:width と og:image:height を付けると、描画が安定しやすくなる場合があります。

FAQ

Twitterカードも同時に生成できますか?

はい。twitter:card などを同時に出力できます。最小セットも選べます。

画像サイズの推奨は?

用途別の目安で選びます。Meta寄りは1.91:1(例: 1200×630)、X summary_large_image寄りは2:1(例: 1200×600)が使われます。

更新しても反映されません。

多くはキャッシュです。各デバッガーで再取得し、画像差し替え時は画像URL変更も確認してください。

関連ツール