OGPとは？SNSシェア画像の設定方法 - レンタルサーバーの教科書

OGPとは、WebページがFacebookなどのSNSでシェアされたときに、タイトル・説明文・画像・URLなどをどのように伝えるかを指定するためのメタ情報です。

OGPを正しく設定すると、URLだけを投稿した場合でも、ページタイトルやアイキャッチ画像を使ったリンクプレビューが表示されやすくなります。 WordPressではテーマやSEOプラグインがOGPを自動出力している場合があるため、まず現在の設定を確認してから追加します。

30秒でわかる結論

OGPはSNSへページ情報を伝えるためのメタ情報
基本はog:title・og:type・og:image・og:url
og:descriptionやog:site_nameも設定できる
SNSシェア画像はog:imageで指定する
WordPressではテーマ・SEOプラグインが自動設定している場合がある
複数の機能からOGPを重複出力しない
画像を変更してもSNS側のキャッシュで古い画像が残ることがある
FacebookはSharing Debuggerで取得内容を確認できる
OGPを設定しただけでSEO順位が上がるわけではない

OGPとは？

OGPは「Open Graph Protocol」の略です。 Webページに専用のメタ情報を追加し、そのページのタイトル・画像・URLなどを外部サービスへ伝えます。

一言でいうと

OGP＝SNSでURLが共有されたときの「ページ紹介情報」を指定する仕組みです。

Open Graph公式仕様では、Webページをソーシャルグラフ上のオブジェクトとして扱えるようにする仕組みとして定義されています。

OGPを設定すると何が変わる？

OGPが使われるSNSでは、URLを共有したときに次のような情報を取得できます。

ページタイトル
説明文
シェア画像
ページURL
サイト名
コンテンツ種別

イメージ

記事URLだけをSNSへ投稿
↓
OGP情報をSNS側が取得
↓
タイトル・説明・画像付きのリンクプレビューを生成

OGPがない場合でもSNS側がページ内の情報からプレビューを生成することはありますが、運営者が意図したタイトルや画像にならない場合があります。

OGPの基本4項目

Open Graph公式仕様では、基本となる4つのプロパティがあります。

プロパティ	役割
`og:title`	共有時に使うタイトル
`og:type`	ページの種類
`og:image`	共有時に使う画像URL
`og:url`	そのページを表すURL

最初に覚える4つ

初心者は、まずタイトル・種類・画像・URLの4項目を覚えれば十分です。

OGPの記述例

HTMLでは、ページのhead内にメタタグとして出力します。

基本例

<meta property="og:title" content="OGPとは？SNSシェア画像の設定方法">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/ogp/">
<meta property="og:image" content="https://example.com/images/ogp.jpg">

WordPress利用者が毎記事このコードを手入力する必要はありません。テーマやSEOプラグインで自動出力できる場合があります。

og:titleとは？

og:titleは、SNS上でページを紹介するときのタイトルです。

基本的にはページ内容が分かる簡潔なタイトルを設定します。記事タイトルと同じ内容にするケースが多くあります。

SNS用だからと内容を変えすぎない

実際のページ内容と関係の薄い刺激的なタイトルにすると、リンク先との不一致が生まれます。ページ内容を正確に表すタイトルを使ってください。

og:typeとは？

og:typeは、そのページが何の種類かを示します。

一般的なWebページではwebsite、記事ではarticleなどが使われます。 Open Graph公式仕様では、articleには公開日時・更新日時・著者・セクションなどの追加プロパティも定義されています。

例

トップページ：website
ブログ記事：article

og:imageとは？

og:imageは、SNSでURLが共有されたときに使用してほしい画像を指定する項目です。

シェア画像を整えたい場合、OGPの中でも特に重要な項目です。

画像で確認すること

ページ内容と画像が一致している
画像URLが外部からアクセスできる
HTTPSで正常に取得できる
重要な文字や人物が端に寄りすぎていない
画像容量が必要以上に大きくない

Open Graphでは、og:image:width・og:image:height・og:image:type・og:image:altなど、画像の追加情報も指定できます。

og:image:altも用意できる

Open Graph公式仕様では、og:imageを指定する場合、その画像の内容を説明するog:image:altも指定することが推奨されています。

SNSシェア画像のサイズはどう決める？

画像サイズはSNSや表示場所によって変わるため、「すべてのSNSで必ず同じ見え方になる固定サイズ」とは考えないでください。

実務では、横長の画像を用意し、主要なタイトル・ロゴなどを中央寄りの安全な範囲へ配置すると、トリミングされても情報が欠けにくくなります。

よく使われる作り方の一例

1200×630px前後の横長画像をベースにし、実際のSNSプレビューで見切れを確認します。

1200×630pxが絶対条件ではない

SNS側の仕様や表示UIは変更されることがあります。「このサイズなら必ず完全表示」と断定せず、実際のプレビューで確認してください。

og:urlとは？

og:urlは、そのページを代表するURLを指定します。 Open Graph公式では、このURLをそのオブジェクトの恒久的なIDとして使うと説明しています。

確認ポイント

現在の正規URLになっている
httpとhttpsを間違えていない
wwwあり・なしが正規URLと一致している
別ページのURLが誤って入っていない

SEOのcanonicalと目的は同一ではありませんが、URLの表記を正規URLへそろえておくと管理しやすくなります。

og:descriptionとog:site_name

Open Graphには基本4項目以外にも任意のプロパティがあります。

項目	意味
`og:description`	ページ内容の短い説明
`og:site_name`	サイト全体の名称
`og:locale`	言語・地域

SNS側がどの情報をどのように表示するかはサービス側で決まるため、設定したすべての項目が必ず画面に表示されるとは限りません。

WordPressでOGPを設定する方法

WordPressでは、大きく3つの設定方法があります。

方法	初心者向け判断
テーマ機能	テーマが対応していれば使いやすい
SEOプラグイン	記事ごとに管理しやすい
手動実装	開発知識がある場合

初心者はまず既存機能を確認

新しいプラグインを追加する前に、現在のテーマやSEOプラグインに「OGP」「SNS設定」「ソーシャル設定」などの項目がないか確認してください。

テーマとSEOプラグインの重複に注意

WordPressでは、テーマとSEOプラグインの両方がOGPを出力することがあります。

重複例

テーマ → og:imageを出力
SEOプラグイン → 別のog:imageを出力

複数の異なる値が出力されると、どの画像をSNSが採用するか分かりにくくなります。

設定前に確認

テーマにOGP機能があるか
SEOプラグインにSNS設定があるか
別のSNS専用プラグインを使っていないか
ページソースでOGPが重複していないか

OGP画像を変更したのに古い画像が出る理由

WordPress側でog:imageを変更しても、SNS側が以前取得した情報をキャッシュしていると古い画像が表示されることがあります。

1．WordPress側のOGP画像を変更

2．ページソースで新しいog:imageを確認

3．SNS側の再取得・デバッグ機能を利用

4．再度シェア表示を確認

つまり、「SNSで古い画像が出る＝WordPress設定が間違っている」とは限りません。まず実際のHTMLに新しいog:imageが出ているか確認します。

Facebook Sharing Debuggerで確認する

Metaは、Facebook共有時にページがどのように取得されるかを確認する「Sharing Debugger」を提供しています。

URLを入力すると、Facebook側が取得したOpen Graph情報やリンクプレビューを確認し、問題の切り分けに使えます。

確認するときのポイント

og:titleが正しいか
og:imageが目的の画像か
画像URLを取得できているか
og:urlが正しいか
警告・エラーが出ていないか

画像を変更した場合も、デバッガーで再取得させることで、新しい情報へ更新できる場合があります。

Xのシェア表示も同じ？

SNSごとにリンクプレビューの仕組みは完全に同じではありません。 Xなどでは、Open Graph情報に加えてサービス独自のカード用メタ情報が使われる場合があります。

そのため、Facebookで正常に見えるから他のSNSでも必ず同じ表示になるとは限りません。主要なSNSは実際に共有テストをして確認してください。

SNS側の表示仕様は変更されるため、テーマ・SEOプラグインの公式ドキュメントも定期的に確認すると安全です。

OGPを設定するとSEOに効果がある？

OGPを設定しただけでGoogle検索順位が上がる、と断定することはできません。 OGPの主な用途はSNSなどへページ情報を伝えることです。

ただし、SNS上でページ内容が分かりやすく表示されれば、ユーザーがリンクを判断しやすくなるという実務上のメリットはあります。

SEOタグと混同しない

OGPはcanonicalや構造化データ、title要素とは役割が異なります。検索順位を直接上げるための設定として扱わないでください。

OGP設定でよくある失敗

og:imageが未設定
全記事で同じ画像になっている
削除済み画像URLを指定している
httpの古い画像URLが残っている
テーマとプラグインでOGPが二重出力されている
画像変更後にSNS側のキャッシュを確認していない
タイトルや説明がページ内容と一致していない
重要な文字を画像端に置き、トリミングで見切れる

教科書判定

OGPは「SNSで共有されたときの名刺」として設定する

会社サイトやブログでSNSシェアの可能性があるなら、OGPは設定しておく価値があります。特にog:title・og:image・og:urlが意図した内容になっているか確認してください。

WordPress初心者はコードを直接追加する前に、テーマやSEOプラグインがすでにOGPを出していないか確認します。正しく出力されているなら、新しいプラグインを追加する必要はありません。

設定後は「管理画面で保存できた」だけで終わらず、ページソースとSNSの実際のプレビューまで確認する。 これがOGP設定の基本です。

よくある質問

Q．OGPは必ず設定しないといけませんか？

Webページを表示するための必須設定ではありません。ただしSNSでURLが共有されるサイトでは、タイトルや画像を意図どおり伝えやすくなるため設定する価値があります。

Q．OGP画像とアイキャッチ画像は同じですか？

役割は別ですが、WordPressテーマやSEOプラグインがアイキャッチ画像をog:imageとして自動利用することがあります。実際に何が出力されるかは利用中のテーマ・プラグイン設定を確認してください。

Q．OGP画像を変更してもFacebookで古い画像が表示されます。

Facebook側に以前の情報がキャッシュされている可能性があります。まずページソースのog:imageが新しいURLになっているか確認し、その後Sharing Debuggerで取得内容を確認してください。

Q．OGP画像は1200×630pxでないとダメですか？

絶対条件とは限りません。1200×630px前後は横長シェア画像としてよく使われる一例です。SNSごとに表示方法が変わるため、実際のプレビューで確認してください。

Q．OGPを設定するとSEO順位が上がりますか？

OGPを設定しただけで検索順位が上がるとは言えません。主な目的はSNSなどにページ情報を正しく伝えることです。

まとめ

この記事の結論

OGPはSNSにページ情報を伝えるための仕組み
基本4項目はog:title・og:type・og:image・og:url
og:imageでSNSシェア画像を指定する
og:descriptionやog:site_nameも利用できる
WordPressではテーマ・SEOプラグインが自動出力している場合がある
OGPの二重出力を避ける
画像変更後はSNS側のキャッシュも確認する
FacebookはSharing Debuggerで取得内容を確認できる
OGP設定そのものを検索順位対策とは考えない

OGPは、SNSでリンクが共有されたときにページの第一印象を整えるための基本設定です。 タイトル・画像・URLが正しく出力されているかを確認し、実際のSNSプレビューまでテストすることをおすすめします。

次に読む

「ファビコンとは？設定する理由と作り方」もあわせて確認してください。