OGP（Open Graph Protocol）とは？　OGPでFacebookやTwitterの拡散効果をアップ！ │ TOKYO QUANTUM

FacebookやTwitterなどのソーシャルネットワーク上に、ホームページの内容をアップする際のプロトコル「OGP」をご紹介します。OGPをうまく活用することで、「この記事はこういった内容です」とSNS上に的確かつ視覚的なインパクトをもって伝えることができ、より高い拡散効果を得ることができます。

1. OGP（Open Graph Protocol）とは
2. OGPのメリット
3. OGPのフォーマット
4. OGPメタ情報を詳細にご紹介
5. まとめ

OGP（Open Graph Protocol）とは

OGPとは、Open Graph Protocolの略称です。

FacebookやTwitterなどのSNSでホームページのリンクがシェアされた際に、そのページのタイトル、URL、概要、アイキャッチ画像を意図した通りに表示させる仕組みです。

OGPは、SNSでの拡散を通じて多くの人に記事をみてもらうためには必須の設定です。

OGPのメリット

FacebookやTwitterなどのSNSを通じたWebページの拡散を、OGPによってその効果と確率を高めることができます。

自身のSNSアカウントのフィード上で投稿を発信することで、そのユーザーがWebページを訪れやすくなります。

さらに、「いいね！」と押してもらえれば、そのユーザーの友人までWebページが拡散されます。

OGPのフォーマット

OGPは下記コードをWebサイトやホームページのソースに埋め込むことで実装することができます。

【共通設定】

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<title>ページの タイトル</title>
<meta property="og:site_name" content="サイト名" />
<meta property="og:type" content=" ページの種類" />
<meta property="og:title" content=" ページの タイトル" />
<meta property="og:description" content=" ページのディスクリプション" />
<meta property="og:url" content=" ページの URL" />
<meta property="og:image" content=" サムネイル画像の URL" />

【 Facebook用設定】

<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />
<meta property="fb:admins" content="adminID（15文字の半角数字）" />

【 Twitter用設定】

<meta name="twitter:card" content=" Twitterカードの種類" />

OGPメタ情報を詳細にご紹介

共通設定

og:title

og:titleにはページのタイトルを指定します。タイトル設定の<title>…</title>よりも優先して表示されます。設定しない場合は、<title>…</title>が表示されます。

og:type

content属性に、オブジェクトタイプを記述します。

様々なものが選択できます。詳細は以下で確認できます。

http://ogp.me/#types
https://developers.facebook.com/docs/reference/opengraph

content=”website”
ウェブサイトのTOP ページに指定します。
content=”article”
ウェブサイトやブログのTOP ページ以外のときに指定します。

og:url

ページの URLを指定します。 URLの指定方法は絶対パスで行う必要があります。

og:image

og:imageは画像を指定することができます。
画像を指定すると、シェアされたときなどに表示する画像を決めることができます。画像の指定方法は絶対パスで行う必要があります。
Facebook推奨の画像サイズ1200px✕630pxにあわせると、大きなサイズでキレイに表示されます。

og:site_name

サイト名を指定します。

og:description

ページの説明を記述します。

Facebook用設定

fb:app_id

fb:appidは、 FacebookにOGPを表示させるためには必須のプロパティです。

fb:admins

fb:adminsは、ページの管理者をユーザーIDで指定します。

Twitter用設定

twitter:card

twitter:cardは、twitterでOGPを表示させるときの表示タイプを指定します。

content=”summary”
summary.jpeg 最も一般的な表示形式です。
content=”summarylargeimage”
summary_large.jpeg Summaryカードの画像がより大きく表示される、形式的には FacebookのOGPに近いタイプのカードです。
content=”photo”
photo.jpeg 画像が優先して表示されるタイプです。画像をクリックするとツイート内容が表示されます。
アパレルや飲食店等などのビジュアル訴求が重要な業種でよく使われます。
content=”gallery”
gallery.jpeg 一度の投稿で複数枚の画像を表示させることができるカードです。
表示させる画像は最大4枚まで選択することができます。
content=”app”
app.jpeg アプリを紹介する際に利用したいカードです。アプリケーションの名前や紹介文、アプリアイコンだけでなく、評価や価格なども表示されます。