メタタグジェネレーター・OGPプレビュー

メタタグジェネレーター・OGPプレビューについて

このページには2つのモードがあります。「生成」はタイトル・説明・画像・URLを入れると、<head> に貼る基本メタタグ、Open Graph タグ、X(旧Twitter)カードタグを1つのブロックにまとめます。「プレビュー検査」は公開済みページのURLを入れるとHTMLを取得してタグを読み、Facebook・X・カカオトーク・LinkedIn・Discord・Slack でカードがおおよそどう見えるかと、足りない項目を示します。

流れは生成→公開→検査です。ただし検査モードのカードは各プラットフォームの規則をまねた描画で、実際のサーバーが作った結果ではありません。タグを直したのに古い画像が出続ける場合、原因はマークアップではなくプラットフォーム側のキャッシュであることが多く、下に挙げる各社のツールで解消します。

メタディスクリプションの長さに公式上限はない

「説明文は120字以内」といった数字がよく出回りますが、Google 検索セントラルは「メタディスクリプションの長さに制限はないが、検索結果のスニペットはデバイスの幅に合わせて必要に応じて切り詰められる」と書いています。スニペットは主にページ本文から作られ、メタディスクリプションの方が正確にページを説明する場合に使われる、とも説明しています。

このツールはタイトル60字・説明200字を超えると注意、90字・300字を超えると警告を出しますが、これはカードや検索結果で切れ始める目安で、Google の規則ではありません。全角文字は半角より幅が広いので、同じ文字数でも早く切れます。要点を最初の一文に置き、後ろは切れても困らないように書く方が確実です。

keywords メタタグも入力すれば出力しますが、Google はこのタグを検索のインデックスにもランキングにも一切使わないと明言しています。

Open Graph の必須4プロパティ

Open Graph プロトコル(ogp.me)が必須とするのは og:title、og:type、og:image、og:url の4つです。og:image を指定したら og:image:alt も指定すべきとされ、og:locale は ja_JP のような「言語_地域」形式で既定値は en_US です。

生成モードでは、スキームなしの example.com/salary を https://example.com/salary に直して og:url と canonical に同じ値を入れます。画像URLはそのまま使うので、必ず https:// から始まる絶対URLにしてください。/img/og.png のような相対パスは解釈しないクローラーが多く、検査モードでもエラー扱いです。og:image:width・height を書いておくと、画像を取得する前にカードの枠を決められるため、初回シェアで画像が抜ける現象が減ります。

X のカード種類と Open Graph へのフォールバック

X の Cards markup ドキュメントによると、twitter:title・description・image がなければ対応する Open Graph の値を読みます。og タグが揃っていれば、X 専用に必要なのはレイアウトを決める twitter:card だけです。このツールでは小さな正方形サムネイルの summary と、大きな横長画像の summary_large_image を選べます。X には app や player カードもありますが、追加のタグが必要なのでここでは生成しません。

シェアのプレビューが更新されないとき

メッセンジャーやSNSは、最初にシェアされたときに取得した情報をしばらく保存します。タグを直しても既存のカードが変わらないのはこのためです。

• LINE: 以前は PagePoker(poker.line.naver.jp)というキャッシュ削除ツールがありましたが、この文章を書いた2026年9月時点ではアドレスに接続できませんでした。URLに ?v=2 のようなクエリ文字列を付けて新しいURLとしてシェアする方法がよく使われます。
• Facebook: Meta のシェアデバッガー(developers.facebook.com/tools/debug)で「もう一度スクレイピング」を押します。
• LinkedIn: Post Inspector(linkedin.com/post-inspector)にURLを入れると再取得します。
• カカオトーク(韓国で主流): Kakao Developers の共有デバッガー(ログインが必要)でキャッシュを初期化します。http と https は別URLとして扱われます。

検査モードのページ取得の仕組み

ブラウザは CORS のため他サイトのHTMLを自由に読めません。検査モードはまず直接取得を試し、失敗すると cors.sh、allorigins、codetabs といった公開プロキシを順に経由します。つまり検査したURLはそれらのプロキシ運営者に渡ります。ログインが必要なページ、社内URL、公開前のページは取得できませんし、入れるべきでもありません。その場合はページソースの <head> 部分を貼り付けて検査してください。

例

使い方

1. 生成モードでタイトル・説明・URL・画像URLを入れ、必要なら og:type、ロケール、X カードの種類を選びます。
2. 出力されたブロックをページの <head> に貼って公開します。
3. プレビュー検査モードで公開URLを入れ、不足タグと各プラットフォームの見え方を確認します。
4. すでにシェア済みのリンクなら、各プラットフォームのツールでキャッシュを更新します。

よくある質問