OGP画像とは?設定しないとSNSで損する理由と作り方を解説【無料で簡単】

ブログの記事をX(旧Twitter)やFacebookでシェアした時、こんな経験はありませんか?

  • なんか画像が表示されない…
  • 変な画像が勝手に使われてる…
  • 他の人のブログはキレイなサムネイルが出るのに、自分のはテキストだけ…

これ、全部OGP画像の設定ができていないことが原因です。

OGP画像を正しく設定するだけで、SNSでシェアされた時の見栄えが劇的に変わり、クリック率が2〜3倍になることも珍しくありません。

この記事では、「OGPって何?」という基礎から、推奨サイズ、WordPressでの設定方法、無料ツールでの作り方まで、初心者でもわかるように解説します。

もくじ

OGP画像とは?

OGP(Open Graph Protocol) とは、WebページがSNSでシェアされた時に「どんなタイトル・説明文・画像を表示するか」を指定するための仕組みです。

もっと簡単に言うと、「SNSでリンクを貼った時に表示されるあのカード」を制御するための設定です。

OGPが設定されている場合

X(Twitter)やFacebookでブログのURLを投稿すると、以下のような「カード」が自動的に表示されます。

  • 記事のタイトル
  • 記事の説明文(ディスクリプション)
  • アイキャッチ画像(OGP画像)

この画像付きのカードが表示されるかどうかで、「クリックしてみようかな」と思ってもらえるかが大きく変わります。

OGPが設定されていない場合

OGP画像が未設定だと、以下のような残念な状態になります。

  • 画像が表示されず、テキストだけのリンクになる
  • サイトのロゴや関係ない画像が勝手に使われる
  • カード自体が表示されず、URLがそのまま出る

どれだけ良い記事を書いても、SNSでの見栄えが悪ければクリックされません。

Roy
OGPは「ブログの玄関」のようなものですね。

OGP画像を設定すべき3つの理由

理由①:SNSからのクリック率が大幅に上がる

画像付きのリンクカードは、テキストだけのリンクと比べてクリック率が圧倒的に高いです。

考えてみれば当然で、タイムラインを高速スクロールしている時に目を止めるのは「文字」よりも「画像」ですよね。魅力的なOGP画像は、スクロールする指を止める「ストッパー」の役割を果たします。

理由②:シェアされた時の「第一印象」が決まる

ブログ記事が誰かにシェアされた時、そのフォロワーが最初に目にするのはOGP画像です。ここでの第一印象が良ければ記事を読んでもらえますし、悪ければスルーされます。

つまり、OGP画像はブログへの「入口」のデザインであり、手を抜いていい場所ではありません。

理由③:LINEやSlackでも表示される

OGPはX(Twitter)やFacebookだけでなく、LINE、Slack、Discord、はてなブックマークなど、URLを貼ると自動でプレビューが表示されるサービスすべてで使われます。

友人にLINEでブログ記事のURLを送った時、キレイな画像付きカードが出るのと、味気ないURLだけが出るのとでは、印象がまったく違いますよね。

OGP画像の推奨サイズ

各SNSで最適に表示されるOGP画像のサイズは以下のとおりです。

プラットフォーム推奨サイズアスペクト比
X(旧Twitter)1200 × 628 px1.91 : 1
Facebook1200 × 630 px1.91 : 1
LINE1200 × 630 px1.91 : 1
はてなブックマーク1200 × 630 px1.91 : 1

見てのとおり、どのプラットフォームもほぼ同じサイズです。

結論として、1200 × 630 px(横長)で1枚作っておけば、すべてのSNSに対応できますね。

画像の端がトリミングされることがあるので、重要なテキストや要素は画像の中央寄りに配置するのがコツです。端ギリギリに文字を入れると、SNSによっては切れてしまいます。

OGP画像の作り方

OGP画像を作る方法はいくつかありますが、ブロガーが使いやすい方法を3つ紹介します。

方法①:Gazoll(ガゾール)でサクッと作る ── 最速の方法

当ブログが運営する無料ツールGazollのOGP生成機能を使えば、テキストを入力するだけでSNSシェアに最適なOGP画像が作れます。

作り方
  • GazollのOGP生成タブを開く
  • 表示したいタイトルテキストを入力・背景色などを選択
  • OGP画像をダウンロード

デザインに凝る必要がない、とにかく素早くOGP画像を用意したいという場合に最適です。

Roy
毎回Canvaを開いてテンプレートを選んで…という手間が不要になりますよ!

方法②:Canvaでデザインにこだわって作る

デザインにこだわりたい方は、Canvaを使うのがおすすめです。

Canvaには「OGP画像」のテンプレートは直接ありませんが、カスタムサイズで「1200 × 630 px」を指定すれば、OGP用のキャンバスが作れます。

テンプレート、フォント、イラスト素材が豊富なので、ブログのブランドイメージに合ったOGP画像を作り込めます。

ただし、1記事ごとにCanvaで凝ったOGP画像を作っていると、**記事を書く時間よりOGP画像を作る時間のほうが長い…**なんてことになりがちです。

普段の記事にはGazollで素早く作り、特に力を入れたい記事だけCanvaで作り込む──という使い分けが効率的です。

方法③:WordPressテーマの機能で自動生成

最近のWordPressテーマには、アイキャッチ画像を自動的にOGP画像として設定してくれる機能が搭載されています。

当ブログで使用しているSWELLの場合、アイキャッチ画像を設定するだけで、OGPタグが自動的に出力されます。

Roy
特別な設定は不要なので、ラクですね。

ただし、アイキャッチ画像とOGP画像では「最適なデザイン」が異なる場合があります。

  • アイキャッチ画像:記事ページの上部に表示される → 記事の雰囲気が伝わればOK
  • OGP画像:SNSのタイムラインで表示される → 一瞬で記事の内容が伝わるテキスト入りが効果的

なので、可能であればOGP用に別の画像を用意するのがベストです。

SWELLの場合、SEO設定の項目でOGP画像を個別に指定できますよ。

WordPressでOGPを設定する方法

SWELLの場合(当ブログのテーマ)

SWELLでは、OGPの基本設定はほぼ自動で行われます。やるべきことは以下の2つだけです。

① サイト全体のデフォルトOGP画像を設定する

「SWELL設定」→「OGP設定」から、サイト全体のデフォルトOGP画像を設定できます。これは、個別のOGP画像が設定されていない記事がシェアされた時に表示される画像です。

サイトのロゴやブランドイメージを反映した1200 × 630 pxの画像を1枚作って設定しておきましょう。

② 記事ごとにアイキャッチ画像を設定する

各記事にアイキャッチ画像を設定すれば、その画像が自動的にOGP画像として使われます。

さらにこだわりたい場合は、記事の編集画面下部にある「SEO SIMPLE PACK」の設定欄から、OGP画像を個別に指定できます。

Rank Mathを使っている場合

Rank Mathプラグインを使っている場合は、記事編集画面の「Social」タブからOGP画像を個別に設定できます。

FacebookとX(Twitter)で別々の画像を指定することも可能ですよ。

OGP画像を作る時の5つのコツ

コツ①:記事タイトルをテキストで入れる

写真だけのOGP画像よりも、記事タイトルが大きくテキストで入っている画像のほうがクリック率は高いです。

SNSのタイムラインでは画像が小さく表示されることもあるので、遠目でもタイトルが読めるサイズ感を意識しましょう。

コツ②:フォントサイズは大きめに

スマホでSNSを見ている人がほとんどなので、小さすぎるフォントは読めません。

タイトルは最低でも36px以上を目安にしましょう。

コツ③:背景はシンプルに

ごちゃごちゃした背景にテキストを重ねると、読みにくくなります。

単色の背景やグラデーション、半透明のオーバーレイを使って、テキストが際立つデザインにしましょう。

コツ④:サイト名やロゴを入れる

OGP画像の隅にサイト名やロゴを小さく入れておくと、ブランドの認知度向上に繋がります。

「あ、このブログの記事だ」とシェアされた時にわかってもらえると、リピーターの獲得にも効果的です。

コツ⑤:重要な要素は中央に寄せる

SNSによっては画像の上下左右が少しトリミングされることがあります。

タイトルテキストや重要な要素は、画像の中央80%のエリアに収まるように配置するのが安全です。

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

OGP画像を設定したら、実際に正しく表示されるか確認しましょう。

X(旧Twitter)の場合

Card Validatorhttps://cards-dev.twitter.com/validator)にURLを入力すると、X上でどのように表示されるかプレビューできます。

2026年現在、Card Validatorは仕様変更されている場合があります。その場合は、実際にXで非公開アカウントからURLを投稿して確認するのが確実です。

Facebookの場合

シェアデバッガーhttps://developers.facebook.com/tools/debug/)にURLを入力すると、OGPの設定内容と表示プレビューが確認できます。

キャッシュの注意点

一度SNSに読み込まれたOGP情報はキャッシュされます。OGP画像を変更した場合、すぐには反映されないことがあります。

Facebookの場合は、シェアデバッガーで「もう一度スクレイピング」を押すとキャッシュが更新されます。Xの場合は、しばらく時間をおけば自動的に更新されます。

OGP画像を設定してSNSで損しないようにしよう

OGP画像は「設定しなくてもブログ自体は表示される」ので、つい後回しにしがちです。

でも、SNSからの流入を増やしたいなら、OGPの設定は最優先でやるべき施策の1つです。

この記事のポイントをまとめておきましょう。

  • OGP画像は、SNSでリンクがシェアされた時に表示されるサムネイル画像
  • 推奨サイズは1200 × 630 px(全SNS共通)
  • 設定しないと画像なしの寂しいリンクになり、クリック率が激減する
  • 素早く作りたいならGazoll、凝ったデザインならCanva
  • WordPressテーマ(SWELL等)で自動設定もできるが、個別にOGP画像を用意するのがベスト

まだOGP画像を設定していなかった方は、まずGazollでサクッと1枚作って設定してみてください。

Roy
SNSからの流入が目に見えて変わるはずなので、ちゃんとOGP画像は設定しましょうね!

この記事が気に入ったら
フォローしてね!

記事をシェアする
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

「副業ベース」は、「副業を成功させたい人のためのベース(根拠地)」をコンセプトに、副業・WordPress・アフィリエイトに関する情報を発信するメディアです。ブログやアフィリエイトに関する情報だけでなく、これから副業を始めようとする人のコンテンツ全般も扱っています。

もくじ