ブログ記事を公開したあと、SNSでシェアされた際にサムネイルが表示されない、タイトルが崩れる――そうしたトラブルを事前に防ぐには、公開前のOGP確認が有効です。本記事では、無料・ログイン不要で使えるツールを中心に、確認手順と崩れたときの対処法を整理します。料金や仕様は変更されることがあるため、利用前に各公式サイトで最新情報をご確認ください。
OGPとは何か――SNSシェア時に何が起きているか
OGP（Open Graph Protocol）は、WebページがSNSでシェアされたときにどのようなカード（タイトル・説明文・サムネイル画像）を表示するかを制御するメタタグの仕様です。
HTMLの ＜head＞ 内に以下のようなタグを記述します。
og:title― カードに表示されるタイトルog:description― カードの説明文og:image― サムネイル画像のURLog:url― 正規URLog:type― ページの種別（article / websiteなど）
X（旧Twitter）はこれに加えて独自の twitter:card タグを使用します。SNSのクローラーがページを取得し、これらのタグを読み取ることでカードが生成されます。
無料で使えるOGP確認ツール一覧
以下は記事執筆時点でアカウント登録なしで利用できるツールが中心です。提供状況・料金・仕様は変更されることがあるため、利用前に各公式サイトでご確認ください。
| ツール名 | 確認できる内容 | 特徴 |
|---|---|---|
| Facebook シェアデバッガー | Facebook上のOGP | Facebookアカウントでのログインが必要。キャッシュ再取得機能あり |
| opengraph.xyz | 複数SNSのプレビューを同時表示 | ログイン不要で利用できるとされる。X・Facebook・LinkedInなどのカードをまとめて確認 |
| metatags.io | OGP・Twitter Card・Google検索プレビュー | ログイン不要で利用できるとされる。視覚的にプレビューを確認しやすい |
| OGP確認系サービス各種 | OGPタグの構造確認 | ログイン不要のものが多い。タグ一覧を一括表示。OGP仕様そのものは公式サイト ogp.me で確認できる |
なお、Xには以前「Card Validator」という公式のカード確認ツールがありましたが、提供状況は変動しています。利用可否は公式の案内をご確認ください。SNSアカウントが不要で手軽に試したい場合は opengraph.xyz か metatags.io から始めると効率的です。
公開前チェックの具体的な手順
「公開前」に確認するにはURLが必要です。WordPressでは下書き状態でも確認できるよう、以下の順で進めます。
- 下書き保存してプレビューURLを取得する
WordPressの投稿画面で「下書き保存」したあと、「プレビュー」リンクを開き、ブラウザのアドレスバーからURLをコピーします（?preview=trueが付いたURL）。 - OGP確認ツールにURLを貼り付ける
opengraph.xyz や metatags.io のフォームにURLを入力して送信します。og:image・og:title・og:descriptionが意図通りに表示されているかを確認します。 - Xでの表示を確認する（任意）
X向けのカード表示は、複数SNS対応の確認ツールでプレビューURLを入力して確認できます。X公式の確認ツールが利用できる場合はそちらも併用すると確実です。 - 問題があれば修正して再確認
OGPタグの値を修正したあと、ツールによってはキャッシュが残っているため「キャッシュを削除（再取得）してから確認」する操作が必要になることがあります（後述）。 - 本番公開後に最終確認
プレビューURLと本番URLではOGPが異なる場合があります。公開直後にもう一度本番URLで確認するのが確実です。
OGPが崩れる典型的な原因と対処法
原因1: og:imageの画像サイズが要件を満たしていない
各SNSが推奨する画像サイズの目安は以下の通りです（仕様は変更されることがあるため、各社公式ドキュメントで最新情報をご確認ください）。
- X（大きいカード表示）: 横1200px × 縦630px 前後が目安
- Facebook: 横1200px × 縦630px 前後が目安
- LINE: 横1200px × 縦630px 前後が目安
対処: 画像を推奨サイズにリサイズして再アップロードし、WordPressのアイキャッチ画像を更新します。ファイル容量の上限なども各SNSの公式ドキュメントで確認してください。
原因2: SNS側のキャッシュが古い情報を保持している
SNSのクローラーは一度取得したOGP情報をキャッシュに保存することがあります。記事を修正してもすぐに反映されないのはこのためです。
対処の手順は各サービスによって異なります。
- Facebookの場合: 「シェアデバッガー」でURLを入力し、「もう一度スクレイピング」を実行してキャッシュを再取得します。
- Xの場合: 再取得の挙動はXの仕様によります。反映まで時間がかかることがあります。
- LINEの場合: LINE Developers（developers.line.biz）で案内されているURLプレビュー関連ツールで再取得できる場合があります。提供状況は公式でご確認ください。
原因3: og:imageのURLがHTTPSでない、または相対パスになっている
og:imageには絶対URL（https:// で始まるフルパス）を指定するのが基本です。相対パスや http:// のURLでは画像が表示されないケースがあります。
原因4: プラグインやテーマが複数のOGPタグを出力している
SEOプラグインとテーマが両方OGPタグを出力していると、重複や競合が起きることがあります。確認ツールで同じタグが複数行表示されていれば、一方の出力を無効化します。
WordPressでのOGP設定方法
WordPressでOGPを設定する方法はいくつかありますが、代表的なプラグインを使うのが一般的です。おすすめWordPressプラグインの比較記事も参考にしてください。
SEO SIMPLE PACKを使う場合
SEO SIMPLE PACKは国産の軽量SEOプラグインで、OGP設定の項目も備えています。
- WordPress管理画面 → 「SEO PACK」→「基本設定」を開く
- 「OGP / Twitter Card」関連のタブでog:imageやtwitter:cardの種別を設定する
- 各投稿の編集画面にメタボックスが表示される場合、個別にOGP画像やタイトルを上書き設定できる
画面名や項目はバージョンによって異なる場合があるため、最新の表記は公式ドキュメントでご確認ください。
All in One SEO / Yoast SEOを使う場合
どちらも投稿画面のメタボックスから「ソーシャル」関連のタブを開き、OGPタイトル・説明文・画像を個別に設定できます。設定後はキャッシュプラグインのキャッシュも削除しておくと、クローラーが最新ページを取得しやすくなります。
WordPressの初期設定全般についてはWordPressの初期設定まとめも合わせてご確認ください。
ホスティング環境がOGPに影響するケース
サーバーのレスポンスが遅い、または ＜head＞ の出力が遅れる環境では、SNSクローラーがOGPタグを取得しきれないことがあります。表示崩れが繰り返す場合は、サーバー環境の見直しも選択肢のひとつです。
国内で利用者の多いConoHa WINGは表示速度をうたっており、契約時の選択肢として検討されることが多いサーバーです。WordPressの始め方から知りたい方はConoHa WINGでWordPressを始める手順をご覧ください。料金やプランの詳細は公式サイトでご確認ください。
確認のタイミングとチェックリスト
以下を公開前・公開後のルーティンに組み込んでおくと、OGP起因のトラブルに気づきやすくなります。
| タイミング | やること |
|---|---|
| 記事執筆中 | アイキャッチ画像を推奨サイズ（1200×630px前後）で用意する |
| 下書き保存後 | opengraph.xyz 等でプレビューURLを確認する |
| 本番公開直後 | 本番URLで再確認。Facebookはシェアデバッガーでキャッシュ再取得 |
| 記事を修正した場合 | 各SNSのデバッガーでキャッシュ再取得を実行する |
まとめ
- OGPはSNSシェア時のカード表示を制御するメタタグで、公開前に無料ツールで確認できる
- ログイン不要で試すなら opengraph.xyz か metatags.io が手軽（提供状況は公式で確認）
- 崩れる主な原因は「画像サイズの不適合」「SNSキャッシュ」「URL形式の誤り」「OGPタグの重複」の4つ
- WordPressはSEO SIMPLE PACKなどのプラグインでOGPを管理するのが一般的
- 修正後はSNS側のキャッシュ再取得を忘れずに実行する
【PR】 本記事はアフィリエイトプログラムを通じた広告リンクを含みます。