2025.11.07
このページをシェアする
目次OGPをご存じですか？せっかく時間と労力をかけて作り上げたWEBサイトなら、できるだけ多くの人に見てもらい、その価値を届けたいですよね。それを解決してくれるのが「OGP（Open Graph Protocol）」です。
OGPを正しく設定すれば、SNS上での見栄えが整い、クリック率（CTR）やシェア率も向上しやすくなります。そこで今回は、OGPの仕組み・設定手順・画像サイズ・SNS別の設定方法・反映確認のポイントをわかりやすく解説します。目次
＞＞【企業向け】SNS運営ができる複業人材をお探しなら「カイコク」
が
プロをマッチング！
OGP（Open Graph Protocol）とは
OGPとは「Open Graph Protcol」の略で、FacebookやX（旧Twitter）などのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。
これを設定しておくと、SNS上でURLが共有された際にタイトルや画像、説明文などが表示されるようになり、ユーザーに対してページの内容を詳しく伝えることができます。
例えばこちらの枠で囲まれた部分。ここがOGPです。
自社にぴったりのマーケターを
スピードアサイン！
OGPを設定するべき理由
OGP設定をしていなかった場合、X（旧Twitter）やFacebookなどのSNS側が自動的に説明文や画像を表示してしまい、ページ内容がユーザーに正しく伝わらなくなります。
適切に設定することで、どのようなページで何を伝えたいのかが明確になります。
そうすることで、共有されたユーザーの訴求率が高まり、より多くの人に記事を見てもらうことが可能になります。
また、後ほど詳しく述べますが、Facebookではこれを設定することで、分析や解析に役立つ「ページインサイト」の機能を利用することができるようになります。
OGP用metaタグの基本構成
OGPは、HTMLの<head>内に「metaタグ」を記述して設定します。
主な6つのタグと意味を以下で紹介します。
HTMLでのOGPの設定方法
まず、自社サイトがどのように作られているかを確認しましょうHTMLで作られたサイトの場合、 <head>（ヘッド）領域 にOGPを設定します。
以下のような OGP用metaタグ を <head> 内に追加することで、SNSに表示されるタイトル・説明文・画像などをコントロールできます。
基本的な手順は以下の通りです。
- 1. head要素に prefix="og: http://ogp.me/ns#" を追加する
- 2. headerタグ内のmetaタグで所定の要素を追加する
- 3. 必要に応じて「表示用の画像」を用意する
それでは、順番に見ていきましょう。
1.head要素に prefix="og: http://ogp.me/ns#" を追加する
ページでOGPを使用することを宣言するため、head要素にprefix属性を追加します。
<head prefix="og: http://ogp.me/ns#">
2. headerタグ内のmetaタグで要素を追加する
続いて、SNSで表示する情報を指定するためのmetaタグを記述します。
以下が基本的な構成です。
<meta property="og:url" content=" ページの URL" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページの説明文" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content=" サムネイル画像の URL" />
og:url
OGPを設定するWEBページのURLを指定します。URLは相対パス（例：/about.html）ではなく、絶対パス（例：https:///kaikoku.blam.co.jp/digi-fukugyo/casestudy）で記述する必要があります。
絶対パスとは、ドメインも含めて、目的のページまでの道順をすべて記述しているものを指します。
og:type
ページの種類を指定します。このタイプを設定することにより、SNS上での表示形式が変わってきます。
様々な種類がありますが、いくつか代表的なものを紹介します。
website: WebサイトのTOPページ
blog: ブログのトップページ
article: 記事ページなど、WebサイトのTOP以外のページ
product: 製品の紹介ページ
その他についてはこちらに記載されています。
og:title
ページのタイトルを指定します。
通常はサイトのものと同じ内容を設定しますが、og:titleに別のタイトルを設定するとそちらが優先して表示されます。文字数は20文字以内が適切です。
og:description
ページの説明文を指定します。SNS投稿でリンクと一緒に表示されるテキスト部分です。文字数は80~90文字が最適です。
og:site_name
ページのサイト名を記述します。サイト名やブランド情報は「og:title」ではなく、この「og:site_name」に設定します。og:titleとは別の役割で、「どのサイトの記事なのか」をSNSで明示する目的があります。
og:image
SNS上でシェアされた際に表示する画像を指定します。WEBページのURL同様にこちらも絶対パスで指定します。
Facebookでの設定を行う際には画像サイズを1200px✕630pxにすると最適な表示がされます。
WordPressでのOGPの設定方法
WordPressで運用しているサイトでは、HTMLを直接編集しなくても、プラグインやテーマ機能を使って簡単にOGP用metaタグを設定できます。ここでは、代表的な設定方法を紹介します。
プラグインでOGPを設定する
WordPressでは、専用プラグインを使うことで、HTMLやコードを触らずにOGPを設定できます。投稿画面からタイトル・説明文・画像などを直接入力できるため、初心者にも扱いやすい方法です。
プラグインを利用するメリット
- HTMLやコード編集が不要
- 投稿ごとに異なるOGP設定ができる
- 更新時に自動でタグを生成
- SNSプレビューを事前に確認できる
テーマ機能と違い、テーマを変更しても設定が維持されるのもプラグインの強みです。
ただし、テーマ側にもOGP機能がある場合、タグの二重出力（重複）に注意しましょう。
主なプラグインと特徴
これらのプラグインはいずれも、記事単位でOGPタイトルや説明文・画像を指定できるのが特徴です。また、SNSでのプレビュー確認にも対応しており、「どう表示されるか」を確認しながら最適化できるのがポイントです。
テーマ機能を使って設定する場合
最近のWordPressテーマ（例：SWELL、Cocoonなど）には、あらかじめOGPを自動出力する機能が組み込まれています。そのため、管理画面から簡単にOGPを設定できるのが特徴です。
多くのテーマでは、「外観」→「カスタマイズ」→「OGP設定」 または「SNSシェア設定」 のようなメニューが用意されており、タイトル・説明文・アイキャッチ画像を入力するだけで<head> 内に必要なOGPタグを自動生成してくれます。
しかし、テーマ変更時に設定がリセットされる可能性があったり、プラグインと併用するとmetaタグが二重出力されたりといった注意点もあり、プラグインかテーマ機能がどちらか一方に統一するのが望ましいでしょう。
SNS別のOGP設定
X（旧Twitter）でのOGP設定方法
X（旧Twitter）では基本的なOGP設定に加え、「twitter:card」と「twitter:site」を設定します。
<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />
twitter:card
X（旧Twitter）上での表示タイプを指定するタグです。
カードの種類は全部で4種類あり、ブログやWEBサイト用、アプリ配布用、動画サイト用とそれぞれ見せ方が変わってきます。
- summary
タイトル、説明、およびサムネイル。最も一般的な形です。
- summary_large_image
summary cardと同じ形で、画像の大きさがそれより大きいもの。Facebookのカードに近い形です。
- app
アプリ配布用の表示カード。アプリの名前や紹介文、アプリアイコンに加えて、評価や価格などの表示もされます。
- player
ビデオやオーディオなどのメディアを表示できるカード
twitter:site
@から始まる、コンテンツの作成者や管理者のX（旧Twitter）ユーザーIDを入力します。
FacebookでのOGP設定方法
Facebookでは、基本的なOGP設定に加えて「fb:app_id」を設定します。
<meta property="fb:app_id" content="App-ID（15文字の半角数字）">
App IDはfacebook for developers （https://developers.facebook.com/apps）にて取得することのできる、OGPの設定やFacebook用アプリを作成する際に必要なIDです。
fb:app_idとは？
サイトやブログの管理者をFacebookに伝えるためのタグです。
また、いいね！の数やどれくらいの人が見てくれたのか、どの時間帯がユーザーの目にとまりやすいかなどといった、Facebookからサイトへのトラフィック分析ができるFacebookインサイトを利用できるようになります。
LINEでのOGP設定方法
LINEもOGPの仕組みを利用してプレビューを生成しています。ただし、読み取るタグが限定されており、 以下の3つだけが使用できます。
- og:title
- og:description
- og:image
そのため、LINE向けにはこれら3要素を正確に設定しておくことが重要です。
また、LINEアプリ内でのプレビューは、友だちチャットやトークルームによって表示範囲や比率が変わることがあります。画像の端に文字やロゴを配置すると切れる可能性があるため、ロゴは中央寄りにデザインしておくといいでしょう。
LINEでの確認方法
自分のLINE「Keepメモ」に記事URLを送信すると、実際のプレビュー表示を確認できます。
OGP画像の推奨サイズは？
OGPでは媒体ごとに画像サイズが異なります。画像サイズが異なると、表示が崩れてしまう事がありますので注意しましょう。
おすすめの画像サイズとしてはFacebook、X（旧Twitter）共通で使用できるサイズで、縦横比1.91:1、1200×630ピクセルの画像を使用すると良いでしょう。
また、ファイルサイズはSNSの読み込み速度や表示品質に影響するため、JPEG形式で2MB以下に抑えるのがおすすめです。
適切な画像が表示されるかどうか、「シェアデバッガー」や「Card validator」といったツールで確認できます。
OGPが反映されないときの原因と対処法
OGPタグを設定したのに、SNSでシェアしたときに画像やタイトルが正しく表示されないことがあります。原因の多くは「キャッシュ」や「記述ミス」によるものです。
ここでは、よくある原因とその対処法を整理して解説します。
SNS側のキャッシュが残っている
OGPを修正しても反映されない主な原因は、SNS側のキャッシュ（保存データ）が残っているためです。FacebookやX（旧Twitter）などのSNSは表示速度を高めるため、一度取得したURLの情報をしばらく保持します。そのため、同じURLを再シェアしても新しいタイトルや画像がすぐには反映されません。
SNSによってキャッシュの有効期間は異なり、Facebookは数時間〜数日、Xでは数日程度保持されることがあります。そのため、修正が反映されるまで時間がかかる場合があります。
画像URLが間違っている／相対パスで指定している
OGP画像が表示されない原因で特に多いのが「URLの指定ミス」です。相対パスで記述している、または画像が存在しない場所を指定しているとSNSは正しく読み取れません。
対処法
- content属性には絶対パスを使用（例：https://example.com/images/ogp.jpg）
- 画像ファイルが実際に存在するかをブラウザで直接開いて確認
- URLの末尾にスペースや全角文字が混じっていないかチェック
ファイル形式やサイズが不適切
SNSによって対応していない画像形式（例：WebP）やサイズ超過があると、画像が反映されません。画像が重いと読み込みに時間がかかるため、JPEG形式・2MB以内を目安に最適化しましょう。
metaタグの記述ミス・重複
og: タグが複数記述されていたり、閉じタグや属性が誤っているとOGPが正しく認識されません。
対処法
- head内に重複したOGPタグがないか確認
- タグの書き方に誤字・全角スペースがないか確認
- WordPressの場合、テーマとプラグインの両方でOGP設定が有効になっていないかチェック
OGPを設定する3つのメリット
1. ブランドイメージの統一
SNSでURLをシェアしたとき、画像やタイトルの印象はそのままブランドの印象につながります。OGPを正しく設定することで、どのSNSでも同じトーンで統一された投稿を表示でき、企業やサービスの世界観をブレずに伝えることができます。
複数の担当者がSNS運用を行う企業では、OGP設定をしておくことで投稿ごとのデザイン・文面のばらつきを防止ができます。それにより、企業アカウント全体の統一感が生まれ、ブランディング効果が高まります
2. クリック率・シェア率向上
OGP画像が設定されていない投稿は、テキストとURLだけのシンプルな見た目になります。一方、画像付きでタイトルや説明文が整っている投稿は視覚的に目を引き、ユーザーの興味を喚起しやすくなります。
また、画像やタイトルが統一されている投稿は、ユーザーから「しっかりした情報源」として認識されやすく、結果的にシェアや保存といった行動にもつながります。
3. 情報を正しく伝達し、誤解を防ぐ
OGPを設定していない場合、SNSはページ内の任意のテキストや画像を自動で抽出して表示します。その結果、本文の一部や関係のない画像が表示され、内容を誤解されるリスクがあります。
特にキャンペーンやイベント告知などでは、意図した内容が正確に伝わるかどうかで成果が大きく変わるでしょう。OGP設定は、誤情報や印象のズレを防ぐための対策ともいえます。
OGP設定の注意点
OGPを設定する際の注意点がいくつかありますので説明していきます。
経験豊富なマーケターがすぐ見つかる
同じOGPを設定しない
ページ内容が違うのに、同じOGPを設定するのは避けましょう。
確かに、一つ一つOGP設定（og:title、og:description、og:imageなど）をしていくのは大変です。
しかし、せっかくユーザーがページをシェアしてくれたとしても、同じ画像やタイトルばかりでは意味がありません。
SNSでシェアされた時にユーザーの興味を引けるようにしっかりと設定しておきましょう。
画像サイズに注意する
OGPでは媒体ごとに画像サイズが異なります。画像サイズが異なると、表示が崩れてしまう事がありますので注意しましょう。
おすすめの画像サイズとしてはFacebook、Twitter共通で使用できるサイズで、縦横比1.91:1、1200×630ピクセルの画像を使用すると良いでしょう。
適切な画像が表示されるかどうか、「シェアデバッガー」や「Card validator」といったツールで確認することができます。
URLを正確に指定する
og:urlプロパティには、正確なURLを指定する必要があります。
間違ったURLを指定していたり、リンク切れになってしまうと機会損失につながってしまいますので気をつけましょう。
また、URLの指定方法は相対パスではなく、絶対パスで記述しますのでその点にも注意しましょう。
OGP設定を含めたSNS運用にお悩みなら
ここまでOGP設定について説明をしていきました。
SNSの運用では、OGP設定以外にも重要な設定やポイントがあります。
もし、SNS運用で成果が出ずにお悩みならSNS運用のプロに依頼してみてはどうでしょうか？
複業人材の起用であれば、正社員の採用よりもお手軽です。
社内にノウハウや知見も残るため、代理店に依頼するよりも中長期的にメリットがありおすすめです。
SNS運用のプロ人材なら「カイコク」にお任せください
もし、SNS運用のプロ人材をお探しでしたら「カイコク」にお任せください。
カイコクでは10,000名以上のマーケターが登録しており、SNS運用、SNS広告のスペシャリストが多数登録。
専任コンサルタントが課題をヒアリングし、課題解決ができる最適な人材を紹介します。
マッチングまでは無料ですので、お気軽にお問い合わせください。
マーケティング人材をお探しの方必見！
OGPに関するQ&A
Q1. OGPを設定しないとどうなる？
OGPを設定していない場合、SNSが自動的にページ内の情報を読み取り、プレビューを作成します。しかしこのとき、意図していない画像やテキストが選ばれてしまうことがあります。
たとえば、本文中の小さな画像がサムネイルとして表示されたり、説明文が途中で切れてしまったりするケースも少なくありません。このように、SNSでの見え方が不安定になると、ユーザーに誤った印象を与えてしまうこともあります。そのため、正しい情報を伝えるためにも、OGP設定は欠かせません。
Q2. OGPはSEOに効果はある？
OGPタグを設定しても、それ自体が検索順位に直接影響するわけではありません。Googleなどの検索エンジンは、OGPをランキング要素として評価はしていません。ただし、SNSで見やすく整った投稿はクリックされやすく、サイトへの訪問数増加につながるでしょう。
Q3. X（旧Twitter）用とFacebook用で別画像にできる？
X（旧Twitter）とFacebookでは、それぞれ独自のタグ仕様が用意されています。そのため、SNSごとに異なる画像を指定できます。
記述例
<meta property="og:image" content="https://example.com/ogp-facebook.jpg">
<meta name="twitter:image" content="https://example.com/ogp-twitter.jpg">
このように設定すると、FacebookではFacebook用の画像が、X（旧Twitter）ではTwitterカード用の画像がそれぞれ表示されます。ただし、SNSごとに見え方を変えすぎるとブランドの印象にばらつきが出ることがあります。そのため、デザインのトーンやロゴ配置などは統一しておくのがおすすめです。
OGP設定でSNSブランディングを強化しよう
OGP設定をすることにより、作成したページの内容をユーザーに正しく、詳しく知ってもらうことができるようになります。さらに、SNS上での拡散を狙うこともできます。たくさんの人に見てもらいたい、もっと多くの人に知ってもらいたい、そんな時はOGPの設定をしてみてはいかがでしょうか。
マーケティングDXなら
カイコク!!!
国内最大級※のマーケティング特化型複業マッチングサービス
※株式会社Habiny調べ（2025年7月時点）。マーケティング特化型副業サービスの登録者数を比較。
このページをシェアする
