OGPとは

ここでは、OGPについて解説します。

OGPとは?

OGPとは、Open Graph Protocol(オープン・グラフ・プロトコル)の略で、Facebookやtwitter、はてなブックマークなどのSNS上でウェブページの内容を伝えるための情報のことです。

OGPをHTMLソースの<head>内に記述することで、シェアされた時に「ページタイトル、URL、内容、画像(サムネイル)」をユーザーに正しく伝えることが出来ます。

▼OGP設定なしの場合

ogp設定なし

OGPを設定していないと、タイトルや説明文、画像指定することはできません。SNS側が勝手に指定して表示してしまうため、意図しないテキストが表示されてしまいます。

▼OGP設定ありの場合

ogp設定あり

OGPを正しく設定することで、タイトルや説明文、画像などを最適に表示することができ、SNS上でのクリック率増加を見込めます。

OGPの記述方法

1.<head>要素にprefix属性の記述をする
まずは、これからOGPを使いますよ。という宣言を、下記のようにprefix属性で行います。

▼HTML5の場合
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> ▼XHTMLの場合は<html>要素に下記のように記述
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#" lang="ja">

※これを記述しなくても表示はされますが、記述するのが正式です。

2.<head>内に以下を追記します。

<meta property="og:site_name" content="サイト名" />
<meta property="og:title" content="タイトル" />
<meta property="og:type" content="トップページはwebsite、個別ページはarticle" />
<meta property="og:url" content="記事のURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:description" content="記事のdescription(記事概要)"/>
<meta property="fb:app_id" content="FacebookのアプリID" />
<meta property="og:locale" content="ja_JP" />

設定したOGPの確認方法

facebook for developersにアクセスし、チェックしたいURLを入力して[Debug]をクリックすると確認できます。

※事前にFacebookへのログインが必要です。

facebook for developers

OGP設定することのメリット

  • Facebookでいいねやシェアした人の友達のニュースフィードにサムネイル画像付きの情報が表示されます。たくさんの人に情報を拡散できる可能性があります。
  • Facebookページにいいねをしてくれた人に、ウォールを更新するたびに情報を通知することができます。

SNSを利用した集客を目標とする場合は、OGP設定を必ず行ってください。
さらに、OGPではアイキャッチ画像を設定できるため、クリック率の増加を期待できます。

上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
会社名/組織名 *
(例)株式会社○○○
ご担当者様名 *
電話番号 *
メールアドレス *

※個人情報の管理は、「プライバシーポリシー」に同意の上お申し込みください

この記事が役に立つと思ったら、ぜひ『フォロー』して下さい。
この記事が役に立つと思ったら、ぜひ『いいね!』して下さい。