WordPressのOGP設定のやり方|SNSでシェアされたときの見え方を整える方法と、当サイト104記事の確認結果

自分の記事のURLをX(旧Twitter)やFacebookに貼ったとき、タイトルと画像がきれいなカード状に表示されるのを見たことがあるはずです。この表示を作っているのが「OGP(Open Graph Protocol)」という仕組みです。

OGPの設定が正しくできていないと、シェアしたときにタイトルが空欄になったり、意図しない画像が表示されたりして、読者にクリックしてもらえるはずの記事が損をしてしまいます。

この記事では、OGPの基本的な仕組みと、WordPress(Cocoonテーマ)での設定方法を、画像づくりのコツとあわせて解説します。当サイトのOGPの出力を、実際に調べた結果も紹介します。

OGPとは何か

SNSでシェアされたときの見た目を決める仕組み

OGPは、記事のURLがSNSやチャットアプリに貼られたときに、そのページのタイトル・説明文・画像をどう表示するかを、ページ側からあらかじめ指定しておく仕組みです。

指定がない場合、SNS側が自動的にページ内の情報を推測して表示しますが、うまく表示されないことも多く、シェアされた記事の印象を大きく左右します。

SNSだけでなく、LINEなどのチャットアプリでURLを送ったときにも、同じ仕組みで、カード状の表示が作られます。

何も設定しないとどうなるか

OGPが正しく設定されていないと、シェアされたときにタイトルが記事と無関係な文字列になったり、画像が表示されずに文字だけのシンプルなカードになったりします。

せっかく読者が記事をシェアしてくれても、見た目が整っていなければクリックしてもらえる確率は下がってしまいます。

SNSのタイムラインでは、画像がある投稿のほうが、目に留まりやすい傾向があります。画像の有無は、クリックされやすさに関わる大切な要素です。

CocoonテーマでのOGP設定方法

アイキャッチ画像と抜粋が使われる

Cocoonテーマでは、特別な設定をしなくても、記事に設定した「アイキャッチ画像」と「抜粋(excerpt)」が、そのままOGPの画像・説明文として使われる仕組みになっています。

つまり、記事ごとにアイキャッチ画像を設定し、抜粋欄に記事の内容を要約した1〜2文を入れておくだけで、基本的なOGP対策は完了します。

抜粋を空欄にしていると、本文の冒頭の文章が、代わりに使われることがあります。意図した文章にするために、抜粋は、記事ごとに入力しておきましょう。

サイト全体のOGP画像も設定できる

Cocoon設定の「SNS」タブなどから、アイキャッチ画像が未設定の記事に使われる「サイト全体の代替OGP画像」も指定できます。

すべての記事にアイキャッチ画像を設定するのが基本ですが、念のため代替画像も用意しておくと安心です。

設定画面の名称や場所は、テーマのバージョンによって変わる場合があります。見つからないときは、Cocoon設定の中で、OGPやSNSに関する項目を探してみましょう。

設定項目	OGPでの役割
アイキャッチ画像	シェア時に表示される画像になる
抜粋(excerpt)	シェア時に表示される説明文になる

正しく表示されているか確認する方法

SNSのデバッグツールで確認する

設定した内容が実際にどう表示されるかは、Facebookが提供する「シェアデバッガー」などのツールに記事のURLを入力することで確認できます。

公開したばかりの記事は情報が反映されていないことがあるため、ツール上で再取得(スクレイピング)し直す操作も覚えておくと便利です。

SNS側には、一度取得した情報が一定期間保存される仕組み(キャッシュ)があります。画像やタイトルを変更したのに反映されないときは、再取得を試してみましょう。

実際にSNSに下書き投稿してみる

デバッグツールを使わなくても、X(旧Twitter)などに下書き状態でURLを貼ってみれば、実際の表示イメージをその場で確認できます。

投稿する前にプレビューで見た目を確かめる習慣をつけておくと、表示崩れに気づきやすくなります。

スマートフォンとパソコンでは、カードの見え方が少し異なる場合があります。可能であれば、両方で確認しておくと安心です。

OGP画像を用意するときのコツ

OGPで表示される画像は、SNS上で小さく表示されることが多いため、次のようなコツを押さえておくと、見やすく仕上がります。

ポイント	おすすめの考え方
サイズ	横長で、1200×630pxが一般的な目安
文字	大きめの文字で、短く入れる
余白	端が切れることがあるため、大事な部分は中央に置く
形式	JPGやPNGなど、一般的な画像形式にする

画像の中の文字は、スマートフォンでは小さくなります。文字数を絞り、読みやすい大きさにしておきましょう。公開後のチェックは、記事公開後にやるべきSEOチェックリストにもまとめています。

設定は、次の順番で進めると迷いません。

1. 記事ごとに、アイキャッチ画像を設定する
2. 抜粋欄に、記事の内容を要約した1〜2文を入力する
3. 公開後、SNSのデバッグツールで、表示を確認する
4. 表示が古いときは、再取得を行う

当サイトのOGPの出力を、実際に調べた結果(実例)

ここでは、当サイト(伸びるSEO入門)の、OGPの出力を、実際に調べた結果を紹介します(2026年10月7日)。公開中の記事のHTMLを読み取って、確認しました。

出力されているタグ(記事「canonicalタグの使い方」の例)

タグ	出力されている内容
og:type	article(記事)
og:title	記事のタイトル
og:description	記事の抜粋
og:url	記事のURL
og:image	記事のアイキャッチ画像のURL
og:site_name	伸びるSEO入門
og:locale	ja_JP
twitter:card	summary_large_image(大きな画像つきのカード)
twitter:image	アイキャッチ画像のURL
twitter:domain	当サイトのドメイン

一方、og:imageの幅と高さ(og:image:width・og:image:height)、Facebookのアプリ用のID、X(旧Twitter)のアカウント名(twitter:site)は、出力されていませんでした。どれも、なくても、カードは表示されますが、必要に応じて、追加する項目です。

104記事の集計

項目	集計の結果
アイキャッチ画像を設定している記事	104本すべて
og:imageが出力されている記事	104本すべて
twitter:cardが「summary_large_image」の記事	104本すべて
og:descriptionが、記事の抜粋と一致する記事	104本のうち102本
アイキャッチ画像の大きさ	2560×1352が37枚・1024×541が33枚・1200×630が31枚・ほか3枚
縦横比が、1200×630と同じ(約1.91対1)のもの	104枚のうち103枚

アイキャッチ画像の大きさは、ばらばらです。ただし、縦横比は、ほとんどが、1200×630と同じ形です。そのため、SNSで表示されるときに、切り取られにくい形になっています。10月6日以降に作り直した画像は、1200×630です。

当サイトの課題

まず、og:descriptionが、抜粋と一致しなかった記事が2本あるため、原因を確認します。また、Facebookのシェアデバッガーなど、SNS側の表示の確認は、まだ行っていません。確認したら、この記事に追記します。

調べ方

1. 調べたい記事を開き、右クリックの「ページのソースを表示」を選ぶ
2. 検索(Ctrl+F または Command+F)で、「og:」を探す
3. og:title・og:description・og:imageなどが、期待どおりの内容になっているかを見る

OGP設定でよくある質問

OGPについて、初心者の方が疑問に思いやすい点をまとめました。

シェアしても、画像が表示されないのはなぜですか?

アイキャッチ画像が設定されていない場合や、SNS側に古い情報が残っている場合があります。まずはアイキャッチ画像を確認し、そのうえで、デバッグツールで再取得を試してみましょう。

抜粋は、必ず入力する必要がありますか?

必須ではありませんが、入力しておくと、シェアされたときの説明文を、自分で決められます。空欄の場合、本文の冒頭が使われることがあり、意図と違う内容になることもあります。

twitter:cardの「summary_large_image」とは何ですか?

X(旧Twitter)でURLが共有されたときに、大きな画像つきのカードで表示するための指定です。当サイトは、全記事に、この指定が出力されています。

アイキャッチ画像の大きさは、そろえたほうがよいですか?

縦横比をそろえておくと、SNSで表示されるときに、切り取られにくくなります。当サイトは、サイズはばらばらですが、縦横比は、ほとんどが、1200×630と同じです。新しく作る画像は、1200×630にそろえています。

OGP設定でよくある失敗例は?

よくある失敗は、次の3つです。

• アイキャッチ画像を設定せず、画像なしのカードになってしまう
• 画像の中の文字が小さく、シェアされたときに読めない
• 画像を変えたのに、SNS側の情報が古いままで、確認を忘れる

公開後に、一度、シェアの表示を確認する習慣をつけましょう。

まとめ:アイキャッチと抜粋を整えることがOGP対策になる

OGP設定は一見地味な作業ですが、記事がSNSで拡散されるかどうかに直結する重要なポイントです。

新しい記事を公開したら、忘れずにアイキャッチと抜粋をセットで確認する習慣をつけましょう。

確認するときは、次の順番がおすすめです。

1. アイキャッチ画像と抜粋を設定する
2. 公開後に、SNSのデバッグツールで表示を確認する
3. 画像を変えたときは、再取得を行う

SEOを基礎から順番に学びたい方は、SEO入門の進め方(はじめに)と学習ステップもあわせてご覧ください。