OGPタグ生成ツール（og:title/og:imageなどを自動出力）
URL・タイトル・説明・画像URLを入れるだけ。Open Graph + Twitterカードのmetaタグをまとめて生成します。
読み取りはブラウザから直接行います（CORS制限あり）。
入力
① 基本情報
website / article を選択
② Twitterカード
折りたたみ可 / デフォルトON
Twitterカードも一緒に出力する
- • twitter:title は未入力なら og:title を採用
- • twitter:description は未入力なら og:description を採用
- • twitter:image は未入力なら og:image を採用
③ 詳細（Advanced）
必要な人だけ開く
アクセシビリティ用。Xでは最大420文字が示されています。(X Developer)
これらを付けるとクローラーが非同期処理を待たずレンダリングできる旨が説明されています。(Facebook Developers)
必要なら入力。ISO 8601 推奨。
生成されたmetaタグ
プレビュー
オプション
使い方・例
- URL、タイトル、説明、画像URLを入力します。
- og:type と Twitterカード設定を必要に応じて選びます。
- 生成されたタグをコピーして <head> に貼り付けます。
URL + タイトル + 画像URLを入れて推奨セットをコピー。
注意事項・豆知識
OGPとは
OGP（Open Graph Protocol）は、SNSがページのタイトル・説明・画像を読み取るための仕組みです。
og:title / og:description / og:image を設定すると、共有時の見え方をコントロールできます。
X（旧Twitter）のカードはOGタグを参照する場合があり、最小構成でも運用できます。
画像サイズの目安（SNSでの見え方を安定させる）
- • 最小 200×200。
- • より良い表示のために 1200×630 以上、少なくとも 600×315 以上が案内されています。(Facebook Developers)
- • トリミングを避けるには 1.91:1 に近い比率が推奨されています（完全一致は不要、目安）。
- • ファイルサイズは 8MB 以下の条件が示されています。(Facebook Developers)
- • summary_large_image は 2:1 比率、最小 300×157、最大 4096×4096 が示されています。(X Developer)
- • ファイルサイズは 5MB未満、対応形式（JPG/PNG/WEBP/GIF等）が示されています。(X Developer)
反映されないとき（キャッシュと再取得）
- • SNS/クローラーは一度取得したOG情報をキャッシュすることがあります。まずはデバッガー/インスペクタで再取得を試します。(Facebook Developers)
- • 画像を差し替えたのに更新されない場合、画像URL単位でキャッシュされるため「新しい画像は新しいURL」が必要になることがあります。
- • og:image:width / og:image:height を付けると、レンダリングが安定するケースがあります。(Facebook Developers)
よくある質問
Twitterカードも一緒に？
はい。twitter:card なども同時に出力できます。OGタグをフォールバックとして使う挙動もあるため、最小構成でも運用できます。(X Developer)
画像サイズの推奨は？
まずは“目安”として、Meta（Facebook系）は 1200×630 以上（最低 600×315）、比率は 1.91:1 に近いと安定しやすい、という案内があります。Xの summary_large_image は 2:1 比率や最小サイズなど別基準が示されています。目的のSNSに合わせて選ぶのがおすすめです。
反映されない
多くの場合はキャッシュです。まずはデバッガー/インスペクタで再取得を試し、画像を差し替えた場合は「画像URLを変える」必要があることがあります。