WordPressで作成したページをSNSでシェアしたとき、「画像が表示されない」「意図しないテキストが出てしまう」という経験はないでしょうか。この原因は、OGP(Open Graph Protocol)が正しく設定されていないことにあります。適切に設定すれば、SNSからのクリック率が2〜3倍に改善するケースも珍しくありません。実際に弊社が支援した中小企業サイトでは、OGP設定の見直しだけでFacebookからの流入が月間40%増加した事例もあります。
この記事では、WordPressでのOGP設定方法をプラグインあり・なしの両面から手順付きで解説します。SNS別の画像仕様比較や反映されないときの対処法まで、500サイト以上の運用実績をもとに紹介していきます。読み終えるころには、自分のサイトに最適なOGP設定を迷わず実装できるようになるはずです。
OGP(Open Graph Protocol)とは? SNSシェアを左右する重要な設定

OGPとは、Webページの情報をSNSに正しく伝えるためのメタデータ規格です。Facebookの親会社であるMeta社が策定したプロトコルで、HTMLの<head>タグ内にog:で始まるメタタグを記述して使用します。
FacebookやX(旧Twitter)、LINEなどでURLをシェアすると、投稿にはタイトル・説明文・画像がカード形式で表示されます。このカードに何が表示されるかを決めているのがOGPタグです。OGPが設定されていなければ、SNS側が自動的にページ内容を推測して表示するため、意図しない画像やテキストが表示される原因になります。
OGPタグの種類と役割
OGPで使用する主要なメタタグは以下の通りです。
| タグ名 | 役割 | 記述例 |
|---|---|---|
| og:title | SNSに表示されるタイトル | 記事やページのタイトル |
| og:description | SNSに表示される説明文 | 記事の概要(80〜120文字程度) |
| og:image | SNSに表示されるサムネイル画像 | 画像のURL(絶対パス) |
| og:url | ページの正規URL | そのページのパーマリンク |
| og:type | コンテンツの種類 | トップページはwebsite、記事はarticle |
| og:site_name | サイト名 | WordPressのサイトタイトル |
これらのタグをHTMLの<head>内に記述することで、SNSのクローラーがページ情報を正確に取得できるようになります。
実際のHTMLでは、次のような形で記述します。
<meta property="og:title" content="記事のタイトル" />
<meta property="og:description" content="記事の説明文" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="サイト名" />
OGPを設定しないとどうなるのか
OGPが未設定のままSNSでURLをシェアすると、いくつかの問題が発生します。
まず、サムネイル画像が表示されない、または関係のない画像が表示されるケースがもっとも多い問題です。SNS側はページ内の画像を自動取得しようとしますが、サイドバーのバナーやロゴ画像など、記事と無関係な画像を拾ってしまうことがあります。
次に、タイトルや説明文がSNS側の自動抽出に依存するため、意図しないテキストが表示されることがあります。ページ内のテキストを断片的に拾うため、文脈が崩れた状態で表示されるケースも少なくありません。
結果として、ユーザーの目に留まりにくくなり、クリック率が大幅に低下します。せっかくのシェアやリンクが流入につながらないのは、非常にもったいないことです。
設定で得られる3つのメリット

OGPを正しく設定することで得られるメリットは、単に「見た目が整う」だけではありません。ビジネス面でも明確な効果が見込めます。
SNSでのクリック率(CTR)が向上する
OGP設定の最大の効果は、SNSシェア時のクリック率向上です。 魅力的なサムネイル画像と適切なタイトル・説明文が表示されることで、タイムライン上でユーザーの目に留まりやすくなります。
テキストだけの投稿と、画像付きのカード表示の投稿では、ユーザーのエンゲージメントに大きな差が出ます。特にFacebookでは画像付き投稿のクリック率がテキストのみの投稿の約2.3倍というデータもあり、OGP画像の設定はSNS経由の流入を増やすうえで欠かせない要素です。
ブランドの認知度と信頼性が高まる
OGPを設定すると、SNS上でシェアされるたびに統一されたビジュアルとメッセージが表示されます。ブランドカラーやロゴを含んだOGP画像を用意しておけば、シェアされるほどブランドの認知度が高まっていきます。
逆に、画像が表示されなかったり、関係のない画像が出てしまったりすると、ユーザーに「このサイトは大丈夫だろうか」と不安を与えかねません。信頼性の面でも、OGP設定は重要な役割を果たしています。
意図しない表示を防ぎ、情報を正確に伝えられる
OGPを設定しておけば、どのSNSでシェアされても同じ情報が表示されるため、伝えたいメッセージをコントロールできます。これは企業サイトにおいて特に重要です。
たとえば、製品ページがシェアされたときに製品画像ではなくヘッダーのロゴが表示されたり、サービス紹介ページなのに全く関係ない文章が説明文として表示されたりすると、正確な情報が伝わりません。OGPはこうした「情報のコントロール」を可能にする仕組みです。
WordPressでOGPを設定する3つの方法

WordPressでOGPを設定するには、主に3つの方法があります。サイトの状況や技術レベルに応じて、最適な方法を選ぶことが大切です。
| 方法 | 難易度 | メリット | デメリット |
|---|---|---|---|
| SEOプラグインで設定 | 初心者向け | SEO機能と一括管理できる | プラグインが重くなりやすい |
| OGP専用プラグインで設定 | 初心者〜中級者 | 軽量でシンプル | SEO機能は別途必要 |
| functions.phpにコード追加 | 上級者向け | プラグイン不要で軽量 | コードの知識が必要 |
多くのWordPressサイトでは、すでに何らかのSEOプラグインを導入しているケースが大半です。その場合は、SEOプラグインのOGP機能を使うのがもっとも効率的でしょう。SEOプラグインを入れていない、またはOGP機能だけが欲しいという場合は、専用プラグインやコードでの対応を検討してください。
ここからは、それぞれの方法を具体的な手順付きで解説します。WordPressでSEO対策全般を進めたい方は、SEOプラグインおすすめ8選も合わせてご覧ください。
プラグインで設定する手順【3つのプラグインを比較】

プラグインを使えば、管理画面の操作だけでOGPを設定できます。ここでは代表的な3つのプラグインの設定手順を紹介します。
All in One SEOでのOGP設定手順
All in One SEO(AIOSEO)は、WordPress向けSEOプラグインのなかでも特に利用者が多いプラグインです。OGP設定機能も標準で搭載されています。
- WordPress管理画面から「プラグイン」→「新規プラグインを追加」をクリックする
- 検索欄に「All in One SEO」と入力し、インストール後「有効化」をクリックする
- 左メニューの「All in One SEO」→「ソーシャルネットワーク」を開く
- 「Facebook」タブでデフォルトのog:image画像をアップロードする
- 「Twitter」タブでカードタイプ(大きな画像付き推奨)を選択する
- 各投稿・固定ページの編集画面下部にある「AIOSEO設定」→「Social」タブで、ページ個別のOGP画像やタイトルを設定する
- 「変更を保存」をクリックして完了
All in One SEOの利点は、メタタグ・サイトマップ・OGPをひとつのプラグインで管理できる点です。ただし機能が豊富な分、サイトの表示速度に影響する場合があります。
SEO SIMPLE PACKでのOGP設定手順
SEO SIMPLE PACKは、日本人開発者が作成した国産SEOプラグインです。管理画面がすべて日本語で、必要最低限の機能に絞られているため、軽量で扱いやすいのが特徴です。
- 「プラグイン」→「新規プラグインを追加」で「SEO SIMPLE PACK」を検索・インストール・有効化する
- 左メニューの「SEO PACK」→「OGP設定」を開く
- 「基本設定」タブでデフォルトのOGP画像を設定する
- 「Facebook設定」タブでfb:app_id(任意)やデフォルトの画像を設定する
- 「Twitter設定」タブでカードタイプとTwitterアカウントを設定する
- 各投稿の編集画面で個別のOGP設定を行う
SEO SIMPLE PACKは動作が軽く、WordPress初心者でも迷わず設定できる設計になっています。国産テーマ「SWELL」との相性も良く、日本語サイトでの利用に適しています。
Eio SEO PackでのOGP設定手順(国産オールインワンという選択肢)
Eio SEO Packは、弊社(合同会社えいおう)が開発した国産WordPressプラグインです。OGP設定をはじめ、メタタグ・サイトマップ・リダイレクト・内部リンク最適化・パフォーマンス改善など、SEOに必要な機能をひとつに統合しています。
- Eio SEO Packをインストール・有効化する
- 管理画面の「Eio SEO Pack」→「ソーシャル設定」を開く
- デフォルトのOGP画像をアップロードする
- Facebookアプリ ID(任意)やTwitterアカウントを入力する
- カードタイプ(summary_large_image推奨)を選択する
- 各投稿・固定ページの編集画面でページ個別のOGP情報を設定する
Eio SEO Packの特徴は、買い切り型で年額サブスクリプションが不要な点です。管理画面は100%日本語対応で、複数のSEOプラグインを併用する必要がないため、プラグインの競合や表示速度への影響を最小限に抑えられます。
3つのプラグインの主な違いを比較すると、以下の通りです。
| 項目 | All in One SEO | SEO SIMPLE PACK | Eio SEO Pack |
|---|---|---|---|
| 価格 | 無料(Pro版あり) | 無料 | 買い切り16,500円 |
| OGP設定 | あり | あり | あり |
| 日本語対応 | 一部日本語 | 完全日本語 | 完全日本語 |
| サイトマップ | あり | なし | あり |
| リダイレクト管理 | Pro版のみ | なし | あり |
| 動作の軽さ | やや重い | 軽い | 軽い |
プラグインなしで設定する方法【functions.php】

プラグインを増やしたくない場合や、テーマ側でOGP出力を制御したい場合は、functions.phpにコードを追加する方法があります。この方法はPHPの基礎知識がある方向けです。
基本的なOGPタグのコード例
以下のコードをテーマのfunctions.phpに追加すると、OGPタグが自動出力されます。必ず子テーマのfunctions.phpに記述してください。親テーマに直接記述すると、テーマの更新時にコードが消えてしまいます。
function my_ogp_tags() {
if ( is_front_page() || is_home() ) {
$ogp_title = get_bloginfo('name');
$ogp_descr = get_bloginfo('description');
$ogp_url = home_url('/');
$ogp_type = 'website';
$ogp_image = 'https://example.com/default-ogp.jpg'; // デフォルト画像のURLに変更
} elseif ( is_singular() ) {
$ogp_title = get_the_title();
$ogp_descr = mb_substr( get_the_excerpt(), 0, 120 );
$ogp_url = get_permalink();
$ogp_type = 'article';
if ( has_post_thumbnail() ) {
$ogp_image = get_the_post_thumbnail_url( get_the_ID(), 'full' );
} else {
$ogp_image = 'https://example.com/default-ogp.jpg'; // デフォルト画像のURLに変更
}
} else {
return;
}
$ogp_site_name = get_bloginfo('name');
echo '<meta property="og:title" content="' . esc_attr($ogp_title) . '" />' . "\n";
echo '<meta property="og:description" content="' . esc_attr($ogp_descr) . '" />' . "\n";
echo '<meta property="og:type" content="' . esc_attr($ogp_type) . '" />' . "\n";
echo '<meta property="og:url" content="' . esc_url($ogp_url) . '" />' . "\n";
echo '<meta property="og:image" content="' . esc_url($ogp_image) . '" />' . "\n";
echo '<meta property="og:site_name" content="' . esc_attr($ogp_site_name) . '" />' . "\n";
}
add_action( 'wp_head', 'my_ogp_tags' );
上記コードでは、トップページとそれ以外のページでog:typeを切り替えています。アイキャッチ画像が設定されていない記事ではデフォルト画像を表示する仕組みです。esc_attr()やesc_url()によるエスケープ処理を必ず行い、セキュリティを確保してください。
Twitterカード用タグの追加方法
X(旧Twitter)はOGPタグに加えて、独自のTwitterカード用メタタグにも対応しています。以下のコードを先ほどの関数内に追加してください。
// Twitterカード用タグ(上記関数の return; の前、echo文の後に追加)
echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
echo '<meta name="twitter:site" content="@yourTwitterID" />' . "\n";
echo '<meta name="twitter:title" content="' . esc_attr($ogp_title) . '" />' . "\n";
echo '<meta name="twitter:description" content="' . esc_attr($ogp_descr) . '" />' . "\n";
echo '<meta name="twitter:image" content="' . esc_url($ogp_image) . '" />' . "\n";
twitter:cardの値は、summary(小さな画像)とsummary_large_image(大きな画像)の2種類があります。視認性の高いsummary_large_imageがおすすめです。タイムライン上で大きく表示されるため、ユーザーの目に留まりやすくなります。
コードを追加する際の注意点
functions.phpを直接編集する方法には、いくつかのリスクがあります。事前に把握しておきましょう。
必ずバックアップを取ってから作業すること。 functions.phpの記述ミスは、サイト全体が表示されなくなる「画面真っ白」の原因になります。FTPやファイルマネージャーからファイルを復元できる状態にしておいてください。
また、SEOプラグインとの重複出力に注意が必要です。All in One SEOやSEO SIMPLE PACKなどのプラグインをすでに使っている場合、OGPタグが二重に出力される可能性があります。プラグイン側のOGP出力をオフにするか、コードでの追加をやめるか、どちらかに統一してください。
WordPressのカスタマイズに不安がある方は、WordPress カスタマイズ方法9選で基本的なカスタマイズの進め方を確認しておくと安心です。
推奨画像サイズとSNS別の仕様を比較

OGPの設定で意外と悩むのが画像サイズです。結論から言えば、横1200px × 縦630pxで作成すれば、主要SNSすべてに対応できます。
全SNS共通で使えるOGP画像サイズ
各SNSにはそれぞれ推奨画像サイズがありますが、1200×630px(アスペクト比 1.91:1)が事実上の標準サイズです。この1サイズで作成しておけば、Facebook・X・LINE・はてなブックマークなど、主要なプラットフォームで美しく表示されます。
画像ファイルの容量は5MB以下に抑えてください。これを超えると、一部のSNSで画像が取得されない場合があります。ファイル形式はJPG・PNG・WebPに対応していますが、互換性の観点からJPGまたはPNGが無難です。
Facebook・X(Twitter)・LINEの画像仕様を比較
各SNSの画像仕様をまとめると、以下の通りです。
| SNS | 推奨サイズ | アスペクト比 | 最小サイズ | ファイル上限 |
|---|---|---|---|---|
| 1200×630px | 1.91:1 | 600×315px | 8MB | |
| X(Twitter) | 1200×628px | 1.91:1 | 300×157px | 5MB |
| LINE | 1200×630px | 1.91:1 | 200×200px | 10MB |
| はてなブックマーク | 1200×630px | 1.91:1 | 指定なし | – |
Facebookは画像が600×315px未満だと小さなサムネイルで表示されます。X(Twitter)のsummary_large_imageカードでは1200×628pxが推奨されていますが、1200×630pxとの2pxの差は実質的に影響しないため、1200×630pxで統一して問題ありません。
OGP画像を作成するときのポイント
OGP画像は「SNSのタイムラインで一瞬で内容が伝わるかどうか」がすべてです。以下のポイントを押さえて作成してください。
テキストを入れる場合は、画像中央に配置すること。 SNSによって画像の表示領域やトリミング範囲が異なるため、端にテキストを配置すると切れてしまうことがあります。重要な情報は中央の安全領域(上下左右に余白を持たせた範囲)に収めましょう。
フォントサイズは40px以上を推奨します。スマートフォンのタイムラインではOGP画像が小さく表示されるため、小さな文字は読めません。文字数は最大でも20文字程度に抑え、記事の内容がひと目で伝わるキャッチコピーを載せるのが効果的です。
デザインツールとしては、Canvaの無料プランでもOGP画像用のテンプレートが豊富に用意されています。「OGP」や「SNS サムネイル」で検索すれば、1200×630pxのテンプレートがすぐに見つかります。
設定を確認・デバッグする方法

OGPを設定したら、必ず各SNSでの表示を確認しましょう。設定ミスに気づかないまま公開してしまうと、シェアされるたびに意図しない表示が拡散されてしまいます。
Facebookシェアデバッガーの使い方
Facebookが提供する公式デバッグツール「シェアデバッガー」を使えば、OGPタグの設定内容と実際の表示プレビューを確認できます。
- シェアデバッガーにアクセスする
- 確認したいページのURLを入力する
- 「デバッグ」ボタンをクリックする
- OGPタグの読み取り結果とプレビューが表示される
- 情報を更新したい場合は「もう一度スクレイピング」をクリックする
シェアデバッガーでは、不足しているタグや推奨されていないサイズの画像がある場合に警告が表示されます。初めてOGPを設定した際は、必ずこのツールで確認する習慣をつけてください。
ラッコツールズでX・LINEの表示を確認する
ラッコツールズのOGP確認ツールを使えば、X(Twitter)やLINE、はてなブックマークなど、複数のSNSでの表示をまとめて確認できます。
使い方はシンプルで、URLを入力するだけです。各SNSでのカード表示プレビューが一画面で確認できるため、SNSごとに個別のデバッグツールを使う手間が省けます。画像がどの範囲でトリミングされるかのシミュレーションも表示されるため、画像のデザイン確認にも役立ちます。
ページソースで手動確認する方法
デバッグツールを使わなくても、ページのソースコードを直接確認する方法もあります。
- 確認したいページをブラウザで開く
- 右クリック →「ページのソースを表示」を選択する
- Ctrl + F(Mac: Cmd + F)で「og:」を検索する
<meta property="og:〜"のタグが正しく出力されているか確認する
この方法では、OGPタグが重複していないかも確認できます。SEOプラグインとテーマの両方がOGPタグを出力しているケースは実際に多く、ソースを見ることで初めて気づくことも少なくありません。
反映されないときのトラブルシューティング

OGPを設定したにもかかわらず、SNSで正しく表示されないケースは少なくありません。原因の多くはキャッシュ・タグの重複・画像の問題のいずれかに該当します。
キャッシュが原因で古い情報が表示される
もっとも多いトラブルが、SNS側のキャッシュです。OGP設定を変更しても、SNSが以前取得した情報をキャッシュとして保持しているため、古い表示のまま変わらないことがあります。
対処法:
- Facebookの場合:シェアデバッガーで「もう一度スクレイピング」をクリックしてキャッシュを更新する
- X(Twitter)の場合:ラッコツールズで再確認する。X側のキャッシュは時間経過で更新される
- LINEの場合:LINE内ブラウザのキャッシュが原因の場合が多い。PagePokeなどの外部ツールでキャッシュクリアを試す
- WordPress側のキャッシュプラグイン(WP Super Cache、W3 Total Cacheなど)を使用している場合は、サイト側のキャッシュも必ずクリアする
OGPタグが重複している
SEOプラグインとテーマの両方がOGPタグを出力しているケースは、実務でもよく遭遇するトラブルです。タグが重複していると、SNSのクローラーがどちらの情報を採用するか不定になり、意図しない表示になることがあります。
確認方法:
ページのソースコードを表示し、og:titleやog:imageで検索してください。同じタグが2回以上出力されていれば、重複が発生しています。
対処法:
- SEOプラグインでOGPを管理する場合 → テーマのOGP出力機能をオフにする
- テーマやfunctions.phpで管理する場合 → SEOプラグインのソーシャル設定を無効化する
- 出力元が特定できない場合 → 有効化しているプラグインをひとつずつ無効化して原因を特定する
画像サイズや形式が条件を満たしていない
画像に関するトラブルも多く見られます。以下のチェックリストで確認してください。
- 画像URLが絶対パスか:相対パス(
/images/ogp.jpg)ではなく、絶対パス(https://example.com/images/ogp.jpg)で指定する - 画像サイズが最小要件を満たしているか:Facebookは600×315px以上、X(Twitter)は300×157px以上が必要
- ファイルサイズが上限を超えていないか:5MB以下を推奨(Facebookは8MBまで対応)
- 画像URLにアクセスできるか:ブラウザのアドレスバーに画像URLを直接入力して、画像が表示されるか確認する
- SSL対応か:
http://ではなくhttps://で画像が配信されているか確認する
実務で遭遇したよくある失敗と注意点

弊社では500以上のWordPressサイトの構築・運用に携わってきましたが、OGP設定に関するトラブルは定期的に発生します。ここでは、実務の現場で実際に遭遇した失敗パターンと、その対策を共有します。
カスタム投稿タイプでOGPが出力されない。 WordPressの標準的な「投稿」「固定ページ」ではOGPが正常に出力されるのに、カスタム投稿タイプ(製品ページ、実績ページなど)ではOGPが出力されないケースがあります。これはSEOプラグインの設定で、カスタム投稿タイプがOGP出力の対象に含まれていないことが原因です。プラグインの設定画面で、対象となるコンテンツタイプを確認してください。
マルチサイト環境でOGP画像のURLがサブサイトのものにならない。 WordPressマルチサイトでは、OGP画像のURLがメインサイトのドメインで出力されてしまうことがあります。プラグインがマルチサイトに対応しているか確認し、必要に応じて個別のサブサイトでOGP設定を行ってください。
OGP画像のalt属性を設定していない。 OGPのog:imageタグにはog:image:altという代替テキスト用のプロパティがあります。アクセシビリティとSEOの両面で効果があるため、設定しておくことをおすすめします。特にFacebookはこのプロパティを重視する傾向があります。
ステージング環境のURLがOGPに残ったまま本番公開してしまった。 開発環境やステージング環境でOGPを設定した場合、本番移行後にURLが旧環境のままになっているケースがあります。公開前にソースコードを確認し、すべてのOGPタグが本番URLを指しているか確認する習慣をつけてください。
これらは実際に弊社のクライアントサイトで発生したトラブルです。OGP設定は「一度やったら終わり」ではなく、サイトの構成変更やプラグインの更新のたびに確認することが重要です。
SEO対策を一括で効率化するならEio SEO Pack

WordPressのOGP設定を含むSEO対策を効率的に進めたいなら、Eio SEO Packを検討してみてください。
Eio SEO Packは、OGP設定・メタタグ管理・XMLサイトマップ・リダイレクト・内部リンク最適化・パフォーマンス改善など、WordPressのSEOに必要な機能をひとつのプラグインに統合した国産オールインワンSEOプラグインです。
複数のプラグインを組み合わせる必要がないため、プラグイン同士の競合リスクがなく、OGPタグの重複出力といったトラブルも起きません。管理画面は100%日本語対応で、WordPressに詳しくない方でも直感的に操作できます。
価格は16,500円の買い切り型で、年額サブスクリプションは不要です。海外製SEOプラグインの有料版(年額数万円)と比較すると、長期的なコストを大幅に抑えられます。
OGP設定はもちろん、WordPress初期設定の段階から導入しておけば、SEO対策の基盤を効率的に構築できます。
SNS集客の成果はOGP設定の一歩から生まれる
WordPressのOGP設定は、SNSからの流入を増やすために欠かせない施策です。適切に設定すれば、シェアされたときの見た目が整い、クリック率の向上やブランド認知の強化につながります。
この記事のポイントを振り返ると、以下の通りです。
- OGPとは、SNSでのシェア表示を制御するメタデータ規格。設定しなければ意図しない表示になるリスクがある
- 設定方法は3つ:SEOプラグイン(All in One SEO / SEO SIMPLE PACK / Eio SEO Pack)、OGP専用プラグイン、functions.phpへのコード追加
- OGP画像は1200×630pxで作成すれば、主要SNSすべてに対応できる
- 設定後は必ずデバッグツールで確認する。Facebookシェアデバッガーとラッコツールズを活用する
- 反映されない場合はキャッシュ・タグ重複・画像の問題を順にチェックする
OGPの設定自体は、プラグインを使えば数分で完了する作業です。しかし、この数分の作業がSNS経由の流入に大きな差を生みます。まだ設定していない方は、この記事を参考にぜひ今日から取り組んでみてください。