OGP設定とは？ — SNSシェア時の画像・タイトル表示ガイド

> このページのURL: https://lite-word.com/manual/ogp-settings/

> こんな質問に答えます:
> - SNSでシェアしたら画像が表示されない
> - Twitterでシェアした時のサムネイルを変えたい
> - OGPって何ですか？
> - LINEで送った時に変な画像が出る

OGPとは🔊

OGP（Open Graph Protocol）は、WebページをSNSでシェアした時に「タイトル・説明文・画像」を正しく表示するための仕組み。

ひと言でいうと: SNSに「このページはこういう内容で、この画像を使ってね」と伝えるための設定。

例えば、あなたのサイトのURLをLINEで友達に送った時に、タイトル・説明文・アイキャッチ画像がカード形式できれいに表示される。あれがOGPの仕事。

OGPが設定されていないとどうなるか🔊

OGPを設定しないままSNSでシェアすると、こんなことが起きる。

要するに: OGPを設定しないと、SNSでシェアした時の見た目をコントロールできない。せっかくシェアしても「何のページか分からない」状態になり、クリックされにくくなる。

OGPの主要タグ🔊

OGPはHTMLの 内に タグとして記述する。主要なタグは以下の6つ。

補足:

• og:title はSEOのtitleタグとは別に設定できる。SNS向けに短く分かりやすいタイトルにするのがコツ
• og:description も同様に、SNS向けの説明文を個別に設定できる
• og:image が一番重要。画像があるかないかでクリック率が大きく変わる

SNSごとの仕様の違い🔊

SNSによってOGPの表示仕様が微妙に異なる。特に画像サイズとカード形式に違いがある。

X（旧Twitter）の追加設定

Xでは、OGPタグに加えて twitter:card という独自のメタタグが必要。

• twitter:card — カードの種類。summary_large_image（大きな画像付き）がおすすめ
• twitter:site — サイトのXアカウント（例: @your_account）
• twitter:title — 未設定なら og:title が使われる
• twitter:description — 未設定なら og:description が使われる
• twitter:image — 未設定なら og:image が使われる

ポイント: twitter:card だけ設定すれば、あとはOGPタグの値が自動的に使われる。全部を二重に設定する必要はない。

OGP画像の推奨サイズ🔊

結論: 1200×630px で作れば全SNSに対応できる。

画像作成のポイント

• サイズ: 1200×630px（横長）
• ファイル形式: JPGまたはPNG
• ファイルサイズ: 1MB以下を推奨（大きすぎると読み込みが遅い）
• 重要な情報は中央に寄せる: SNSによって上下左右がトリミングされることがある
• テキストを入れる場合: 文字は大きめに。スマホの小さなカード表示でも読めるサイズにする
• 背景色をつける: 白背景だとSNSのUIと境界が分かりにくい

やりがちな失敗

• 正方形の画像を設定する → 横長にトリミングされて見切れる
• ロゴだけの画像 → 小さすぎて何のサイトか伝わらない
• テキストびっしりの画像 → スマホで読めない
• ファイルサイズが5MB以上 → SNS側で読み込みに失敗することがある

WordPressでのOGP設定方法🔊

WordPressでは、OGPタグを手動で書く必要はない。SEOプラグインやテーマのSEO機能を使って管理画面から設定できる。

方法1: SEOプラグインを使う（おすすめ）

代表的なSEOプラグイン:

• Yoast SEO — 世界で最も使われているSEOプラグイン
• All in One SEO — 設定がシンプルで初心者向け
• SEOPress — 軽量で高機能
• Rank Math — 無料でも機能が豊富

設定手順（Yoast SEOの場合）:

1. プラグインをインストール・有効化
2. 各投稿・固定ページの編集画面を開く
3. 画面下部の「Yoast SEO」パネルを開く
4. 「ソーシャル」タブをクリック
5. Facebook用のタイトル・説明文・画像を設定
6. X（Twitter）用も同様に設定（未設定ならFacebookの設定が使われる）
7. 更新ボタンを押して保存

方法2: テーマのSEO機能を使う

一部のWordPressテーマにはSEO・OGP設定機能が組み込まれている。

• テーマにOGP機能がある場合、SEOプラグインと機能が重複しないよう注意
• 両方から同じOGPタグが出力されるとエラーの原因になる。 どちらか一方に統一すること

サイト全体のデフォルトOGP画像を設定する

個別ページにOGP画像を設定していない場合に表示される「デフォルト画像」を設定しておくと安心。

• Yoast SEO: 「SEO > ソーシャル > Facebook」タブでデフォルト画像を設定
• All in One SEO: 「ソーシャルネットワーク > Facebook」でデフォルト画像を設定

ポイント: デフォルト画像には、サイトのロゴやブランドイメージが入った1200×630pxの画像を用意しておく。

設定後の確認方法🔊

OGPを設定したら、正しく表示されるか必ず確認する。

Facebook シェアデバッガー

• URL: https://developers.facebook.com/tools/debug/
• 確認したいページのURLを入力して「デバッグ」をクリック
• OGPタグの内容とプレビューが表示される
• 問題があれば具体的なエラーメッセージが出る

X Card Validator

• URL: https://cards-dev.twitter.com/validator
• URLを入力して「Preview card」をクリック
• Xでシェアした時の表示をプレビューできる

LINE OGPチェッカー

• LINE公式のデバッグツールはないが、 LINEのトーク画面で自分にURLを送れば実際の表示を確認できる
• 表示がおかしい場合は、OGPタグを修正した後にURLを再送信する

その他のツール

• ラッコツールズ OGP確認: https://rakko.tools/tools/9/ — 日本語で使いやすい
• OGP.me: https://ogp.me/ — OGPの公式サイト。仕様の確認に

キャッシュの問題（設定したのに古い画像が出る）🔊

OGPを修正したのに、SNSで古い画像やタイトルが表示されることがある。これはSNS側のキャッシュが原因。

なぜキャッシュが残るのか

SNSは、一度取得したOGP情報を一定期間キャッシュ（保存）している。サイト側でOGPを変更しても、SNSのキャッシュが更新されるまで古い情報が表示され続ける。

対処法

ポイント: Facebook のシェアデバッガーは即座にキャッシュを更新できるので、OGPを変更したら必ずここで「もう一度スクレイピング」を実行する。

WordPress側のキャッシュにも注意

• キャッシュプラグイン（WP Super Cache、W3 Total Cache等）を使っている場合、OGPを変更したらキャッシュをクリアする
• CDN（Cloudflare等）を使っている場合、CDNのキャッシュもクリアが必要な場合がある
• サーバーキャッシュ — レンタルサーバーによっては、サーバー側でもキャッシュしている

よくあるトラブルと対処法🔊

画像が表示されない

タイトルや説明文がおかしい

• SEOプラグインとテーマの機能が重複している — どちらか一方を無効にする
• OGPタグが二重に出力されている — ソースコードで og:title を検索し、2つ以上あれば片方を無効化
• キャッシュが原因 — 上記のキャッシュクリア手順を実行

SNSごとに違う画像を表示したい

• Facebook/LINE: og:image の画像が使われる
• X: twitter:image を別途設定すれば、Xだけ異なる画像を表示できる
• 全SNS共通にしたい場合: og:image だけ設定すればOK

画像が変な位置でトリミングされる

• 1200×630px（1.91:1）の横長画像を使う
• 重要な要素（テキスト・顔・ロゴ）は画像の中央に配置する
• 上下左右の端15%くらいは切れる可能性があると考えて作る

OGPを設定したのにGoogleの検索結果に反映されない

OGPはSNS向けの設定であり、Google検索結果には影響しない。Googleの検索結果に表示されるタイトル・説明文は、titleタグとmeta descriptionで設定する。

関連ページ:

• SNS活用の基本 — SNSとWebサイトの連携方法
• SEO設定 — タイトルタグ・メタディスクリプションの設定
• アイキャッチ画像 — OGP画像としても使われるアイキャッチの設定方法

最終更新: 2026-03-17