OGP画像とは？推奨サイズや設定方法・SNS別の確認方法を分かりやすく解説

WebページにOGPを設定するメリットは次の3つです。

・伝えたいことがユーザーに明確に伝わる

・画面占有率が高くなり訴求力が大きくなる

・拡散力が高まりCTRの向上につながる

OGPの設定に使用するタグには、さまざまな種類があります。基本的な設定に使うタグの概要と記述例は次の通りです。

●og:title

Webページのタイトルを指定できます。タイトルが長すぎると最後まで表示されないため、20文字程度を目安に設定しましょう。

<meta property="og:title" content="ページタイトルをここに記述" />

●og:type

コンテンツの種類を指定できます。企業のWebサイトのトップページなどには「website」、ブログやニュースサイトの記事ページなどには「article」を使用しましょう。

<meta property="og:type" content="Webページの種類をここに記述" />

●og:description

Webページの内容を表す説明文を指定できます。80～90文字以内を目安として、Webページの内容を簡潔に表現した文章を設定しましょう。

<meta property="og:description" content="Webページの説明文をここに記述" />

●og:url

WebページのURLを指定できます。OGPを設定するWebページのURLを絶対URLで入力しましょう。

<meta property="og:url" content="Webページの絶対URLをここに記述" />

●og:site_name

Webサイトの名前を指定できます。Webページの名前と間違えないように注意しましょう。

<meta property="og:site_name" content="Webサイトの名前をここに記述" />

●og:image

WebページがSNSでシェアされた際に表示するOGP画像を指定できます。画像のURLを絶対URLで入力しましょう。

<meta property="og:image" content="OGP画像の絶対URLをここに記述" />

OGP画像は、1,200×630ピクセル・比率約1.91:1を基本の目安とします。Facebookでも、高解像度の端末で最適に表示させるサイズとして、1,200×630ピクセル以上を推奨しています。

Facebookの開発者向けドキュメントでは、画像のサイズを次の3段階で示しています。

（出典：Meta for Developers「Images in Link Shares」）

Facebookは、フィードで画像を切り抜かずに表示させるため、比率をできるだけ1.91:1に近づけるよう推奨しています。ただし、SNSや表示形式によって画像の比率が異なるため、上下や左右が切り抜かれる場合があります。

OGP画像は、SNSやカードの種類によって表示比率が異なります。Facebookでは横長の画像が一般的で、X（旧Twitter）ではカードの種類によって横長または正方形で表示されます。

以下の表では、SNS別の画像サイズの目安と表示比率、切り抜かれ方を比較します。

※Facebookの画像サイズと比率はMeta公式の推奨仕様に基づいています。Xの画像サイズは一般的な制作目安であり、公式推奨値ではありません。実際の表示方法はSNSの仕様や閲覧環境によって異なります。

1枚のOGP画像を複数のSNSで共用する場合は、1,200×630ピクセルを制作時の目安にするとよいでしょう。ただし、表示領域によって画像の端が切り抜かれる可能性があるため、文字やロゴなどの重要な要素は中央付近に配置することが大切です。

OGP画像にはJPEGやPNGなどの一般的な画像形式を使用します。画像のファイルサイズは、Facebookでは8MB以下と定められています。X（旧Twitter）についても画像の容量制限や対応形式があるため、設定前に最新の公式仕様を確認してください。

画像形式は、使用する素材に合わせて選ぶことが大切です。写真を中心とした画像には、ファイルサイズを小さくしやすいJPEGが適しています。一方、文字やロゴ、図解が中心の画像には、輪郭を鮮明に保ちやすいPNGが向いています。

また、容量の上限以内であっても、ファイルサイズが大きいと読み込みに時間がかかる場合があります。画質を確認しながら、できるだけ軽量化しておくとよいでしょう。

Facebookでの見え方は、シェアデバッガーにページのURLを入力し、デバッグを実行して確認します。具体的な確認手順は、次の通りです。

シェアデバッガーには、Facebook側に保存されたOGP情報を取得し直す機能もあります。タイトルや説明文を修正した後は、「もう一度スクレイピング」を押すことで、古い情報を更新できます。

Xでのカードの見え方は、ポストの作成画面にURLを貼り付けて確認します。XはCard Validatorからプレビュー機能を削除した際に、ポストの作成画面で確認できると案内しています。具体的な確認手順は、次の通りです。

投稿前にプレビューが表示されない場合もあるため、必要に応じてテスト投稿で確認してください。また、Xではカードの情報がキャッシュされるため、ページを修正した直後は古い表示のままになる場合があります。

Facebook・X・LINE・はてなブックマークなど複数のSNSでの見え方は、URLを入力すると各SNSのカード表示を一覧できるOGP確認ツールで、まとめて確認できます。例えばラッコツールズの「OGP確認ツール」は、Facebook・X・はてな・LINEなど5媒体のカードを同時に表示でき、画像やタイトルを手入力して公開前の見え方を試す機能も備えた無料ツールです。

（出典：ラッコツールズ「OGP確認ツール｜無料でOGP画像とSNS表示を比較」）

カード表示は端末ごとに切り出し幅が異なるため、PC表示とスマートフォン表示の両方を見比べます。実機のアプリで最終確認する場合は、自分宛てのダイレクトメッセージにURLを送ると、一般に公開せずに表示を確かめられます。

OGP画像が表示されないときは、まずog:imageのmetaタグがhead内に正しいつづりで書かれているかを確認します。og:imgといったプロパティ名の誤りや、引用符の閉じ忘れがあると、SNSのクローラーが画像を認識できない場合があります。

WordPressなどで確認したいのは、テーマとプラグインの両方がOGPタグを出力し、意図しない画像が採用されていないかという点です。ブラウザでページのソースを表示し（WindowsのChromeならCtrl+U）、og:imageで検索してください。2つ以上見つかった場合は、それぞれの設定内容を確認し、テーマとプラグインによる意図しない重複があれば、どちらか一方のOGP出力機能を無効にします。

og:imageに指定したURLをブラウザのアドレスバーに直接入力し、画像が表示されるかを確かめます。404エラーになる場合は、ファイル名のつづりや大文字と小文字の違い、画像を置いたフォルダの誤りが主な原因の候補です。

ログインした状態でしか閲覧できない場所に画像を置いていると、SNSのクローラーは画像を取得できない可能性があります。ログイン済みのブラウザでは開けてしまうため、シークレットウィンドウなどログアウトした状態でURLを開き直してください。会員限定ページやパスワード保護をかけたテスト環境の画像は、外部から読み込めない場合があります。

SNSは一度取得したOGP情報をキャッシュするため、ページを修正しても、すぐにはシェア時の表示に反映されません。Facebookの場合は、シェアデバッガーで情報を取得し直すのが確実な方法です。Xはカードの情報をキャッシュするため、修正が反映されない場合は時間をおいてから投稿画面で再確認します。

Facebookでは、最初にページをシェアした人には画像が表示されない場合があります。対策として、公開直後にシェアデバッガーでURLを読み込み、シェアされる前に画像を取得させておくのが有効です。

（出典：Meta for Developers「Images in Link Shares」）

（出典：Yoast「X sharing not working」）

記事ページのOGP画像には、サイト共通の画像を使い回さず、記事ごとの内容を表す固有の画像を設定します。ロゴだけの共通画像では、投稿を見た人がどの記事なのかを判断できず、リンク先の内容と表示がずれた印象を与える場合があります。

記事ページには記事ごとのアイキャッチ画像、トップページなど記事以外のページにはサイト共通の画像を使う、と使い分けを決めておくのが管理しやすい方法です。

og:imageには、httpsから始まる完全なURL（絶対URL）を指定します。例えばhttps://example.com/images/ogp.jpgは絶対URLで、/images/ogp.jpgはルート相対パスです。SNSのクローラーはページの外から画像を取得するため、完全なURLを指定する必要があります。

CMSが画像のURLを自動出力している場合も、出力されたURLがhttpsから始まる絶対URLになっているかをページのソースで確認してください。

OGP画像を差し替えるときは、同じURLに上書きせず、ファイル名を変えて新しいURLを指定すると、キャッシュによる表示の不一致を避けやすくなります。Facebookでは、同じURLのまま画像ファイルだけを差し替えても、古い画像が表示され続ける場合があります。例えばogp-sample.jpgを差し替える場合は、ogp-sample-v2.jpgといった別名で保存し、og:imageのURLも書き換えましょう。

URLを変更した後は、シェアデバッガーで再取得を実行し、新しい画像が読み込まれたかを確認します。