OGPとは？メリットや設定方法、注意点をわかりやすく解説

【監修】株式会社ジオコード SEO事業責任者
栗原勇一

OGPはWebページがSNSでシェアされた際に、タイトルやディスクリプションを表示するためのHTML要素です。OGPを適切に設定することで、より多くのユーザーの関心を引きつけ、ページへの流入を増やせます。ただし、設定が適切でなければクリック率低下やトラブルの元ともなるため、OGPに関しては正しい知識が必要です。

本記事ではOGPの種類やメリット、設定方法、設定時の注意点を解説します。ぜひ参考にしてください。

OGPとは
OGPの種類
OGPを設定するメリット
OGPの設定方法
OGPを設定する際の注意点
- ページごとにOGPを設定する
- OGP設定が可能なサイトか確認する
OGPを適切に活用してユーザービリティを向上させよう

OGPとは

引用：Twitter, https://twitter.com/GEOCODEpr/status/1689431667403108353?s=20, （参照 2023-08-14）.

OGPとは「Open Graph Protocol」の略語です。OGPはSNSでコンテンツをシェアした際に、Webページの詳細情報を正確に伝えるためのHTML要素をいいます。Webページの詳細情報には、タイトルやイメージ画像、ディスクリプション（紹介文）、URLなどが含まれます。

例えばHTMLファイルのheadタグ内で、metaタグのproperty属性を使用し、Webページのタイトルやディスクリプションといった属性値を記述したとしましょう。OGPはこれらのような、Webページに関する記述の総称となります。OGPを設定しておくことで、SNSのクローラーがWebページの情報を正確に抽出でき、ユーザーの関心を引き出しやすくなります。

OGPの種類

OGPの設定項目は「og:url」「og:type」「og:title」「og:description」「og:image」の5種類です。

og:urlはWebページのURLを示します。URLを記述する際は相対パスではなく、絶対パス（フルパス）にする必要があります。絶対パスとは目的のページまでの道順を、ドメインを含めて省略せず記述するものです。一方、相対パスは現在のページから見た、目的のページまでの道順を示すものです。

og:typeはwebsite（トップページ）やarticle（ブログページ）など、ページの種類を示します。websiteやarticle以外の分類を使用したいなら、「The Open Graph protocol」のサイトでページの種類として使えるものを確認できます。

og:titleはWebページのタイトルです。タイトルに使える適切な文字数は、SNSやデバイスによっても異なりますが、一般的には30字程度までが目安です。

その他、og:descriptionはWebページのディスクリプションを示し、og:imageはページごとに表示するサムネイル画像のURLを示します。

OGPを設定するメリット

OGPを設定するメリットは、Webページの内容をアピールでき、ユーザーの関心を引きやすくなる点です。SNSのタイムライン上に、他の人がシェアした記事やWebページが表示されることは珍しくありません。シェアされたコンテンツについて概要が分かりやすく書かれていたり、気になる画像が表示されていたりすれば、ユーザーは内容に興味が湧き、ページを閲覧しやすくなります。

OGPの設定方法

OGPを設定する際は基本的な設定の他、TwitterやFacebookといった特定のSNSに向けた設定があります。自社が活用する媒体に合わせて、適切なOGPを設定することが重要です。それぞれの設定方法について解説します。

基本的な設定

HTMLソースコード内にmetaタグを記述することでOGPを設定可能です。手順は以下のとおりです。

・head要素へのprefix属性の追加

まずはOGPを機能させるため、各ページのhead要素にprefix属性「prefix=og: http://ogp.me/ns#」を、以下のように追加します。

・所定の要素をheaderタグ内にmetaタグで追加

次はheaderタグ内に、前述した5種類のmetaタグ（og:url、og:type、og:title、og:description、og:image）を使って、Webページの情報を追加します。

Twitterでの設定

Twitterに向けたOGPの設定では、基本的な設定だけでなく「twitter:card」と「twitter:site」の記述も必要です。twitter:cardとはTwitter上での表示タイプを指定するタグをいいます。マークアップの例は以下のとおりです。

Twitterカードの種類は「summary」、「summary_large_image」、「app」、「player」の4つがあります。summaryは最も一般的な形で、画像と記事タイトル、ディスクリプションが表示されます。summary_large_imageはsummaryと形態は同じですが、より画像が大きく表示される点が特徴です。

appはアプリ配布に使える表示カードです。アプリの名前やディスクリプション、アイコン、評価や価格などを表示できます。playerはTwitter上で動画や音楽などのメディアを再生させられるカードです。

twitter:siteはコンテンツの管理者のTwitterユーザーIDを指定するタグです。マークアップの例は以下のとおりです。

・<meta name=”twitter:site” content=”@Twitterユーザー名” />

Facebookでの設定

Facebookに向けたOGPの設定では、基本的な設定に加えて「fb:app_id」を記述します。マークアップの例は以下のとおりです。

・<meta property=”fb:app_id” content=”App-ID”>

FacebookのApp-ID（アプリID）とは15文字の半角数字で、OGPの設定やFacebook用アプリの作成に必要です。アプリIDは「Meta for Developers」から取得できます。

fb:app_idを設定していれば、ブログやサイトの管理者をFacebookに伝えられます。また、ページの閲覧者数や「いいね!」の数、訪問者が多い時間帯など、トラフィック分析ができる点もメリットです。

OGPを設定する際の注意点

OGPを設定する際はいくつか注意点があります。まず、OGPはページごとに設定する必要があります。また、事前にOGPが設定可能か確認しておくことも重要です。それぞれの注意点について解説します。

ページごとにOGPを設定する

OGPを設定する際はページごとに、それぞれの内容に合ったOGPの作成が必要です。例えば、異なるコンテンツで同じサムネイル画像が表示されていれば、ユーザーから同じ記事だと判断されてしまうかもしれません。同一の画像ばかり使っていると、ユーザーの関心が引けずクリック率が低下する可能性があります。

OGPを設定する際は、コンテンツの内容が一目でイメージできるような工夫が大切です。

OGP設定が可能なサイトか確認する

OGPを設定するなら、事前にサイトが対応しているか確認が必要です。確認しないままOGPを設定すると、思わぬ不具合の原因となります。例えば、Webページのシステムやテンプレートの中には、HTMLソースを簡単に調整できないものもあります。システムやテンプレートを不用意に変更してしまい、重要なコードを削除してしまうと、レイアウトが崩れたりエラーが発生したりといったトラブルになりかねません。

OGPが設定できるサイトなのか、しっかりと確認しておきましょう。