OGP (Open Graph Protocol)について

2012-06-24

さて、今日の覚書

OGP (Open Graph Protocolってなんとなく耳にしてたんですがいままであんま気にせずにいました。

今回サイトをリニューアルするにあたって少し勉強したんで書き残しときます。

OGPとは簡単に言うとこのウェブページは何のことを書いているのかという情報を、プログラムから読めるように HTML に付加する記述方法のことらしいです。

私なりの解釈をすると最近よく見かけるソーシャルボタンありますよね?

facebookのいいねやシェアボタンとかtwitterのtweetボタンみたいなやつです。

OGPってのはそれらのボタンを押したときに正確な情報をfacebookやらtwitterやらに渡すために書く情報のことみたいです^^;

今現在はそういったソーシャルメディアが生活やビジネスの中で欠かせなくなってきているのでOGPはしっかり書いておいた方がいいと私は感じました。

具体的な書き方

書き方は非常に簡単です。

まず当サイトのOGPはこんな感じです。

<meta property="<a>og:title</a>" content="<a>佐渡島.NET | 佐渡のニュースや情報を発信中、国内旅行はぜひ佐渡へ</a>">
<meta property="<a>og:type</a>" content="<a>website</a>">
<meta property="<a>og:description</a>" content="<a>佐渡のニュースや情報を発信中、国内旅行はぜひ佐渡へ</a>">
<meta property="<a>og:url</a>" content="<a>http://sadogasima.net/</a>">
<meta property="<a>og:image</a>" content="<a>http://sadogasima.net/images/sado.jpg</a>">
<meta property="<a>og:site_name</a>" content="<a>佐渡島NET</a>">
<meta property="<a>og:email</a>" content="<a>mail@sadogasima.net</a>">
<meta property="<a>og:phone_number</a>" content="<a>080-3323-9112</a>">

みておわかりいただけるように<meta property=”<a>og:****</a>” content=”***</a>”>のような形のメタ情報を書くだけです。

簡単に説明すると

og:type
このウェブページが何のページであるかを記述(必須)
og:title
このウェブページが記述しているモノの名前(必須)
og:image
このウェブページが記述しているモノの画像(必須)
og:url
このウェブページの正式な URL(必須)
og:description
このウェブページの説明
og:site_name
このウェブページが何かのサイトに所属する場合そのサイト名
og:email, og:phone_number
という感じです。
このほかにも音声や動画を添付するときのOGPもあります。

あとwordpressで書くときはheader.phpに


<meta property="og:title" content="<?php
/*
* Print the <title> tag based on what is being viewed.
*/
global $page, $paged;</p>
<p>wp_title( '|', true, 'right' );</p>
<p>// Add the blog name.
bloginfo( 'name' );</p>
<p>// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
echo " | $site_description";</p>
<p>// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
?>">
<meta property="og:description" content="<?php echo trim(wp_title('', false)); if(wp_title('', false)) { echo ' - '; } bloginfo('description'); ?>">
<meta property="og:url" content="<?php print("http://" . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]); ?>">

のように記述すれば、title、description、urlは各ページごとに取得してくれます。

Facebook