自社サイトのURLをSNSに貼ったのに、サムネイル画像が表示されない。あるいは意図しない画像やタイトルが出てしまう。この原因は、OGPと呼ばれる設定が不足しているか、SNS側に古い情報が保存されているかのどちらかです。この記事では、設定方法と、変更しても反映されないときの対処を解説します。
OGPはSNSに「どう表示してほしいか」を伝える設定
まず仕組みを理解します。
SNSはページ内の指定を読んで表示を組み立てる
URLが投稿されると、SNSはそのページを読みに行き、指定された情報をもとにカードを組み立てます。この指定に使われる規格がOGP（Open Graph protocol）です（出典 The Open Graph protocol）。
指定がないと勝手に判断される
OGPが設定されていない場合、SNSはページ内から適当な画像を拾うか、何も表示しません。結果として、ロゴの一部やサイドバーのバナーがサムネイルになるといったことが起こります。
設定すべき4つの項目
| 項目 | 内容 | 推奨 |
|---|---|---|
| og:title | 表示されるタイトル | 記事タイトルまたは短縮版 |
| og:description | 表示される説明文 | 80〜100文字程度 |
| og:image | サムネイル画像 | 1200×630ピクセル |
| og:url | 正規のURL | httpsの正式なURL |
画像は1200×630ピクセルで作る
最も影響が大きいのが画像です。
推奨サイズと比率
横1200ピクセル、縦630ピクセルが標準的な推奨サイズです。この比率で作っておけば、主要なSNSで大きく表示されます。正方形やサイズの小さい画像だと、小さなアイコン表示になったり、意図しない位置で切り取られたりします。
文字を入れる場合は中央に寄せる
表示環境によって上下左右が切り取られることがあります。重要な文字やロゴは、画像の中央付近に配置してください。端に置いた文字は切れる可能性があります。
ファイルサイズと形式
- 形式はJPGまたはPNG
- ファイルサイズは1MB以下を目安にする
- 文字は大きめにする（小さく表示されるため）
- 背景を透過にしない（環境により黒く表示される）
- 絶対URLで指定する（相対パスでは読まれない）
アイキャッチ画像が自動で使われる設定にする
WordPressでは、投稿のアイキャッチ画像をOGP画像として使う設定が一般的です。この設定にしておけば、記事ごとに個別のOGP画像を用意する必要がなくなります。アイキャッチが未設定の記事用に、共通の代替画像も指定しておいてください。
WordPressでの設定方法
実装手順です。
SEOプラグインで設定するのが基本
Yoast SEO、All in One SEO、SEO SIMPLE PACKなどの主要なSEOプラグインには、OGPの出力機能が含まれています。専用のプラグインを追加する必要はありません。設定画面でSNS関連の項目を開き、以下を設定します。
- OGP出力を有効にする
- サイト共通の代替画像（デフォルト画像）を登録する
- アイキャッチ画像を優先して使う設定にする
- トップページ用のタイトルと説明文を設定する
- 設定後、実際のページで出力されているか確認する
重複出力に注意する
SEOプラグインとテーマの両方がOGPを出力していると、指定が重複して意図しない方が使われることがあります。ソースを表示してog:imageが2つ以上ないか確認してください。重複している場合は、どちらかの出力を止めます。
SNS別の追加設定
X（旧Twitter）では、OGPに加えて表示形式を指定する設定があります。大きな画像で表示させたい場合は、大判の形式を指定してください。プラグインの設定画面から選択できます。
OGP画像に相対パスを指定すると、SNS側が画像を読み込めません。必ず https から始まる完全なURLで指定してください。プラグイン経由で設定していれば自動的に絶対URLになります。
設定を変えても反映されない原因
最も混乱しやすい部分です。
SNS側にキャッシュが残っている
SNSは一度取得したページ情報を保存しており、設定を変更してもすぐには反映されません。サイト側のキャッシュを消しても、SNS側のキャッシュは別物です。これを知らないと、設定が間違っていると誤解して何度も修正することになります。
各SNSのデバッグツールで再取得を指示する
主要なSNSは、URLを入力して情報を再取得させるツールを提供しています。ここでURLを入力して再取得を実行すると、最新の設定が反映されます。新しい記事を公開したら、まずこのツールで確認する習慣をつけると確実です。
確認できること
- 実際に読み取られているタイトルと説明文
- 使用される画像
- 画像が読み込めないなどのエラー
- 指定が重複している場合の警告
LINEやチャットツールでの表示も確認する
SNSだけでなく、LINEやビジネスチャットでURLを共有した際にも同じ設定が使われます。顧客とのやり取りでURLを送る機会が多いなら、こちらの方が実務上は重要です。
OGP以外にシェア時の見え方を左右する要素
あわせて確認するとよい項目です。
サイト名の設定
WordPressの「設定」から「一般」で設定するサイトのタイトルは、SNSカードにも表示されることがあります。初期値のままになっていないか確認してください。
faviconとの役割の違い
faviconはブラウザのタブと検索結果用、OGP画像はSNSシェア用です。役割が異なるため、両方の設定が必要です。片方だけ設定して、もう片方が未設定というケースが多くあります。
シェアボタンの設置
OGPを整えても、シェアされなければ意味がありません。記事ページにシェアボタンを設置しておくと、共有のハードルが下がります。ただしボタンの数が多いと表示速度に影響するため、実際に使われるものだけに絞ってください。
トップページと記事ページで別々に確認する
記事ページは正しく設定されているのに、トップページのOGPが未設定というケースがあります。名刺やチラシからトップページを共有する機会もあるため、両方を確認してください。
最後に
SNSでシェアしたときに画像が出ないのは、OGPの未設定か、SNS側に残った古いキャッシュのどちらかです。設定はSEOプラグインの機能で完結し、1200×630ピクセルの画像を用意すれば足ります。変更しても反映されない場合は、サイト側ではなくSNS側のデバッグツールで再取得を指示してください。この仕組みを知らないまま設定を繰り返すのが、最も時間を無駄にするパターンです。
Web管理では、月額1万円からホームページの運用保守を代行しています。OGPの設定、重複出力の解消、共通画像の作成まで対応可能です。「シェアしても画像が出ない」というご相談も歓迎します。
