OGP(Open Graph Protocol)とは、一般のWEB ページの内容を、Facebookに正しく伝えるための規格です。OGPを設定することにより、ウェブページは Facebook のソーシャルグラフのオブジェクトとして適切に扱われるようになり、内容によっては大きなアクセスアップも期待出来ます。
「いいね!」ボタンを設置したときなどは、OGP の設定をしておくと良いと思います。一般的なウェブページの場合、OGP の設定は、まず <html> に xmlns 属性を追加します。
<html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
あとは、ページのメタデータ(属性情報)として、例えば以下のようなコードを <head></head> セクションに記述するだけです。
<meta property="og:title" content="不動産物件サイトのつくり方" /> <meta property="og:type" content="article" /> <meta property="og:image" content="http://customfield.jp/sites/customfield.jp/files/pictures/ogp-image.png" /> <meta property="og:url" content="http://customfield.jp/tutorial/demo1" /> <meta property="og:site_name" content="CMS自由自在!" /> <meta property="fb:admins" content="- FacebookユーザーID -" />
上は不動産物件サイトのつくり方という記事ページの例です。Facebook などのソーシャルメディアに伝えたい内容をメタデータとして記述しています。<meta> タグの property にさきほどの xmlns で設定した属性名を、content にその値を指定しています。
メタデータの設定について、詳しくはこちらを参照してください。
Drupal でこのような OGP の設定を追加するには、まず hook_rdf_namespaces() を使ってネームスペースを追加します。Drupal7 では、"http://ogp.me/ns#" の割り当てはデフォルトで入っているので、"http://www.facebook.com/2008/fbml" の割り当てを追加します。カスタムモジュールに以下のコードを追加してください。
/** * Implementation of hook_rdf_namespaces() */ function custom_rdf_namespaces() { return array( 'fb' => 'http://www.facebook.com/2008/fbml', ); }
これで <html> タグに xmlns:fb の属性が追加されます(#コード1)。
続いてメタタグを追加します。メタタグを追加するには、先ほどのコード(#コード2)の動的な部分を変数に置き換え、Drupal で使用するテンプレートに直接記述するのが手っ取り早い場合もありますが、デザインとロジックをしっかり分離させたいときには、drupal_add_html_head() を使います。カスタムモジュールに以下のコードを追加してください。
/** * Implementation of hook_preprocess_node() */ function custom_preprocess_node(&$variables) { if ($variables['page']) { // 単一ノードページには、OGPメタタグを設定する。 $data = array( '#tag' => 'meta', '#attributes' => array('property' => 'og:title', 'content' => $variables['title']), ); drupal_add_html_head($data, $data['#attributes']['property']); } }
これは単一ノードページにメタデータを追加する例です。template_preprocess_node() の引数 $variables には、ノードテンプレート('node.tpl.php')に渡す引数が格納されています。$variables['page'] がTRUE、すなわち単一ノードページの場合のみ、処理が行われます。
drupal_add_html_head() を使えばテンプレートを編集することなく、<head></head> セクションに追加コードを設定することが出来ます。第1引数にはタグの種類や属性などを表す配列を、第2引数には追加コードを識別するためのキーを指定します。何でも良いのですが、ここでは 'property' の値を指定しました。
この例では
<meta property="og:title" content="ノードのタイトル" />
が<head></head> セクションに追加されます(#コード2)。同様に、og:type、og:image、og:url など、必要なメタデータを追加すれば完了です。