OGPとは?初心者向けにわかりやすく解説|SNSで目を引く仕組みと設定方法

SNSでブログやサイトをシェアしたとき、タイトルや画像がきれいに表示されて「思わずクリックしたくなった」経験はありませんか? それを実現しているのが「OGP(Open Graph Protocol)」という仕組みです。

本記事では、OGPとは何か、なぜ設定すべきか、どのように設定するのかを初心者向けにわかりやすく解説します。SEO対策にもつながる重要な要素なので、ぜひご一読ください。

ゆかい編集長

この記事をおすすめな方

  • ブログを始めたばかりの初心者
  • SNSでのアクセスを増やしたい人
  • WordPressのSEO対策に取り組んでいる人
  • アイキャッチ画像の設定がうまくいかないと感じている人
  • OGPの基本的な意味と設定方法を学びたい人

OGPとは?基本の仕組みを解説

OGP(Open Graph Protocol)とは、Webページの情報をSNSで共有(シェア)したときに、タイトル・画像・概要などを正しく表示するための仕組みです。Facebook社が開発し、今ではX(旧Twitter)やLINEなど多くのSNSで活用されています。

HTML内にOGP専用の<meta>タグを記述することで、SNSにどんな情報を表示させるかをコントロールすることができます。

なぜOGPが重要なのか?クリック率・拡散力との関係

OGPを正しく設定することで、SNSでの見栄えが良くなり、ユーザーの注目を集めやすくなります

その結果
  • クリック率(CTR)が上がる
  • シェアされやすくなる
  • コンテンツの拡散力が高まる

逆に、設定していないとタイトルが省略されたり、画像が表示されなかったりと機会損失につながってしまうことがあります

OGPの設定に必要なタグ一覧と意味

以下は代表的なOGPタグです。
このタグをHTMLの<head>内に設定します。

基本的なOGPタグ

<meta property=”og:title” content=”記事のタイトル”>
<meta property=”og:type” content=”website”>
<meta property=”og:url” content=”ページのURL”>
<meta property=”og:image” content=”サムネイル画像のURL”>
<meta property=”og:description” content=”記事の要約”>
<meta property=”og:site_name” content=”サイト名”>

これらを正しく記述することで、SNS側に「こう表示してね」と伝えることができます。

WordPressでOGPを簡単に設定する方法

初心者にはプラグインの利用が最も簡単です。
おすすめのプラグインは以下の2つです。

All in One SEO

Yoast SEO

どちらもOGP設定が設定画面からできて、アイキャッチ画像なども自動で反映できます。

SNSで映える!OGP画像の作成方法とポイント

推奨サイズは「1200×630px」

OGP画像は、FacebookやX(旧Twitter)などで共通して使えるサイズが「1200×630px」です。比率でいうと「1.91:1」が目安。これに合わせて作ることで、SNS上で画像が切れずに綺麗に表示されます。

OGP画像に入れるべき要素

  • 記事タイトル(目立つ太字)
  • ロゴまたはサイト名(ブランド感を出す)
  • シンプルな背景(視認性UP)
  • 視線を引くカラー(青・赤系が有効)

Canvaなどの無料ツールを活用しよう

Canvaなどの無料デザインツールを使えば、デザイン経験がなくても簡単にOGP画像を作成できます。

Canvaの特徴は、

  • テンプレートが豊富
  • ドラッグ&ドロップで直感操作
  • カスタムサイズ指定も可能(1200×630px)

など初心者でもテンプレートを応用することで、簡単に魅力的な画像を作成することができます。
ぜひ、利用してみてください。他のデザインツールを使用しても大丈夫ですので、ご自身の使用しやすツールで行ってみてくださいね。

OGP用画像のファイル形式と容量に注意!

  • ファイル形式
    JPEGまたはPNG推奨
  • ファイルサイズ
    200KB以下を目安にしてください。(表示速度を考慮します)
  • ファイル名
    ogp-image.jpgなど、意味のある名前にしておくとSEO的にもOKです。

WordPressでの設定方法(プラグイン使用時)

【All in One SEO】や【Yoast SEO】などのSEOプラグインで、投稿ごとにOGP画像を指定できます。記事の編集画面で「ソーシャル」や「OGP」などのタブから、画像をアップするだけでOKです。記事のアイキャッチ画像がOGPになる場合もあります。

OGP画像は、ただの「おまけ」ではなく、SNS上での第一印象を決める非常に重要な要素です。自分で手軽に作れる時代だからこそ、ぜひ活用して、あなたのブログをもっと魅力的に見せていきましょう!

よくあるOGPのトラブルと対処法

  • 画像が表示されない
    → 画像サイズや形式(1200×630pxのJPG推奨)を見直す
  • 内容が更新されない
    → SNS側のキャッシュクリアが必要(例:Facebookのシェアデバッガー
     ※SNSのキャッシュは根強いので、切り替わりに1〜3日程度掛かる場合があります。

SNSごとのOGP表示の違い(Facebook・X(旧Twitter)など)

SNSごとに若干表示ルールが異なります。

Facebook

基本的なOGPタグで設定しているものをそのまま表示します。

X(旧Twitter)

Twitter Cards(twitter:cardタグ)という独自形式も併用して設定します。

X専用タグ

<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:site” content=”@ユーザー名”>
<meta name=”twitter:title” content=”ページのタイトル”>
<meta name=”twitter:description” content=”ページの説明”>
<meta name=”twitter:image” content=”画像のURL”>

LINE

トークとタイムラインで表示されるOGPタグになります。
タイトルと画像を優先的に表示(基本的なOGPを設定しておけば表示します。)

OGPは、ほとんどが基本的なOGPを参照しますが、X(旧Twitter)は独自形式を採用しているので、この2つを設定しておけば、大体対応しています。

OGPを活用してブログの集客力をアップしよう

OGPを設定するだけで、SNSからの流入が増え、ブログの集客力が格段にアップします。
無料でできる施策なので、記事を公開する前に必ず確認しておきましょう。

まとめ|OGP設定は初心者でもできる!

OGPは一見難しそうですが、基本的なタグを理解し、WordPressプラグインを使えば初心者でも簡単に設定できます。
SNS時代の今こそ、見た目も含めて「シェアされやすいブログ」にしていくことが大切です。