OGP画像とは？設定方法や表示の確認方法・推奨サイズを解説
SNSでの情報発信が当たり前となったいま、記事のシェアのされやすさはWebマーケティングにおいて無視できないポイントです。しかし、シェアされたときの表示が魅力的でないと、せっかくの記事もユーザーの目に留まりにくくなってしまいます。
そこで重要なのが「OGP（Open Graph Protocol）」の設定です。OGPを適切に設定することで、SNSでのシェア時に興味を引くタイトル、説明文、画像を表示させることができ、クリック率の向上が期待できます。
この記事では、OGPの概要から各SNSに最適化された設定方法、画像作成のコツまでわかりやすく解説します。
OGP（Open Graph Protocol）とは
OGPとは、SNSでWebページをシェアする際に表示される情報をコントロールする仕組みです。
FacebookやX（旧：Twitter）、LINEなどのSNSで記事のリンクを貼ると、タイトル・説明文・画像がまとまって表示されます。この表示内容をOGPで設定できます。
たとえば、Facebookで記事をシェアすると、大きな画像とともにタイトルや説明文が表示され、見る人が内容を把握しやすくなるのです。OGPを設定していない場合は単なるURLとして表示されるため、内容が伝わりにくくなってしまいます。
OGPの設定で期待できる効果
OGPの設定により、WebサイトのPV数向上や事業のブランディング効果を期待できます。
具体的な3つのメリットを解説します。
- SNSでのシェアの促進
- 検索結果からの流入の促進
- ブランドイメージの浸透・向上
SNSでのシェアの促進
SNSでのシェアを狙うには、見る人の興味を引く魅力的な表示が大切です。
OGPを設定したページをSNSでシェアすると、単なるURLのテキストリンクではなく、画像やタイトルなどの関連情報が付いた状態でリンクが表示されます。そのため、SNSで記事がシェアされた際に記事の概要が伝わりやすくなるのです。これにより、そのSNSの投稿を見たユーザーが興味を持って記事を読んだり、さらに記事をSNSでシェアしたりする可能性が高まるでしょう。
検索結果からの流入の促進
検索エンジンはHTMLで記述するタイトルタグ（title）やメタディスクリプション（meta description）の情報以外にも、OGPの情報を読み取り、検索結果の表示に活用します。とくにタイトルと説明文は、検索結果のスニペット（説明文）として使われることがあります。
適切なOGP設定は検索結果での表示を魅力的にするため、クリック率の向上が期待できます。
ブランドイメージの浸透・向上
OGPを使うことで、SNSでの情報発信に一貫性を持たせることができます。
たとえば、画像のサイズや配置を統一したり、説明文のトーンを揃えたりすることで、企業やブランドとしての統一感が生まれます。
ユーザーの記憶に残りやすく、ブランドイメージの浸透・向上につながるでしょう。
OGP画像の基本的な設定方法
OGPは、HTMLファイルのhead要素内に必要な情報を記述することで設定できます。
まず、OGPを使用することを宣言するprefix属性を追加し、そのあとにページのタイトル、説明文、画像URLなどの情報をmetaタグで設定します。
- head要素にprefix属性を追加する
- metaタグに各種要素を追加する
以下では、実装方法や記述例を紹介します。
1.head要素にprefix属性を追加する
OGPを設定するには、まずHTMLのhead要素にprefix属性を追加する必要があります。
この属性はOGPを使用することを宣言するもので、検索エンジンやSNSに対して「このページはOGPに対応している」ことを伝えます。
prefix属性がないと、OGPの設定が正しく機能しない可能性があるので、必ず記述しましょう。
<head prefix="og: https://ogp.me/ns#">
2.metaタグに各種要素を追加する
OGPの情報は、metaタグを使って設定します。propertyという属性に「og:〇〇」という形式で項目を指定し、contentという属性に実際の内容を記述します。
基本的な項目として、サイト名、ページタイトル、ページの種類、URL、画像、説明文があります。
<meta property="og:site_name" content="さくらインターネット" /> <meta property="og:title" content=" OGP画像とは？設定方法や表示の確認方法・推奨サイズを解説" /> <meta property="og:type" content="article" /> <meta property="og:url" content=" https://cloud.sakura.ad.jp/column/ogp/" /> <meta property="og:image" content=" https://cloud.sakura.ad.jp/column/ogp.jpg" /> <meta property="og:description" content=" OGPの概要から各SNSに最適化された設定方法、画像作成のコツまでわかりやすく解説します。" />
サイト名の記載（og:site_name）
サイト名はog:site_nameで設定します。会社名やサービス名など、サイト全体を表す名前を設定します。
SNSでシェアされた際に、どのサイトの内容かを示す情報となります。
<meta property="og:site_name" content="さくらインターネット" />
ページタイトルの指定（og:title）
og:titleには、そのページの見出しとなるタイトルを設定します。
SNSでの表示ではもっとも目立つ位置に表示されるため、内容をわかりやすく表現する必要があります。
ただし、長すぎると途中で切れてしまうため、30〜40文字程度に収めることをおすすめします。
<meta property="og:title" content=" OGP画像とは？設定方法や表示の確認方法・推奨サイズを解説" />
ページタイプの指定（og:type）
og:typeでは、ページの種類を指定します。
おもなタイプとしてwebsite（トップページ）、article（記事ページ）、blog（ブログ記事）があります。
適切なタイプを設定することで、SNSでの表示が最適化されます。
<meta property="og:type" content="article" />
ページURLの指定（og:url）
og:urlには、シェアされるページの正確なURLを設定します。
絶対パス（https://から始まる完全なURL）で指定しなければなりません。
相対パス（現在のページからの相対的な位置関係を示すURL）で指定すると、正しく機能しない可能性があるので注意してください。
<meta property="og:url" content=" https://cloud.sakura.ad.jp/column/ogp/" />
サムネイル画像の指定（og:image）
og:imageには、SNSでシェアされた際に表示される画像のURLを設定します。この画像も絶対パスで指定する必要があります。
また、各SNSで推奨される画像サイズが異なるため、1200×630ピクセルのサイズで作成することをおすすめします（※詳細は後述）。
<meta property="og:image" content=" https://cloud.sakura.ad.jp/column/ogp.jpg" />
ページ説明文の指定（og:description）
og:descriptionには、ページの内容を簡潔に説明する文章を設定します。
SNSでシェアされた際に表示される説明文として使用されます。80〜90文字程度で、ページの概要がわかるように記述することをおすすめします。
<meta property="og:description" content=" OGPの概要から各SNSに最適化された設定方法、画像作成のコツまでわかりやすく解説します。" />
【SNS別】OGP画像の設定方法
FacebookやX（旧：Twitter）、LINEなど、SNSごとにOGPの設定方法や表示形式が異なります。
それぞれのSNSに合わせた最適な設定をおこなうことが重要です。
FacebookにおけるOGP設定
Facebookでは、基本的なOGP設定に加えて、Facebook専用のApp-IDを設定することができます。
App-IDを設定すると、Facebookインサイトでの分析が可能になり、投稿の反応や効果を測定できます。
App-IDは「Meta for Developers」から取得でき、以下のように設定します。
<meta property=”fb:app_id” content=” App-ID” />
X（旧Twitter）におけるOGP設定
X（旧：Twitter）では、「Twitterカード」と呼ばれる独自の表示形式を使用します。
基本的なOGPに加えて、以下のような設定が必要です。
<meta name="twitter:card" content="Twitterカードのタイプ" /> <meta name="twitter:site" content="@アカウント名" />
Twitterカードの指定
Twitterカードには4つのタイプがあります。適切なタイプを指定しましょう。
| Twitterカードのタイプ | 特徴 |
|---|---|
| summary（サマリー） | 正方形の画像とタイトル、説明文が表示される |
| summary_large_image （サマリーラージイメージ） |
横長（1.91:1）の画像が表示される |
| app | アプリ向けに使用する |
| player | 動画や音声を再生できる |
ユーザー名の指定
twitter:siteタグには、「@」から始まるXのアカウント名を設定します。
このアカウント名は投稿者として表示され、ユーザーがアカウントを直接フォローできるようになります。
LINEにおけるOGP設定
LINEは、FacebookのOGP設定をそのまま使用します。
特別な設定は必要ありませんが、画像が正方形に切り取られて表示されることがあるため、見せたい箇所は中央に配置することをおすすめします。
OGP画像の推奨サイズ
SNS共通の基本サイズとして、1200×630ピクセルが推奨されています。このサイズであれば、主要なSNSで適切に表示されます。
以下がSNSごとのおすすめの仕様です。
| SNS | 画像の推奨サイズ | 推奨アスペクト比 | 最適化のポイント |
|---|---|---|---|
| 1200×630px以上 | 1.91:1 |
|
|
| X（旧：Twitter） | 1200×675px以上 | 1:1または1.91:1 |
|
| LINE | 1200×1200px | 1:1 |
|
魅力的なOGP画像の作成方法
魅力的なOGP画像を作るには、「視覚的なインパクト」「読みやすさ」「ブランドの一貫性」という3つの要素のバランスが重要です。
個性的でインパクトのあるデザイン
SNSのタイムラインで目を引くデザインを作るには、色使いと構図が重要です。背景には鮮やかな色や写真を使い、テキストとのコントラストを確保します。
たとえば、濃い青の背景に白文字を組み合わせたり、写真の上に半透明の黒いオーバーレイを重ねて文字を読みやすくするなどの工夫ができます。
また、余白を効果的に使うことで、重要なポイントを際立たせることができます。
簡潔かつ強調されたテキスト
OGP画像内のテキストは、スマートフォンの小さな画面でも読めるように設計する必要があります。
文字数は15文字ほどに抑え、フォントサイズは画像の縦幅の10〜15%ほどとします（※あくまで目安であり、用途やデザインによって最適な文字数やフォントサイズは異なります）。
見出しとなる文字は画像中央ややや上部に配置し、補足情報は下部に小さめのサイズで入れると、情報の優先順位が明確になるでしょう。
一貫したブランドイメージ
ブランドの印象を強めるには、デザインの一貫性が重要です。
企業ロゴはつねに同じ位置（例：右下）に配置し、企業カラーを差し色として使用します。
フォントも企業の印象に合わせて選び、毎回同じものを使うことで、見た人が即座にブランドを認識できるようになります。
設定したOGP画像の確認方法
OGP設定が正しく機能するか確認するには、各種確認ツールを使うことがおすすめです。
- シェアデバッガー
- OGP画像シミュレーター
- ラッコツールズ・OGP確認
確認ツールの特徴をそれぞれ解説します。
シェアデバッガー
シェアデバッガーは、Facebookが提供する公式のOGP確認ツールです。URLを入力するだけで、Facebook上でのOGPの表示状態を確認できます。
最大の特徴は、実際のFacebook上での表示を正確に再現できる点です。また、OGPのエラーをチェックでき、「タイトルや説明文が長すぎる」や「画像サイズが不適切」などの問題も表示されます。
さらに、「もう一度スクレイピング」機能を使えば、OGPの設定を変更したあとのキャッシュをクリアして、最新の状態を確認することもできます。
とくにFacebook広告を出稿する予定がある場合は、このツールで表示確認をすることがおすすめです。ただし、使用にはFacebookアカウントが必要です。
【参考】シェアデバッガー
OGP画像シミュレーター
OGP画像シミュレーターは、画像をアップロードするだけで各SNSでの表示をプレビューできる便利なツールです。画像をドラッグ&ドロップするだけで、Facebook、X（旧：Twitter）、LINEなどでの表示をすぐに確認できます。
たとえば、LINEでは画像が正方形に切り取られるため、必要な部分が切れてしまわないかどうかを事前に確認できます。また、レスポンシブ対応の確認もでき、スマートフォンでの表示も同時にチェックできます。
新しいOGP画像の検証用に役立つでしょう。アカウント登録は不要です。
【参考】OGP画像シミュレーター
ラッコツールズ・OGP確認
ラッコツールズ・OGP確認は、URLを入力するだけでSNSでの表示をまとめて確認できる国産ツールです。
Facebook、X（旧：Twitter）、LINE、はてなブックマークなど、日本で人気の高いSNSの表示確認に対応しています。
PC版とスマートフォン版の表示を同時に確認でき、OGPの設定状況も一覧で表示され、必須タグの漏れなどもチェックできます。
ただし、開発中のサイトや非公開のページの確認には適していません。
【参考】ラッコツールズ・OGP確認
OGPが表示されない場合の対処法
OGPが正しく表示されない場合、原因はSNS側のキャッシュの残存とメタタグの設定ミスである可能性が高いです。
キャッシュの問題については、各SNSの確認ツールを使って解決できるケースがあります。たとえば、Facebookの場合は、シェアデバッガーで「もう一度スクレイピング」を実行することで、最新の情報に更新されます。
メタタグの設定ミスについては、まず必須項目であるog:title、og:image、og:urlが正しく設定されているか確認しましょう。
とくに画像については、「URLが正しいか」「推奨サイズになっているか」「ファイルサイズが制限を超えていないか」をチェックしてください。また、head要素内のprefix属性が正しく記述されているかも確認しましょう。
これらの対処をおこなっても改善されない場合は、ブラウザのキャッシュをクリアしたり、シークレットモードでアクセスしたりして、表示の確認をおこなうことをおすすめします。
ImageFluxで画像の悩みを解決
魅力的なOGP画像を作る際に手間となるのが、適切な画像サイズの設定です。さくらインターネットが提供するImageFluxはこの課題を簡単に解決します。
ImageFlux最大の特徴は、1枚の画像から動的にリサイズできる点です。
たとえば、FacebookのOGP用に1200×630ピクセル、X（旧：Twitter）用に1200×675ピクセル、LINE用に1200×1200ピクセルと、各SNSに最適なサイズの画像を、元となる1枚の画像から自動的に生成します。
SNSごとに個別の画像を用意する手間が省けるでしょう。
また、ImageFluxは画像の品質も最適化します。ファイルサイズを抑えながら、視覚的な品質を維持することで、ページの読み込み速度向上にも貢献します。
さらに、トリミングや明るさ調整、フィルター適用なども、URLパラメータの指定だけで実行できます。
画像最適化についてより詳しく知りたい方は、以下の記事をご覧ください。
まとめ
OGPの適切な設定は、SNSでの情報発信に欠かせません。
基本的な設定からSNSごとの最適化、画像サイズの調整まで、細かな配慮が必要になりますが、正しく設定することでコンテンツの価値を最大限に引き出せます。
とくに画像の最適化については、さくらインターネットが提供するImageFluxを活用することで負担なく対応できるでしょう。
1枚の画像から各SNSに最適なサイズの画像を動的にリサイズできる機能は、運用の手間を削減します。また、画質を維持しながらファイルサイズを最適化できるため、表示速度の向上にも貢献します。
OGPは単なる技術的な設定ではなく、UIを改善する重要なマーケティング手法です。継続的な改善と最適化をおこなうことで、より効果的な情報発信が可能になるでしょう。
ImageFluxチーム
さくらインターネットとピクシブで共同開発・提供している、クラウド画像変換サービス・ライブ配信エンジンサービス「ImageFlux」のチームです。
