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

せっかく作り、運営しているWEBサイトであれば、なるべく多くの方に見てもらいたいですよね。

今回は、SNSで多くの方に目にしてもらう、知ってもらうために大切なOGP設定について解説します。

OGP（Open Graph Protocol）とは
OGPを設定するべき理由
– 基本的なOGPの設定手順
– TwitterでのOGP設定方法
– Facebookでの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設定の注意点

OGPを設定する際の注意点がいくつかありますので説明していきます。

同じOGPを設定しない

ページ内容が違うのに、同じOGPを設定するのは避けましょう。
確かに、一つ一つOGP設定（og:title、og:description、og:imageなど）をしていくのは大変です。
しかし、せっかくユーザーがページをシェアしてくれたとしても、同じ画像やタイトルばかりでは意味がありません。

SNSでシェアされた時にユーザーの興味を引けるようにしっかりと設定しておきましょう。

画像サイズに注意する

OGPでは媒体ごとに画像サイズが異なります。画像サイズが異なると、表示が崩れてしまう事がありますので注意しましょう。

おすすめの画像サイズとしてはFacebook、Twitter共通で使用できるサイズで、縦横比1.91:1、1200×630ピクセルの画像を使用すると良いでしょう。

適切な画像が表示されるかどうか、「シェアデバッガー」や「Card validator」といったツールで確認することができます。

URLを正確に指定する

og:urlプロパティには、正確なURLを指定する必要があります。
間違ったURLを指定していたり、リンク切れになってしまうと機会損失につながってしまいますので気をつけましょう。

また、URLの指定方法は相対パスではなく、絶対パスで記述しますのでその点にも注意しましょう。

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

優秀なデザイナーに相談

SNS運用でお悩みなら

ここまでOGP設定について説明をしていきました。
SNSの運用では、OGP設定以外にも重要な設定やポイントがあります。

もし、SNS運用で成果が出ずにお悩みならSNS運用のプロに依頼してみてはどうでしょうか？
複業人材の起用であれば、正社員の採用よりもお手軽です。
社内にノウハウや知見も残りますので、代理店に依頼するよりも中長期的にメリットがありおすすめです。

SNS運用のプロ人材なら「カイコク」お任せください

もし、SNS運用のプロ人材をお探しでしたら「カイコク」にお任せください。
カイコクでは8,500名以上のマーケターが登録しており、SNS運用、SNS広告のスペシャリストが多数登録しています。

専任コンサルタントが課題をヒアリングし、課題解決ができる最適な人材を紹介します。
マッチングまでは無料ですので、お気軽にお問い合わせください。

SNS運用でお困りなら「カイコク」

まとめ

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

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

また、SNS運用でお悩みなら複業人材を始めとした外部人材の起用も検討してみましょう。
複業人材の起用なら「カイコク」をご検討いただけますと幸いです。

デジタルマーケティングと複業について、さらに分かるノウハウ資料をダウンロード！

無料ノウハウ資料