シルギア

OGP・メタタグ確認ツールの使い方|URLでSNSシェアの見え方をチェック

公開日:2026年7月24日 更新日:2026年9月2日 運営:シルギア(Analyzegear, Inc.) 対象ツール:OGP・メタタグ確認

記事やページのURLをXやフェイスブック、LINE、スラックなどに貼ると、多くの場合タイトル・説明文・サムネイル画像をまとめた「カード」が自動で展開されます。この見た目を決めているのが、ページのヘッダに書かれたOGP(Open Graph Protocol)と呼ばれるメタタグ群です。カードが整っていればタイムライン上で目に留まりクリックされやすく、逆に設定が抜けているとURLの文字列だけがそっけなく貼られたりして、同じ内容でも反応が大きく変わります。このツールは、確認したいページのURLをシルギアのサーバー経由で取得し、シェア時のカードを模したプレビューと主要メタタグの一覧を並べて表示します。

OGPの各タグが担う役割

カード表示は、いくつかのタグの組み合わせで成り立っています。og:titleはカードの見出し、og:descriptionはその下に出る説明文で、ページのtitleやmeta descriptionとは別に「シェアされたとき用」の文言を指定できます。og:imageはサムネイルに使われる画像、og:urlはそのコンテンツの正規URL、og:typeはページの種別(記事なら article、トップページなら website など)を表します。og:site_nameでサイト名を添えると、どこの記事かが伝わりやすくなります。

このツールが確認するのは、ページ全体のtitle・description・canonical(正規URL)と、og:title・og:description・og:image・og:url・og:type・og:site_name、そしてXのtwitter:card・twitter:title・twitter:description・twitter:imageの計13項目です。とくに反応を左右しやすいtitle・description・og:title・og:description・og:image・twitter:cardには「✓(あり)」「✗(なし)」の印が付くので、入れ忘れがひと目で分かります。

Twitter Card(Xのカード)との関係

X向けにはTwitter Cardという別系統のタグがあり、twitter:cardで表示形式を選びます。値が summary なら画像が小さめの横型カード、summary_large_image なら画像が大きく前面に出るカードになります。twitter:title・twitter:description・twitter:imageを個別に指定できますが、これらが無い場合、Xを含む多くのサービスはog:*の値を流用します。

実務では、まずog:*を一通り揃えるのが先決です。Xで大きな画像を見せたいときだけ twitter:card に summary_large_image を足す、という順番が効率的です。twitter:title などの個別指定は、Xだけ文言や画像を変えたい場合に限ってよいでしょう。

og:imageの推奨仕様と切り取り

カードの印象を最も左右するのがog:imageです。各SNSで崩れにくい定番は横1200×縦630ピクセル。この縦横比を計算すると1200÷630=約1.90、つまりおよそ1.91対1です。この比率から外れた画像を渡すと、サービス側で上下や左右が切り取られます。たとえば正方形の1080×1080ピクセルを指定すると、1.91対1のカード枠に合わせて上下が大きくトリミングされ、上下端の文字が欠けることがあります。

そのため文字やロゴは画像の端に置かず、中央寄りの安全な範囲に収めるのが無難です。容量は数百キロバイト程度までを目安にし、画像URLは誰でもアクセスできる公開状態の実在ファイルを、httpsの絶対URLで指定してください。

ありがちな不備とキャッシュ問題

つまずきやすいのは次の3点です。og:imageを指定し忘れて画像なしのカードになっている。画像URLを相対パスで書いてしまいSNS側が画像を見つけられない(og:imageやog:urlは必ず絶対URLで書きます)。そして画像や正規URLがhttpsではない安全でない参照になっている、というものです。いずれも公開後に貼って初めて気づきがちです。なおこのツールでは、相対パスのog:image・twitter:imageは取得元ページを基準に絶対URL化してからプレビュー表示するため、ツール上では映っても実際のSNSでは映らない、という食い違いに注意してください。

やっかいなのがキャッシュです。主要SNSは一度読み取ったOGP情報をしばらく保持するため、タグを直しても古い画像やタイトルが出続けることがあります。その場合は各社の再取得ツールを使います。フェイスブックはシェアデバッガー、XはCard Validator系のツール、LINEはLINE DevelopersのツールなどでURLを再読み込みさせると最新のカードに更新されます。手作業でSNSへ貼り直すより、これらの公式ツールでキャッシュを更新するのが確実です。

このツールでの確認手順

確認したいページのURLを入力欄に貼り付け、「確認する」を押すか Enter キーで実行します。スキームを省いてもhttps://を補って取得します。プレビューのタイトルはog:titleを優先し、無ければtitleを、説明も同様にog:description優先で表示します。

  1. URLを入力して「確認する」を押す(サーバー経由で初期HTMLを取得)。
  2. プレビューカードでサムネイルと文言の見え方をざっと確認する。
  3. メタ一覧の✓/✗で、og:imageなどの過不足をチェックする。
  4. 「結果をコピー」で一覧をテキスト化、「JSONで保存」で構造化データとして保存できる。取得に失敗したら「再試行」を押す。

取得対象はサーバーが受け取る初期HTMLのため、ジャバスクリプトで後からタグを付与する一部のページや、ログインが必要なページでは値が取れないことがあります。また安全対策として、http/https以外やlocalhost・プライベートIPなど内部アドレスへの取得は拒否します。最終確認には各SNS公式のデバッグツールも併用すると安心です。

「OGP・メタタグ確認」を使ってみる →

ほかの記事

CSSアニメーション(@keyframes)入門|作り方と緩急の付け方 CSSカラー名⇔HEX変換の使い方|148色と最近傍色の仕組み cron式の書き方入門|5フィールドと記号を図解で理解する Flexboxの効き方を目で理解|主軸・交差軸から生成CSSまで CSS Grid入門|fr・minmax・gap・整列を実例で解説 色覚シミュレーションの使い方|配色が色弱でどう見えるか確かめる

記事一覧をすべて見る →