せっかく書いたブログ記事をXやLINEでシェアしたのに、画像が出なかったり、変なトリミングで見づらかったりしたことはありませんか?
その原因は、OGP(オージーピー)の設定かもしれません。OGPを整えておくと、SNSでシェアされたときにタイトル・画像・説明文がきれいに表示されて、クリックされやすくなります。
この記事では、OGPとは何かという基本から、最適な画像サイズ、WordPressでの設定方法、うまく表示されないときの確認方法までを、専門知識がなくてもわかるように解説します。
OGPとは?シェアされたときの「見た目」を決める仕組み
OGPは「Open Graph Protocol」の略で、ブログ記事などのページをSNSでシェアしたときに、どんなタイトル・画像・説明文を表示するかを指定するための仕組みです。
ブログのHTMLの中に、次のような情報を書いておくことで、SNS側がそれを読み取って表示します。
- og:title(タイトル)
- og:description(説明文)
- og:image(画像)
- og:url(記事のURL)
専門用語に見えますが、実際はWordPressのテーマやSEOプラグインが自動で出力してくれることがほとんどです。自分でコードを書く必要はありません。
OGPを設定するメリット
OGPを整えるメリットは、主に次の3つです。
- クリックされやすくなる:大きな画像つきのカードで表示されると、文字だけのリンクよりも目に留まります
- 記事の内容が伝わりやすい:タイトルと説明文が意図どおりに表示されるので、何の記事かがひと目でわかります
- ブランドの印象がそろう:どの記事も統一感のある画像になり、ブログの信頼感につながります
とくにXやLINE、Facebookなどで記事をシェアして集客したい場合は、OGPの見た目がそのままクリック率に関わってきます。
OGP画像の最適なサイズとルール
OGP画像でいちばん大切なのがサイズです。目安は次のとおりです。
| 項目 | 目安 |
|---|---|
| 推奨サイズ | 横1200px × 縦630px |
| 縦横比 | 約1.91:1 |
| ファイル形式 | JPGまたはPNG(互換性が高い) |
| 容量 | 5MB以下(軽いほうが表示が安定します) |
この比率にしておくと、X・Facebook・LINEなど主要なSNSで、大きく切り取られずに表示されやすくなります。
画像づくりのコツ
- 文字は中央寄りに配置する:SNSによって端が少し切れることがあります
- 文字を大きく、短くする:スマホの小さな画面でも読めるようにします
- 背景と文字のコントラストをはっきりさせる:読みやすさが大きく変わります
アイキャッチ画像のサイズ全般についてはブログのアイキャッチ画像の最適サイズを解説で詳しくまとめています。また、画像をAIで作りたい場合はAI画像生成でブログのアイキャッチを作る方法が参考になります。
WordPressでOGPを設定する3つの方法
WordPressでの設定方法は、大きく3つあります。
方法1:テーマの機能に任せる(いちばん手軽)
多くのWordPressテーマには、OGPタグを出力する機能がはじめから入っています。この場合、記事のアイキャッチ画像がそのままOGP画像として使われます。
つまり、アイキャッチ画像を1200×630pxの比率で作っておけば、追加の設定なしで最適化が完了します。まずはこの方法で十分な人も多いです。
方法2:SEOプラグインで設定する
「Rank Math」「All in One SEO」などのSEOプラグインを入れている場合は、プラグインのソーシャル(SNS)関連の設定からOGPを管理できます。
- サイト全体のデフォルト画像を決めておける
- 記事ごとにOGP画像やタイトル、説明文を変更できる
記事ごとに、SNS用のタイトルや画像を別に用意したいときに便利です。メニュー名や場所はプラグインやバージョンによって違うので、各プラグインの設定画面で「ソーシャル」「SNS」といった項目を探してみてください。
方法3:コードで直接書く(上級者向け)
テーマのheader部分に手動でOGPタグを書く方法もありますが、間違えるとサイトの表示に影響することがあります。特別な理由がなければ、方法1か方法2をおすすめします。
OGPが正しく表示されるか確認する方法
設定したら、実際にSNSでどう表示されるかをチェックしましょう。ここでは代表的な確認方法を紹介します。
- Facebookのシェアデバッガー:URLを入れると、OGPの読み取り結果と表示イメージを確認できます
- OGP確認ツール(無料のWebツール):URLを入れるだけで、設定内容をチェックできるものが複数あります
- 実際にシェアしてみる:非公開のグループや自分専用のアカウントで試すのも確実です
記事を公開する前後で、一度はこの確認をしておくと安心です。
OGPがうまく反映されないときの対処法
「設定したのに、古い画像のままだ」「画像が出ない」というときは、次の点を確認してみましょう。
- キャッシュが残っていないか:SNS側が古い情報を保存していることがあります。Facebookのシェアデバッガーで「再取得」すると更新できます
- 画像のサイズが小さすぎないか:小さすぎる画像は表示されないことがあります。1200×630pxを目安にしましょう
- プラグインが複数入って重複していないか:テーマとSEOプラグインの両方がOGPを出力すると、タグが重複して意図しない画像が使われることがあります
- アイキャッチ画像が設定されているか:そもそも画像がないと、OGP画像も出ません
とくに3つ目は見落としやすいポイントなので、変更後に表示がおかしいときはまず確認してみてください。
シェアされる記事のタイトルも重要なので、ブログ記事タイトルの決め方|SEOに強いコツを解説もあわせてどうぞ。
まとめ
この記事のポイントを振り返ります。
- OGPは、SNSでシェアされたときのタイトル・画像・説明文の見た目を決める仕組み
- 多くのテーマやSEOプラグインが自動で出力するので、自分でコードを書く必要はほぼない
- OGP画像は、横1200px×縦630px(約1.91:1)のJPG/PNGが目安
- 設定方法は、テーマ任せ・SEOプラグイン・コード直書きの3つで、初心者は最初の2つでOK
- 設定後はシェアデバッガーなどで表示を確認し、反映されないときはキャッシュや重複出力をチェックする
まずは自分のブログの記事を1つ、シェアデバッガーなどのツールで確認してみてください。ちょっとした見た目の改善が、SNSからのクリック数アップにつながるかもしれません。