カテゴリー
knowledge sns

OGPとは?設定するべき理由と設定方法について

せっかく作り、運営しているWEBサイトであれば、なるべく多くの方に見てもらいたいですよね。
今回は、SNSで多くの方に目にしてもらう、知ってもらうために大切なOGP設定について解説します。

OGP(Open Graph Protocol)とは

OGPとは「Open Graph Protcol」の略で、FacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのhtml要素です。

これを設定しておくと、SNS上でURLが共有された際にタイトルや画像、説明文などが表示されるようになり、ユーザーに対してページの内容を詳しく伝えることができます。

例えばこちらの枠で囲まれた部分。ここがOGPです。

OGPを設定するべき理由

OGP設定をしていなかった場合、TwitterやFacebookなどのSNS側が自動的に説明文や画像を表示してしまい、ページ内容がユーザーに正しく伝わらなくなります。

適切に設定することで、どのようなページで何を伝えたいのかが明確になります。
そうすることで、共有されたユーザーの訴求率が高まり、より多くの人に記事を見てもらうことが可能になります。

また、後ほど詳しく述べますが、Facebookではこれを設定することで、分析や解析に役立つ「ページインサイト」の機能を利用することができるようになります。

クリエイティブの課題解決ができる!

優秀なデザイナーに相談

基本的なOGPの設定手順

OGPはmetaタグをHTMLソースコード内に記述することで設定することができます。
基本的な手順は以下の通りです。

  • 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タグで要素を追加する

続いて、必要な設定項目の記述をしていきます。

<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は相対パス(*1)ではなく絶対パス(*2)で記述する必要があります。

※1 相対パス: 現在のページから目的のページまでの道順を記述するもの。「./casestudy.html」のように表します。

※2 絶対パス: ドメインも含めて、目的のページまでの道順をすべて記述するもの。「/kaikoku.blam.co.jp/digi-fukugyo/casestudy」のように表します。

og:type

ページの種類を指定します。このタイプを設定することにより、SNS上での表示形式が変わってきます。
様々な種類がありますが、いくつか代表的なものを紹介します。

website: WebサイトのTOPページ
blog: ブログのトップページ
article: 記事ページなど、WebサイトのTOP以外のページ
product: 製品の紹介ページ

その他についてはこちらに記載されています。
Open Graphプロトコル

og:title

ページのタイトルを指定します。
通常はサイトのものと同じ内容を設定しますが、og:titleに別のタイトルを設定するとそちらが優先して表示されます。文字数は20文字以内が適切です。

og:description

ページの説明文を指定します。文字数は80~90文字が最適です。

og:site_name

ページのサイト名を記述します。サイト名やブランド情報は「og:title」ではなく、この「og:site_name」に設定します。

og:image

SNS上でシェアされた際に表示する画像を指定します。WebページのURL同様にこちらも絶対パスで指定します。
Facebookでの設定を行う際には画像サイズを1200px✕630pxにすると最適な表示がされます。

TwitterでのOGP設定方法

Twitterでは基本的なOGP設定に加え、「twitter:card」と「twitter:site」を設定します。

<meta name="twitter:card" content="カードの種類" />
<meta name="twitter:site" content="@ユーザー名" />

twitter:card

Twitter上での表示タイプを指定するタグです。
カードの種類は全部で4種類あり、ブログやwebサイト用、アプリ配布用、動画サイト用とそれぞれ見せ方が変わってきます。

  • ・summary
    タイトル、説明、およびサムネイル。最も一般的な形です。
  • ・summary_large_image
    summary cardと同じ形で、画像の大きさがそれより大きいもの。Facebookのカードに近い形です。
  • ・app
    アプリ配布用の表示カード。アプリの名前や紹介文、アプリアイコンに加えて、評価や価格などの表示もされます。
  • ・player
    ビデオやオーディオなどのメディアを表示できるカード

twitter:site

@から始まる、コンテンツの作成者や管理者の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インサイトを利用できるようになります。

クリエイティブの課題解決ができる!

優秀なデザイナーに相談

まとめ

OGP設定をすることにより、作成したページの内容をユーザーに正しく、詳しく知ってもらうことができるようになります。
さらに、SNS上での拡散を狙うこともできます。

たくさんの人に見てもらいたい、もっと多くの人に知ってもらいたい、そんな時はOGPの設定をしてみてはいかがでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です