Open Graph メタタグ生成ツール — 無料ツール
タイトル・説明文・URL・画像を入力すると、ページの <head> に貼り付けられる Open Graph、Twitter カード、標準メタタグを生成します。すべての値はエスケープされ、空欄は出力されず、長すぎるタイトルや説明文はプラットフォームに切られる前に警告されます。
機能
- ひとそろいの入力欄から Open Graph、Twitter カード、<title>、meta description をまとめて生成
- すべての値を HTML エスケープするため、引用符・アンパサンド・不等号を含むタイトルでも正しいタグになります
- タイトル60文字超・説明文200文字超をその場で警告。リンクプレビュー確認ツールと同じしきい値です
- 空欄のタグは content="" を出さずに丸ごと省略します。空の content はクローラーに意図的な空欄と読まれます
- すべてブラウザ内で完結。登録不要、アップロードなし、ページの取得もありません
よくある質問
このタグはどこに入れますか？
ページの <head> 要素の中、</head> の前です。順序はどのクローラーにも影響しませんが、Open Graph のブロックをまとめておくと保守が楽になります。CMS やフレームワークを使っているなら、テンプレートを直接編集せず head や SEO の設定を探してください。すでに一部を出力していることが多く、1ページに og:title が2つあるのは1つより悪い状態です。
貼り付けたのに古いプレビューが出るのはなぜ？
プラットフォームが最初にリンクを見た時点でカードをキャッシュしているからです。数日残ることもあります。解決策はページを読み直させることで、Facebook Sharing Debugger、LinkedIn Post Inspector、X Card Validator はいずれも手動で再取得できます。それまでは新しいタグは公開されていてもプラットフォーム上では見えません。
Open Graph と Twitter の両方が必要ですか？
厳密には不要です。twitter: のタグが無ければ X は Open Graph にフォールバックしますし、他の多くの読み取り側も同様です。ただし twitter:card だけは別で、X が大きな画像を出すか小さな正方形サムネイルを出すかを決めます。このツールは両方を出力するので、目に見えないフォールバックに頼らずに済みます。
画像のサイズはどれくらい？
1200 × 630 ピクセルが無難です。Facebook、LinkedIn、X の summary_large_image が想定する 1.91:1 の比率です。相対パスはクローラーで解決できないため絶対の https URL で配信し、ファイルは5MB程度までに抑え、各プラットフォームで切り取り方が少しずつ違うので文字は端から離してください。
タイトルの引用符や特殊文字はどうなりますか？
自動でエスケープされます。アンパサンド、不等号、二重引用符は属性に入る前に実体参照へ変換されるので、Ben & Jerry’s "best" flavour のようなタイトルでも壊れたマークアップではなく正しいタグになります。これは見た目の問題ではありません。content 内のエスケープされていない引用符は属性を途中で終わらせ、その後ろがすべてマークアップとして扱われます。
