WordPressのOGP設定完全ガイド｜プラグインあり・なし5パターン

WordPressのOGPの設定方法をお伝えします。プラグインあり、なしバージョンで詳しく解説します。

wordpressでOGP設定をする前に知っておきたいこと

OGPとは？基本のタグと役割

OGPは「Open Graph Protocol（オープン・グラフ・プロトコル）」の略で、簡単にいうと「URLをシェアしたときに、どんなタイトル・説明文・画像を表示するかをSNSに教えるためのルール」です。X（旧Twitter）やFacebook、LINEなど、いろいろなサービスがこの情報を参考にしてカードを作っています。

代表的なOGPタグと、その役割を一覧にしてみます。

タグ名	役割
og:title	シェアしたときに表示されるタイトル
og:description	タイトルの下に表示される説明文
og:url	そのページの正規のURL
og:type	ページの種類（article, websiteなど）
og:image	サムネイルとして使われる画像のURL
og:site_name	サイト全体の名前
og:locale	言語と地域の設定（例：ja_JP）

これらのタグをHTMLのhead内に書いておけば、SNS側がその情報を読み取って、リンクカードを組み立ててくれます。WordPressでOGPの設定をするというのは、「このタグをどんなルールで自動的に出すか」を決めていく作業だとイメージしてもらうと分かりやすいと思います。

WordPressとOGPの関係をざっくり整理

WordPressは、テーマやプラグインの機能を使って、OGPタグを自動で吐き出すことができます。どこが担当しているかはサイトによってバラバラで、大きく分けると次のようなパターンがあります。

• 使用しているテーマに、OGPやSNSシェア用の機能が用意されている
• All in One SEOなどのSEO系プラグインが、OGPタグをまとめて出力している
• functions.phpなどに自作のコードを書いて、OGPタグを出力している

ややこしいのが、「テーマもプラグインも、さらに自作コードも、全部がOGPを出そうとしている」状態です。こうなると、同じページに複数のOGPタグが並んでしまい、SNS側がどれを採用するか分からなくなります。その結果、意図しない画像やタイトルが表示されてしまうことが多いです。

これから設定していく前提として、「最終的に、OGPタグを出す場所を一つに決める」という意識を持っておくと、トラブルをかなり減らせます。

OGPを設定しないと何が困るのか

「そもそもOGPなんて設定しなくても、リンクはシェアできるし…」と思うかもしれません。実際、OGPがなくても、SNSはある程度勝手にタイトルや画像を拾ってくれます。ただ、そのままだと次のような困りごとが起きがちです。

逆に、OGPをきちんと整えておくと、「クリックしてほしい人に、読みたくなる形でページを見せる」ことができるようになります。検索からの流入だけではなく、SNSでのシェアや口コミからのアクセスを増やしたい場合、ここを整えるかどうかで結果が大きく変わってきます。

現状のwordpress ogpの設定を確認する手順

いまOGPタグが出ているかチェックする

まずは、自分のページにOGPタグが出ているかどうかを、ブラウザからサクッとチェックしてみます。やり方はとても簡単です。

• OGPを確認したいページをブラウザで開く
• ページ上で右クリックして「ページのソースを表示」を選ぶ
• 開いた画面で「Ctrl＋F（またはCommand＋F）」を押して、検索ボックスに「og:」と入力する

ここで、先ほど表にまとめたようなタグ（og:title、og:imageなど）が見つかれば、すでにどこかがOGPを出しているということです。何もヒットしなければ、基本的にはOGPタグがまだ設定されていないか、ごく限られた条件のページだけに出ている可能性が高いです。

テーマとプラグインの役割を整理する

次に、OGPを出しているのがテーマなのか、プラグインなのか、それとも両方なのかを整理します。ここをあいまいにしたまま新しい設定を足していくと、ほぼ確実にタグが二重になってしまいます。

• 使っているテーマの公式サイトやマニュアルで、「OGP」「SNS」「シェア」などの項目があるかを確認する
• インストール済みのSEO系プラグイン（All in One SEO、Yoast SEOなど）を開き、「ソーシャル」「OGP」といった設定項目がないかを見る

よくあるパターンとしては、テーマにもOGP機能があるのに、別途SEOプラグインでもOGPをオンにしていて、結果としてタグが2セット出てしまっているケースです。また、過去に使っていたプラグインを無効化したつもりでも、一部の設定が残っていることもあります。

理想は、「OGPの出力はこの機能に一任する」という担当を一つ決めることです。ここで整理しておくと、あとから不具合が出たときも原因を追いやすくなります。

OGP画像のおすすめサイズと作り方

OGP画像のサイズや比率がバラバラだと、SNS側で勝手にトリミングされて、文字が切れたり、変な位置で切れたりしがちです。毎回迷わないように、ひとつ基準となるサイズを決めておきましょう。

項目	おすすめ設定
画像サイズ	横1200px×縦630px前後
アスペクト比	約1.91:1の横長
ファイル形式	JPEGまたはPNG
ファイル容量	数百KB程度を目安に軽めに

このくらいのサイズをベースにしておくと、多くのSNSで違和感なく表示されます。画像に文字を入れる場合は、上下左右にしっかり余白をとって、小さく縮小されても読める大きさにしておくのがコツです。

アイキャッチ画像とOGP画像を同じにしてしまっても構いませんが、縦長のアイキャッチを使っているテーマの場合は、OGP用に横長のテンプレートを一枚用意しておくと安心です。共通のテンプレートを作っておけば、デザインの統一感も出ますし、毎回悩まずにサクッと画像を用意できます。

プラグインで簡単にwordpressのOGP設定を行う方法

SEO系プラグインに共通するOGP設定の流れ

All in One SEOやSEO SIMPLE PACKなど、代表的なSEO系プラグインには、だいたいOGPに関する設定画面が用意されています。細かい文言やデザインは違っても、進め方の流れはかなり似ています。

手順	内容
1	プラグインをインストールして有効化する
2	管理画面の「ソーシャル」や「OGP」などのメニューを開く
3	サイト全体で使うデフォルトのOGP画像を設定する
4	XやFacebookのアカウント情報を入力する欄があれば埋める
5	投稿ごとにタイトル・説明文・画像を上書きできるようにする

特に大事なのが「サイト全体のデフォルト画像」です。ここで設定した画像は、個別にOGP画像を指定していないページで使われます。たとえばロゴ入りのシンプルな画像や、サイトの雰囲気が伝わる一枚を選んでおくと、どのページもそれなりに整った見た目になります。

投稿ごとのOGPを設定するときのポイント

多くのSEO系プラグインは、投稿編集画面の下やサイドバーに、OGPの入力欄を追加してくれます。ここを使うと、検索結果向けのタイトルとは別に、SNS向けの見せ方を細かく調整できます。

• OGPタイトルでは、検索用タイトルに一言キャッチコピーを足して、クリックしたくなる言い方にする
• 説明文は、本文の一部ではなく「このページを読むとどうなるか」を短くまとめる
• OGP画像は、記事の内容がひと目でイメージしやすいものを選ぶ

たとえば、検索用タイトルが「ブログの始め方を解説」の場合、OGPタイトルは「ゼロからでもできるブログの始め方｜つまずきやすいポイントも解説」のように、もう少し感情に寄せた表現にしてもいいでしょう。このように、検索とSNSで見せ方を少し変えてあげるだけでも、クリックされる確率は変わってきます。

よくあるつまずきと注意点

プラグインでの設定は便利な一方で、いくつか「やりがちポイント」があります。事前に知っておくと、あとでハマりにくくなります。

設定を変更してもSNS上の見た目が変わらないときは、まずWordPressのキャッシュとブラウザのキャッシュを削除してから、もう一度シェアしてみてください。それでもダメな場合は、次の章で紹介するトラブルシュートの内容も合わせて確認してみましょう。

プラグインなしでwordpressのOGP設定を行う方法

functions.phpでOGPを出力する考え方

プラグインを使わずにOGPを出す場合、よくある流れはこんなイメージです。

• functions.phpに「OGPタグを組み立てて出力する関数」を定義する
• wp_headというフックを使って、head内にまとめてタグを出す
• トップページか記事ページかなど、ページの種類によって使う情報を切り替える

たとえば、トップページならサイト全体のキャッチコピーや説明文を使い、記事ページならその記事のタイトルと抜粋を使う、といった具合です。画像についても、投稿にアイキャッチが設定されていればそれを優先し、なければデフォルト画像を出す、といったルールをあらかじめ決めておきます。

いきなりコードを書き始めるより、「この種類のページでは、タイトルはここから取る」「画像はこれを優先する」という条件を紙にメモしてから実装すると、迷いにくくなります。

header内に入れるべき主なOGPタグ

最終的にHTMLのhead内に出力されるのは、先ほどから何度か出てきている基本的なOGPタグです。プラグインを使わずに設定する場合も、押さえるべき内容は同じです。

• <meta property=”og:title” content=”ページのタイトル”>
• <meta property=”og:description” content=”ページの説明文”>
• <meta property=”og:url” content=”ページのURL”>
• <meta property=”og:type” content=”articleまたはwebsite”>
• <meta property=”og:image” content=”OGP画像のURL”>
• <meta property=”og:site_name” content=”サイト名”>

加えて、X向けのタグとして次のようなものを入れることも多いです。

• <meta name=”twitter:card” content=”summary_large_image”>
• <meta name=”twitter:site” content=”@あなたのアカウント”>

コードを編集するときは、必ず子テーマ側のfunctions.phpを使い、作業前に全体のバックアップをとっておきましょう。1文字のタイプミスが原因で画面が真っ白になる、といったトラブルも珍しくありません。

プラグインあり／なしのメリット・デメリット比較

ここまでの内容を踏まえて、プラグインでの設定と、コードでの設定の違いをまとめておきます。迷っている方は、自分に合うほうを選ぶといいと思います。

方法	メリット	デメリット
プラグインあり	管理画面から設定できて分かりやすい、投稿ごとのOGP編集が簡単	プラグインが増えると表示速度や管理が重くなる可能性がある
プラグインなし	余計な機能がなく軽い、細かいカスタマイズがしやすい	PHPやWordPressの仕組みへの理解が必要で、ミスすると画面が真っ白になるリスクがある

「あまり時間をかけずに、とにかくOGPを整えたい」という場合は、まずはプラグインを使うのが現実的です。そのうえで、サイト運営に慣れてきたら、必要な部分だけコードでカスタマイズする、というステップに進むのも良い選択です。

OGP設定後に必ずやりたいチェックとトラブルシュート

シェア前に確認したいチェックリスト

OGPは、画面上の設定だけ見ていても実際の仕上がりが分かりにくいので、かならずSNS上でプレビューを確認しておきましょう。おすすめのチェックポイントは次の通りです。

数ページだけでも実際に試してみると、自分のサイトのOGP全体の傾向がつかめてきます。「ここを変えたほうが良さそうだな」という感覚もつかみやすくなるので、最初にいくつか代表的なページで試しておくと安心です。

OGP画像が表示されないときの原因

OGPで特に多いトラブルが、「画像が出ない」「違う画像が出る」「サイズがおかしい」といったものです。よくある原因と、確認すべき場所をまとめました。

症状	よくある原因	チェックする場所
画像が出ない	画像URLのミス、相対パスになっている	ソースコードのog:imageの内容
昔の画像のまま	SNS側のキャッシュが残っている	SNSのデバッガーや、しばらく時間をおいて再度シェア
画像が小さい	元の画像サイズが小さい、比率が合っていない	元画像のサイズとアスペクト比
意図しない画像が出る	ページ内の別画像が優先されている、OGPが二重になっている	ページ内のimgタグや、複数のOGPタグの有無

特に注意したいのが、「og:imageに絶対URLを指定する」という点です。相対パスを使うと、環境によっては正しく解釈されないことがあります。また、テーマとプラグインの両方でOGPが出ていると、どの画像を採用するかがSNS頼みになってしまうので、タグの重複がないかも一度確認してみてください。

それでも直らないときに見直したいポイント

設定を見直してもOGPがうまく反映されないときは、少し視点を変えて原因を切り分けていきます。次のような順番で確認すると、どこに問題があるのか見えやすくなります。

ここまで試しても原因が分からない場合は、OGPタグの部分だけを別環境にコピーして試すなど、少し技術的な切り分けが必要になるかもしれません。まずは、「テーマ」「プラグイン」「キャッシュ」の三つを順番に疑っていくのが現実的です。

よくある質問（wordpress ogp設定編）

Q1. wordpress ogp 設定は、必ずプラグインを使わないとダメですか？

A. いいえ、必ずしもプラグインが必要というわけではありません。テーマや自作のコードでOGPタグを出力できれば、それだけで十分運用できます。ただ、PHPやWordPressの仕組みがあまり分からない状態でいきなりコード編集をするのは、正直ハードルが高めです。

投稿ごとにOGPタイトルや説明文、画像を細かく変えたい場合や、安全に設定を進めたい場合は、まずはSEO系プラグインを使って整えるのがおすすめです。そのうえで、「もう少しここを変えたい」という部分が出てきたら、少しずつコードでカスタマイズしていくと、迷いにくくなります。

Q2. OGP画像とアイキャッチ画像は同じでもいいですか？

A. 同じ画像を使っても問題ありません。むしろ、運用の手間を減らしたい場合は、アイキャッチ画像をそのままOGPにも使うように設定しておくと、毎回個別に指定しなくて済むので楽です。

ただし、縦長のアイキャッチを使っているテーマや、比率がバラバラな画像を多く使っているサイトだと、SNS側でトリミングされたときに文字が切れることがあります。できれば、横長のテンプレートを一枚用意しておき、そこにタイトルや雰囲気が伝わるデザインを載せておくと安心です。

Q3. 複数のSNS向けに、OGPタグを分けて設定したほうがいいですか？

A. 基本のOGPタグは、どのSNSでも共通で使われるので、まずはそこをしっかり整えることを優先したほうが現実的です。そのうえで、必要に応じてX用のtwitter:cardなどを追加していくイメージがちょうどいいと思います。

最初から「X用はこれ、別のSNS用はこれ」と細かく分けようとすると、管理が大変になりがちです。まずは「どのSNSでも恥ずかしくない1枚」を目指してOGPを整え、それでも気になる部分があれば、少しずつ個別の調整を足していく、くらいの温度感がおすすめです。

まとめ：wordpressのOGP設定で今日からできる一歩

ここまでの内容を振り返ります

今日からできる一番簡単な一歩は、「よく読まれているページを1つ開いて、ソースを表示し、og:で検索してみること」です。そこから、「どこでOGPを出しているのか」「どんな画像やタイトルになっているのか」を把握し、プラグインを使うのか、コードで整えるのかを決めていけば、無理なくOGP周りを改善していけるはずです。