DrupalにOGPを設定する

OGP(Open Graph Protocol)とは、一般のWEB ページの内容を、Facebookに正しく伝えるための規格です。OGPを設定することにより、ウェブページは Facebook のソーシャルグラフのオブジェクトとして適切に扱われるようになり、内容によっては大きなアクセスアップも期待出来ます。

「いいね!」ボタンを設置したときなどは、OGP の設定をしておくと良いと思います。一般的なウェブページの場合、OGP の設定は、まず <html> に xmlns 属性を追加します。

#コード1
<html xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://www.facebook.com/2008/fbml">

あとは、ページのメタデータ(属性情報)として、例えば以下のようなコードを <head></head> セクションに記述するだけです。

#コード2
<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 にその値を指定しています。

og:title
オブジェクトのタイトルです。通常はページタイトルを指定します。
og:type
オブジェクトのタイプです。ウェブページ(記事)として認識させたい場合は "article" を指定します。
og:image
オブジェクトを表す画像のurl。
og:url
オブジェクトの正式なurl。
og:site_name
ウェブサイトのタイトル。
fb:admins
ウェブページの管理者のFacebookユーザーID。複数人の場合はカンマで区切って指定します。

メタデータの設定について、詳しくはこちらを参照してください。

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 など、必要なメタデータを追加すれば完了です。

 
タグ: 
コア: 
Drupal7