ページをSNSでシェアしたとき、タイトルが途中で切れていたり、画像が真っ白だったり、意図しない写真が出てしまったりした経験はないでしょうか。原因のほとんどはOGPタグの設定にありますが、やっかいなのは「実際にシェアしてみるまで分からない」という点です。テスト投稿をして確認し、直して、キャッシュが残っていてまた分からなくなる。この繰り返しに時間を取られている方は少なくありません。
この記事では、当社が無料で公開しているOGPプレビューアーを使って、X（旧Twitter）・Facebook・LINE・Slack・Discord・はてなブックマークでの見え方を1画面で確認し、直すべき箇所を特定して、貼り付け用のタグを書き出すまでの手順を解説します。公開前のページを確認する方法や、修正したのに表示が変わらないときの対処もあわせてまとめました。
OGPプレビューアーとは
OGPプレビューアーは、ページのURLを入力すると、そのページに設定されているOGPタグを読み取り、主要なSNSでシェアされたときのカードを再現して表示する無料ツールです。あわせて、画像サイズや文字数、記述もれといった問題点を診断します。会員登録もインストールも不要で、ブラウザだけで完結します。
このツールでできること
できることは大きく4つです。1つ目は、6つのSNSでの見え方を同時に確認すること。2つ目は、設定されているOGPタグをすべて一覧で確認すること。3つ目は、画像の実寸法や文字数を含めた自動診断。4つ目は、値を編集して貼り付け用のタグを書き出すことです。「確認する」だけでなく「直した結果を先に見る」ところまでを1画面で行えるのが特徴です。
SNS各社の公式デバッガーとの違い
Facebookのシェアデバッガー、XのCard Validatorなど、各社にも確認ツールはあります。ただしそれぞれ別のサイトにあり、ログインが必要なものもあり、公開済みのURLしか読み込めません。本ツールは、複数SNSを横並びで比較でき、ログイン不要で、公開前のページもHTMLソースの貼り付けで確認できます。一方で、実際のキャッシュ削除（再取得）は公式デバッガーにしかできないため、最終確認は公式ツールと併用するのが確実です。
入力したURLの扱いについて
他サイトのHTMLはブラウザから直接読み取れない仕組み（クロスドメイン制限）になっているため、URLで確認する場合は当社のサーバーが対象ページを読みに行きます。取得したHTMLはメタタグの抽出にのみ使い、保存や第三者提供は行いません。社外に出したくない内容を含むページは、次に説明する「HTMLソースを貼り付け」をお使いください。こちらはブラウザ内だけで処理され、送信は発生しません。
使い方｜URLを入力して3ステップで確認する
ステップ1｜確認したいページのURLを入力する
「URLから取得」が選ばれていることを確認し、入力欄に確認したいページのURLを貼り付けて「プレビューする」を押します。https:// を省いて入力した場合は自動で補完されます。ページの読み取りは数秒で終わり、結果が下に表示されます。まず試してみたい場合は、入力欄の下にある「お試し」ボタンを押すと、当社サイトのURLが入ります。
ステップ2｜6つのカードで見え方を見比べる
「2. SNSごとの見え方」に、X・Facebook・LINE・Slack・Discord・はてなブックマークのカードが並びます。同じOGPタグでも、表示される行数や説明文の有無、画像の切り取られ方はサービスごとに違います。並べて見ると、タイトルが途中で切れているサービス、説明文が表示されないサービスがひと目で分かります。
ステップ3｜診断結果で直す場所を特定する
「3. 診断結果」に、要修正・改善の余地・問題なしの件数と、項目ごとの判定が並びます。上から順に見て、要修正（✖）が付いた項目から手を付けてください。診断は日本語で「何が問題で、どう直すか」を書いているため、OGPに詳しくない担当者の方でも判断できます。
公開前のページを確認する（HTMLソースの貼り付け）
SNS各社の公式デバッガーは、外部から見えるページしか読み込めません。制作中のサイトや、公開直前の下書きを確認したい場合は、HTMLソースを貼り付ける方法を使います。
ステップ1｜ブラウザでページのソースを表示する
確認したいページをブラウザで開き、Windowsなら Ctrl+U、Macなら Option+Command+U でページのソースを表示します。表示されたコードを Ctrl+A ですべて選択し、Ctrl+C でコピーします。OGPタグは <head> の中にあるため、先頭の </head> までをコピーするだけでも読み取れます。
ステップ2｜ページのURLを入力しておく
「HTMLソースを貼り付け」に切り替えると、上部に「ページのURL」という欄が出ます。ここは任意ですが、入力しておくことをおすすめします。og:image が /img/ogp.jpg のような相対パスで書かれている場合、この欄のURLを基準に絶対URLへ変換して画像を表示するためです。ドメイン部分の表示もこのURLから作られます。
ステップ3｜貼り付けて「この内容でプレビューする」
大きな入力欄にコピーしたソースを貼り付け、「この内容でプレビューする」を押します。URLで取得した場合とまったく同じように、カード・診断・タグ一覧が表示されます。貼り付けたHTMLはブラウザの中だけで解析され、当社を含む外部に送信されることはありません。
テスト環境・Basic認証・下書きでの使いどころ
制作中のサイトはBasic認証をかけているケースがほとんどで、そのままでは外部ツールから読めません。この方法なら、認証を通ったブラウザでソースを表示してコピーするだけなので、認証情報を外部に渡さずに確認できます。WordPressの下書きプレビュー、ローカル環境（localhost）、社内システムのページも同じ手順で確認できます。
診断結果の読み方
「要修正」「改善の余地」「問題なし」の3段階
要修正（✖）は、そのままではカードが正しく表示されない可能性が高い項目です。改善の余地（⚠）は、表示はされるものの、見え方や運用の面で直したほうがよい項目を指します。問題なし（✔）は現状で問題のない項目です。まず要修正をゼロにし、次に改善の余地を減らしていく順で進めてください。
og:title｜長さの目安は全角30〜40字
タイトルが全角60字を超えると警告が出ます。多くのSNSではカード内のタイトルが1〜2行で切られるため、長いタイトルは末尾が省略されます。特に「記事タイトル｜カテゴリ名｜サイト名」のように区切りを重ねた形式は、肝心の記事タイトルまで届く前に切れてしまいがちです。カード用のタイトルはページの <title> と同じにする必要はないため、og:title だけ短くするのは有効な手です。
og:description｜前半80字に要点を置く
説明文は全角120字を超えると警告が出ます。Facebookでは1行しか表示されないことが多く、LINEでも2行程度です。長く書いても後半は表示されないと考え、前半に要点を置いてください。なおXでは、大きい画像のカードで説明文が表示されない場合があります。説明文に頼らず、タイトルと画像で内容が伝わる形にしておくのが安全です。
og:image｜1200×630pxを推奨する理由
画像は実際に読み込んで寸法を測り、幅600px未満なら警告、300px未満なら要修正と判定します。1200×630pxは比率1.91:1で、大きい画像のカードに最も収まりがよいサイズです。高解像度のディスプレイでも粗くならず、ファイルサイズも扱いやすい範囲に収まります。比率が大きく外れている場合は上下または左右が切り取られるため、その旨も診断に表示されます。
相対パス指定は画像が出ない代表的な原因
og:image を /img/ogp.jpg や ../images/ogp.jpg のような相対パスで書いていると、多くのSNSは画像を取得できません。ブラウザでは正しく表示されるため気づきにくく、実際にシェアして初めて発覚するパターンです。必ず https:// から始まる絶対URLで指定してください。本ツールでは、この状態を要修正として明示します。
タグの重複｜SEOプラグインとテーマの二重出力
意外に多いのが、同じタグが2回書かれているケースです。WordPressでは、SEOプラグイン（All in One SEO、Yoast SEOなど）とテーマの両方がOGPを出力していると発生します。内容が同じならまだしも、og:title が食い違っていたり、twitter:card が summary_large_image と summary で矛盾していたりすると、どちらが採用されるかはSNS側の判断に委ねられます。本ツールは、内容が違う重複を要修正として検出します。対処は、テーマ側のOGP出力を止めてプラグインに一本化するのが定石です。
canonicalとog:urlの不一致
canonical（正規URL）と og:url が違う値になっていると警告が出ます。どちらもそのページの代表URLを示すもので、揃っていないとシェア数の集計が分散したり、意図しないURLが共有されたりします。末尾のスラッシュ有無、wwwの有無、httpとhttpsの違いなど、細かい差異が原因になっていることが多い箇所です。
どちらの値が使われるかを切り替えて確認する
重複が見つかった場合、プレビューの上に警告が表示され、「先に書かれた値」と「後に書かれた値」を切り替えられます。多くのSNSは先に書かれた値を採用しますが、後の値を採用する実装もあり、どちらになるかは保証されません。両方に切り替えて、どちらで表示されても問題ない状態か、あるいは片方を必ず消すべきかを判断してください。
実例として、当社サイトのトップページを読み取ると、1つ目のog:titleは会社名とキャッチコピー、2つ目は「TOP」という値になっていました。さらにtwitter:cardも summary_large_image と summary で食い違っていました。この状態では、どのSNSでどう表示されるかを設計側でコントロールできません。プラグインとテーマのどちらでOGPを管理するかを決め、もう一方の出力を止めるのが正しい対処です。なお当社サイトのこの二重出力は、本記事の公開後にテーマ側の出力を停止し、All in One SEOへ一本化して解消しました。あわせてトップページのOGP画像も1200×630pxのものに差し替えています。
SNSごとに表示はここが違う
X（旧Twitter）
twitter:card に summary_large_image を指定すると、横長の大きな画像でカードが表示されます。summary の場合は左に正方形の小さな画像が付く形になります。本ツールは、読み取った twitter:card の値に合わせて表示を切り替えます。タイトルは1行で切られることが多いため、短く保つことが効果的です。
画像の下にグレーの帯があり、ドメイン名が大文字で表示されるのが特徴です。タイトルは2行程度、説明文は1行程度で切られます。画像は1.91:1で切り取られるため、正方形の画像を指定していると上下が大きくカットされます。ロゴや文字を画像の端に置くと切れる可能性が高い、という点はこのカードで確認できます。
LINE
トーク画面では、吹き出しの中に小さめのカードが表示されます。表示幅が狭いため、タイトルは2行でもかなり早く折り返されます。BtoCのサイトやキャンペーンページは、LINEで共有される割合が高い傾向にあります。スマートフォンの小さな画面で読めるかどうかを、このカードで確かめてください。
SlackとDiscord
どちらも、カードの上部にサイト名（og:site_name）が表示されるのが特徴です。og:site_name を設定していないと、この部分が空になったりドメイン名だけになったりします。社内でURLを共有する機会が多いサービスや、開発者向けのコンテンツを扱うサイトでは、この2つでの見え方も確認しておく価値があります。説明文は3行程度まで表示されるため、他のSNSより情報量を出せます。
はてなブックマーク
一覧では、左に小さなサムネイル、右にタイトルと説明文が並ぶ横並びのレイアウトになります。画像は正方形に近い形で切り取られるため、横長画像の左右が大きくカットされます。技術系・ビジネス系の記事はこの一覧に並ぶ機会が多いため、サムネイルが正方形に切られても内容が分かるかどうかを見ておくとよいでしょう。
| サービス | 画像の形 | 説明文 | サイト名 |
|---|---|---|---|
| X（大画像） | 横長1.91:1 | 表示されないことがある | ドメインのみ |
| 横長1.91:1 | 1行程度 | ドメイン（大文字） | |
| LINE | 横長・幅が狭い | 2行程度 | ドメインのみ |
| Slack | 横長・小さめ | 3行程度 | og:site_name |
| Discord | 横長 | 3行程度 | og:site_name |
| はてなブックマーク | 正方形に近い | 2行程度 | ドメインのみ |
値を編集して、貼り付け用のタグを書き出す
書き換えるとプレビューが即座に変わる
画面下部の「5. 値を編集してタグを書き出す」には、読み取った値が入力欄に入っています。og:title を短くすると、上のカードのタイトルもその場で変わります。文字数カウンタも付いているため、「何字にすれば切れないか」を目で確かめながら調整できます。og:image のURLを差し替えると、新しい画像を読み込んで寸法を測り直します。
書き出されるタグの中身
編集した内容は、そのまま <head> に貼れる形のmetaタグとして書き出されます。og系に加えて、twitter:card・twitter:title・twitter:description・twitter:image も同時に生成します。画像の寸法が取得できている場合は og:image:width と og:image:height も付きます。この2つを書いておくと、SNS側が画像サイズを推測する手間が省け、初回表示が安定しやすくなります。
WordPressでの入れ方
WordPressをお使いの場合、生成したタグをそのままテーマに貼るより、SEOプラグインの設定画面に同じ値を入力するほうが安全です。All in One SEOやYoast SEOには、記事ごとに「ソーシャル」タブがあり、OGP用のタイトル・説明文・画像を個別に設定できます。プラグインを使わずテーマに直接書く場合は、子テーマの header.php または functions.php の wp_head フックに出力し、プラグイン側の出力を止めて二重出力を避けてください。
修正したのにSNSの表示が変わらないとき
OGPタグを直したのに古い表示のまま、というのは非常によくある相談です。原因のほとんどはSNS側のキャッシュで、サイト側は正しく直っています。本ツールで「問題なし」と出ているなら、次の手順でキャッシュを更新してください。
Facebook｜シェアデバッガーで再取得
Facebookの「シェアデバッガー」に対象URLを入力し、「もう一度スクレイピング」を実行すると、その場でキャッシュが更新されます。Instagramのプロフィールリンクなど、Metaの他サービスで表示されるカードも同じキャッシュを参照するため、ここを更新すれば連動します。実行にはFacebookアカウントでのログインが必要です。
X｜Card Validatorとキャッシュ
XにもCard Validatorがありますが、現在は表示確認のみで、キャッシュを能動的に消す機能は提供されていません。数時間から1日程度で自然に更新されるため、急ぐ場合はURLの末尾にパラメータを付けて別URLとして扱わせる方法が現実的です。投稿前に必ず本ツールで確認しておけば、この待ち時間そのものを避けられます。
LINE・Slack・Discord｜パラメータを付けて回避
この3つには一般利用者向けのキャッシュ削除機能がありません。急ぎで正しいカードを出したい場合は、https://example.com/page/?v=2 のようにパラメータを付けたURLで共有してください。SNS側は別URLとして扱うため、新しい内容で取得されます。canonical を正しく設定していれば、検索エンジン側の評価が分散する心配もありません。
それでも変わらないときの確認順
キャッシュを更新しても変わらない場合は、次の順で確認します。①本ツールで対象URLを読み取り、タグが実際に更新されているか。②サーバー側やCDN（Cloudflareなど）のキャッシュが残っていないか。③重複タグがあり、古いほうが採用されていないか。④og:image の画像がログイン不要で開けるか。この4点でほとんどの原因が特定できます。
URLで取得できないページと対処
Basic認証・IP制限・会員限定ページ
認証や制限がかかっているページは、外部のツールから読み取れません。これはツールの不具合ではなく、ページを保護する仕組みが正しく働いている状態です。HTMLソースの貼り付けに切り替えて確認してください。なお、こうしたページはSNS側からも読めないため、公開後に改めて確認することも忘れないようにします。
JavaScriptで描画しているサイト
ページの内容をJavaScriptで後から描画しているサイト（一部のSPAなど）では、最初に返るHTMLにメタタグが入っていないことがあります。この場合、本ツールでも各SNSでも、タグを読み取れません。サーバーサイドレンダリングや静的生成でメタタグをHTMLに含める形に変更する必要があります。ブラウザの検証ツールで見えていても、それは描画後の状態である点に注意してください。
セキュリティ製品に弾かれる場合
WAFやBot対策が有効なサイトでは、自動取得のアクセスが遮断され、403などのエラーが返ることがあります。この場合もHTMLソースの貼り付けで確認できますが、同じ設定でSNSのクローラーまで弾いていないかは確認が必要です。SNSのクローラーが弾かれていると、そもそもカードが表示されません。
| 表示されるメッセージ | 主な原因 | 対処 |
|---|---|---|
| ページ側からエラーが返りました（HTTP 401/403） | 認証・IP制限・Bot対策 | HTMLソースの貼り付けで確認 |
| ページを取得できませんでした | URLの誤り・サーバー停止・タイムアウト | URLを再確認し、ブラウザで開けるか確認 |
| OGPタグが見つかりませんでした | タグ未設定・JavaScript描画 | タグを追加、またはHTMLへの出力方式を見直す |
| 画像を読み込めませんでした | 相対パス・非公開・URLの誤り | 絶対URLに直し、ログインなしで開けるか確認 |
OGP画像を作るときの実務的な基準
サイズと安全領域
1200×630pxで作り、重要な文字やロゴは中央寄りに配置します。はてなブックマークのように正方形へ切り取るサービスがあるため、左右それぞれ15%程度は「切られてもよい領域」と考えておくと安全です。この考え方で作っておけば、今後SNS側の仕様が変わっても大きく崩れません。
文字は大きく、要素は詰め込まない
タイムライン上でのカードは、実際にはスマートフォンの画面幅いっぱい、つまり実寸で数センチ程度にしか表示されません。パソコンで作っているときは読めても、実機では読めないことがよくあります。文字数は15〜25字程度に抑え、フォントサイズは大きめに。要素を詰め込むより、1つのメッセージを大きく置くほうが結果的に伝わります。
記事ごとに変えるか、共通1枚にするか
理想は記事ごとに専用画像を用意することですが、更新頻度が高いメディアでは負担になります。現実的な折衷案は、背景・ロゴ・レイアウトを固定したテンプレートを作り、タイトル文字だけを差し替える運用です。ブランドの統一感を保ちつつ、1本あたりの作業を数分に抑えられます。当社のブログもこの方式を採っています。
作ったら必ず実機の見え方で確認する
画像が完成したら、公開前に本ツールで確認してください。カード内で文字が読めるか、切り取りで重要な要素が消えていないかは、実際のカードサイズで見ないと判断できません。デザインツール上で完璧に見えても、カードでは読めないというケースは珍しくありません。
よくある質問（FAQ）
無料で使えますか？
無料です。会員登録もインストールも不要で、回数の制限もありません（短時間に大量のリクエストを送った場合のみ、一時的にお待ちいただくことがあります）。
入力したURLやHTMLは保存されますか？
保存していません。HTMLソースの貼り付けはブラウザ内だけで処理され、送信自体が発生しません。URLでの取得は当社サーバーが対象ページを読みに行きますが、取得した内容はメタタグの抽出と短時間のキャッシュにのみ使用します。
他社のサイトを調べても問題ありませんか？
公開されているページのメタタグを見るだけであれば、ブラウザでソースを表示するのと同じことです。ただし、取得したコンテンツの著作権は各サイトに帰属します。競合サイトのOGP設計を参考にする目的でお使いください。
表示されたカードは実際の見た目と完全に同じですか？
各SNSのカードを再現したものです。SNS各社は表示仕様を頻繁に変更するため、細部が異なる場合があります。「タイトルが切れないか」「画像の重要部分が残るか」を判断する用途としてお使いいただき、最終確認は各社の公式デバッガーや実際の投稿でご確認ください。
OGPを設定していないとSNSではどう表示されますか？
SNS側がページの <title> やmeta description、本文中の画像を推測して使います。意図しない画像が選ばれたり、画像なしのテキストリンクとして表示されたりします。表示されないわけではありませんが、内容も見た目もコントロールできない状態になります。
ECサイトや採用サイトでも使えますか？
使えます。商品ページは og:type に product を、採用ページは website を指定するのが一般的です。商品ページはSNSで共有される機会が多いため、商品名と価格が読み取れる画像を用意しておくと、クリック率に差が出ます。
まとめ｜シェアされる前に、見え方を確かめる
OGPの不備は、公開してシェアされてから気づくことがほとんどです。しかも一度キャッシュされると、直してもすぐには反映されません。だからこそ、公開前に見え方を確認しておく価値があります。OGPプレビューアーなら、URLを入れるだけで6つのSNSでの表示と診断結果が同時に得られ、修正したタグまで書き出せます。
特に確認しておきたいのは、og:image が絶対URLになっているか、1200×630pxで文字が読めるか、そして同じタグが二重に出力されていないかの3点です。この3つを押さえておけば、大きな崩れはほぼ防げます。
サイトのOGP設定やSNS向けの画像テンプレート作成、WordPressのSEOプラグインの整理などでお困りの際は、お問い合わせからお気軽にご相談ください。ほかにも提供ツール一覧で、パスワード生成・ファビコン作成・見出しCSSジェネレーターなどを無料で公開しています。
