WordPressで記事を投稿したのにSNSでのシェア時に画像が小さく見えたり、表示されなかったりする経験はありませんか。適切にOGP画像を設定すれば、タイムラインでの見栄えが格段に良くなり、クリック率やサイト訪問者数の増加にもつながります。この記事では「OGP 画像 設定 WordPress」をキーワードに、画像サイズの基準からコードでの実装、プラグイン利用、有効な確認方法まで徹底的に解説します。初心者でも安心して設定でき、SNSで魅力的に表示されるサイト作りのコツが身に付きます。
目次
OGP 画像 設定 WordPress の基本とは何か？
OGP（Open Graph Protocol）とは、ウェブページがSNSでシェアされた際にタイトル・説明文・画像などを指定して表示させるための仕組みです。WordPressサイトにおいて、OGP画像の設定が正しくないと、SNSで意図した画像が表示されなかったり、そもそも画像なしで表示されたりします。特にOGP画像は視覚的な第一印象を左右し、クリック率に大きく影響するため、SEOにも深く関わっています。最新情報として、多くのサイトで標準となっている推奨サイズ・形式などの基準が確立されており、それに基づいた設定が求められています。
OGPとは何かを理解する
OGPとは、FacebookなどのSNSがプレビュー情報を受け取るためのメタデータの規格です。og:title・og:description・og:imageなどのタグをHTML内に記載することで、SNS上にタイトル・説明・画像が整って表示されます。WordPressではテーマやプラグインを通じてこれらを自動的に出力することが多く、設定が間違っていると画像が表示されない原因になります。
WordPressにおけるOGP画像が重要な理由
SNSで記事をシェアしたとき、画像付きリンクの方がリンクのみの投稿よりも目を引きやすくクリック率が高いというデータがあります。正しいOGP画像を設定することで、ブランドの印象・サイトの信頼性向上にも役立ちます。特にアイキャッチ画像との紐付けが正しく設定されているかどうかで、視認性と拡散力が大きく変わることが報告されており、SEO対策としても欠かせない要素です。
OGP画像の推奨される仕様（サイズ・比率・ファイル形式）
SNSで美しく表示されるためのOGP画像の仕様として、**横1200px×縦630px（アスペクト比 1.91:1）** が現在事実上の標準になっています。FacebookやX（旧Twitter）、LINEなど主要なプラットフォームで対応しており、最低限の表示に耐える最小サイズもプラットフォームごとに設定されています。また、JPEG・PNG形式が互換性が高く、WebPが使えるケースもありますが、対応状況により異なるためJPG/PNGでの準備が無難です。さらに、ファイル容量は5MB以下に抑えることで読み込みやSNSでの取得の失敗を防ぎます。
WordPressでOGP画像を設定する方法
WordPressでOGP画像を正しく設定するには、主に「プラグインを使う方法」と「テーマ（functions.php）でコードを書く方法」があります。どちらの方法にもメリットと注意点があり、自分のサイトの運用スタンスに応じて選択すると良いでしょう。どちらの方法でも、アイキャッチ画像・固定ページ・トップページそれぞれに適切な設定を行うのがポイントです。
プラグインを利用するメリットと代表例
プラグインを使えば管理画面で設定でき、コードを直接触る必要がありません。多くのSEOプラグインにはOGP設定が含まれており、画像アップロード・デフォルト画像の指定・SNSごとのカードタイプ設定などが簡単にできます。代表的なものでは画像のサイズ指定やタグの自動出力が可能なものがあります。特に初心者には間違いのない方法です。
テーマのfunctions.phpで手動設定する方法
プラグインを使いたくない場合、functions.phpにコードを追加してOGPタグを手動で出力することができます。具体的には、投稿や固定ページの場合はアイキャッチ画像URLを取得し、無ければデフォルトの画像を設定する関数を作成し、headタグ内にその内容を出力する方法です。この設定はテーマ更新時に消えないように子テーマに記述することが望ましいです。また、add_image_sizeを使ってOGP画像用のサムネイルを生成する例も一般的です。
プラグインあり・なしの設定手順の比較
以下の表で、プラグイン使用時と手動設定時の作業内容や注意点を比較します。
| 方法 | 作業内容 | 注意点 |
|---|---|---|
| プラグインを使う | 管理画面で画像をアップロード・設定 SNS毎のカードタイプを選択可能 |
他のプラグインと設定が重複しないように注意 テーマとの競合が起こることもある |
| 手動設定（functions.php） | コードでOGPタグ出力を制御 デフォルト画像やアイキャッチの優先順位をコードで設定 |
PHPの知識が必要 テーマ更新時に消える恐れあり（子テーマ推奨） |
実践的な設定例とコード実装のコツ
実際にOGP画像を設定する際に使えるコード例や、画像を自動生成する方法、アイキャッチとの紐付け方などの実践的なノウハウをご紹介します。これらを応用すればサイト全体の一貫性とメンテナンス性を高めることができます。
add_image_size でOGP用画像サイズを定義する
テーマの functions.php に add_image_size を使って OGP 用の画像サイズを定義する方法があります。例えば add_image_size(‘ogp’, 1200, 630, true); と設定すれば、投稿時にそのサイズでトリミングされた画像を生成できます。この方法を使えば、OGPタグで呼び出す画像サイズが統一され、サイズ違いによるトリミングや表示崩れの問題を減らすことが可能です。
アイキャッチ画像の優先／デフォルト画像の指定
投稿ごとにアイキャッチ画像を設定している場合はそれを優先し、アイキャッチが無い場合はサイト共通のデフォルト画像を指定するという優先順位をコードで制御します。これにより、どのページでも画像が必ず表示されるようになります。具体的には条件分岐で is_singular() を使い、has_post_thumbnail() を確認して処理を切り替えます。
OGPタグを head 内に出力するコード例
以下は functions.php に記述して head 内に OGPタグを出力するサンプルです。投稿ならアイキャッチ、無ければデフォルト画像を指定します。head.php 等で呼び出す形式とし、出力順やプロパティ（og:image:alt など）も含めて整えるとよいです。タグの重複を防ぎ、タグの property 値が正しい URL を指していることを確認します。
OGP画像が反映されない・表示が変になる場合の対処法とデバッグ
OGP画像を設定したのに実際にSNSで意図した通り表示されないケースは多数あります。こうしたトラブルを解決するための確認ポイントと具体的な対策をまとめます。効率よくチェックできるよう、デバッグ手順をマスターすることが重要です。
タグが重複していないか確認する
SEOプラグインとテーマの両方が同じ og:image 等のタグを出力していると、どちらが採用されるか不定になります。ソースコードをブラウザで表示し、 og: で検索して重複がないか確認してください。重複していたら一方を無効化するか、テーマ側・プラグイン側どちらかに統一する設定に切り替えます。
SNS側のキャッシュをクリアする方法
Facebook のシェアデバッガーや X（Twitter）のカードプレビューなど、SNS側にはキャッシュが存在していて、画像設定を変えても表示が更新されないことがあります。シェアデバッガーで「再度スクレイピング」などの操作をし、最新の meta タグを読み込ませることで正しい画像に更新されることが多いです。
ファイル形式・URL・パーミッションの問題
画像ファイルの形式が対応外であったり、URLが間違っていたり、画像配置場所のアクセス権限が不適切だったりすると画像が取得できません。PNG/JPG形式で保存し直す、ID による画像取得関数が正しく動作しているか、画像ファイルがサーバー上に存在するか、https 配信されているかなどを確認します。
おすすめの素材作成とデザインのコツ
OGP画像は技術的な設定だけでなく「魅せるデザイン」であることが重要です。ユーザーの目に留まり、内容が伝わる画像を作るためのポイントや素材を用意する際の注意点を紹介します。ブランドイメージやコンテンツ内容に沿ったデザインを安定して作るための工夫を知れば、見た目でも勝てるサイトになります。
中心にキャッチコピーや重要情報を配置する
SNSによってトリミングや表示される範囲が異なるため、画像の端に文字やロゴを配置すると切れてしまう可能性があります。そのため、重要なテキストは画像の中心に配置し、上下左右に安全域（余白）を設けることが推奨されます。小さい画面でも見やすいように、文字数は20文字程度に抑えるとよいです。
フォントサイズ・可読性の確保</
スマートフォンのタイムラインでは画像が小さく表示されるため、細かすぎる文字は読みにくくなります。**フォントサイズ40px以上**を目安とし、背景と文字のコントラストをしっかり取ること。シャドウやアウトラインを付けることで文字が背景に埋もれにくくなります。
ブランド統一とファイル命名規則の工夫
OGP画像は表紙やオープニングの顔となるため、サイトのブランド要素（ロゴ・カラーなど）を統一することが大切です。また、ファイル命名を「ogp-article-タイトル.png」や「ogp-default.png」など分かりやすくすることで、管理がしやすくなります。サイトのトップページ用・アーカイブ用・記事用にそれぞれデフォルト画像を用意しておくと、統一感が出ます。
まとめ
WordPressでSNSに正しく画像を表示させるためには、「OGP 画像 設定 WordPress」のキーワードを意識した設定が不可欠です。推奨される画像サイズ（1200×630px）・形式（JPEG/PNG）を満たし、アイキャッチやデフォルト画像の優先順位を明確にする設定を行うこと。コードでの手動設定もプラグイン利用もそれぞれ利点があります。タグの重複やキャッシュ、URL・アクセス権などに気を配れば、シェアされたときにユーザーに意図した画像が届きます。
設定完了後は必ず SNSのデバッグツールでプレビューを確認してください。見た目と技術の両方を満たすOGP画像設定で、記事のシェア力を強化し、サイトのSEOを着実に高めましょう。
スマートフォンのタイムラインでは画像が小さく表示されるため、細かすぎる文字は読みにくくなります。**フォントサイズ40px以上**を目安とし、背景と文字のコントラストをしっかり取ること。シャドウやアウトラインを付けることで文字が背景に埋もれにくくなります。
ブランド統一とファイル命名規則の工夫
OGP画像は表紙やオープニングの顔となるため、サイトのブランド要素（ロゴ・カラーなど）を統一することが大切です。また、ファイル命名を「ogp-article-タイトル.png」や「ogp-default.png」など分かりやすくすることで、管理がしやすくなります。サイトのトップページ用・アーカイブ用・記事用にそれぞれデフォルト画像を用意しておくと、統一感が出ます。
まとめ
WordPressでSNSに正しく画像を表示させるためには、「OGP 画像 設定 WordPress」のキーワードを意識した設定が不可欠です。推奨される画像サイズ（1200×630px）・形式（JPEG/PNG）を満たし、アイキャッチやデフォルト画像の優先順位を明確にする設定を行うこと。コードでの手動設定もプラグイン利用もそれぞれ利点があります。タグの重複やキャッシュ、URL・アクセス権などに気を配れば、シェアされたときにユーザーに意図した画像が届きます。
設定完了後は必ず SNSのデバッグツールでプレビューを確認してください。見た目と技術の両方を満たすOGP画像設定で、記事のシェア力を強化し、サイトのSEOを着実に高めましょう。
コメント