ブログ

株式会社コミュニティコム採用情報 自由な働き方ができるから、パパ・ママにも優しい職場 復業OK、起業したい方、経験を積みたい方、あなたの夢を応援します

WordPressテーマのheader.phpのmetaタグの中に、FacebookのOGP対応タグの記載方法。（プラグインを使わない方法）

こんにちは。株式会社コミュニティコム代表取締役の星野邦敏です。

最近、検索エンジン対策だけでなく、TwitterやFacebookやmixiやGREEなどのソーシャルサイトからのアクセス流入の施策も、話題になっていると思います。
すなわち、口コミやつぶやきによって、自分のWebサイトを見てくれる人が増えている、ということのようです。

さて、その際に、FacebookやmiziやGREEなどのSNS（ソーシャル・ワーキング・サイト）では、OPGの設置、というのが、１つ大切になってくる、という話があります。

まず、OGPとは、Open Graph Protocolの略で、Facebook、mixi、GREEなどのSNSで共通の仕様となっています。
具体的な説明は、「OGP」や「Open Graph Protocol」と検索すれば出てくると思いますが、
一言で言うと、OGPは、そのWebサイトのその記事において何が書かれているのか、それをSNSに分からせるための仕様です。

このOGPを書くと、例えば、どこかのWebサイトやブログ記事を「いいね！」としたり、シェアしたりする際に、表示されるWebサイトの写真画像や概要文章をコントロールすることができます。
これをしないと、たまに、変な感じの画像や概要文章が、FacebookやmixiやGREEに載ってしまいます。

例えば、Facebookでは、OGP未対応ですと、
このページ
http://www.nest-akabane.net/study/2271.html
が、以下のように、Facebookのタイムライン（ウォール）に出ました。

FacebookのOGP

上の例では、FacebookのOGPのデフォルトで、そのページにある複数のサムネイル画像からの選択と、titleタグ、冒頭の文章、記事URLなどが、表示されています。

これを、OGPを設置することで、Web制作者や運営者が、Facebookへ表示される自分のWebサイト概要をコントロールすることができます。

例えば、
このページですが、
http://www.nest-akabane.net/exchange/2223.html

FacebookのOGP対応

該当URLのページには無い画像を出したり、「どうも、僕です。」という該当URLページには無い概要文章を表示することも可能になります。

このようにコントロールすることで、ソーシャルサイトへの対応を図るということができます。

もっとも、デフォルトのままでも、それなりにはなるし、運用面で意識しなくても良いので、そこまで、こだわらない、という場合には、設置しなくても良いかもしれませんが、
まあ、制作者は一度作ってしまえば良いわけですし、運用側も負担にならない運用がデフォルトになれば、ソーシャルからの流入も増えて、皆にとって良いかもしれません。

OGPを上手く使って、Facebookのタイムラインではクイズっぽい形で見せて、自分のWebサイトで結末を見せる、ってことをしている人もいるみたいですし、OGPの設定１つで、色々なアイデアがありそうです。

さて、WordPressでOGPの設定方法は、
（１）プラグインを使う方法、
（２）プラグインを使わずにWordPressテーマに直接に実装する方法、
この２通りあると思います。

個人的には、後者の「プラグインを使わずにWordPressテーマに直接に実装する方法」が好きです。自分でカスタマイズできますし、要望を汲み取ってのカスタマイズも簡単だからです。
もしプラグインを使いたい場合には、自分は使わないので詳しくないですので、「WordPress OGP プラグイン」などで検索しますと、それらしいのが複数出てくるのではないかと思います。

さて、プラグインを使わずにWordPressテーマに直接に実装するには、たいてい、以下のように書くでしょうか。

プラグインを使わずにWordPressテーマに直接にOGPを実装する方法

まず、WordPressテーマのheader.phpの冒頭のhtml部分に、

<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

と書きます。Facebookの実装の場合のhtmlの決まり事のようです。これを書かなくても正しく動く気もしますが。

さらに、meta情報部分に、以下のように書きます。

<!-- facebook ogp -->
<meta property="og:locale" content="ja_JP">
<meta property="og:type" content="article">
<meta property="fb:admins" content="（ココにFacebookのユーザーIDを書く、半角数字）">
<meta property="fb:app_id" content="（ココにFacebookのPlatformアプリケーションIDを書く、半角数字）">
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php if (has_post_thumbnail()) :?>
<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'medium');
?>
<meta property="og:image" content="<?php echo $image_url[0]; ?>">
<?php else: ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/（ココに画像までのパスを書く）">
<?php endif ;?>
<?php if (is_home() || is_front_page()) :?>
<meta property="og:title" content="<?php bloginfo('name'); ?>">
<?php else: ?>
<meta property="og:title" content="<?php the_title(); ?>">
<?php endif ;?>
<?php if (is_home() || is_front_page()) :?>
<meta property="og:url" content="<?php bloginfo('url'); ?>">
<?php else: ?>
<meta property="og:url" content="<?php the_permalink(); ?>">
<?php endif ;?>
<meta property="og:description" content="<?php the_excerpt(); ?>">

FacebookのPlatformアプリケーションIDは、Like Button – Facebook開発者などから取得できます。

上記のソースコードは、細かく条件分岐をさせていますが、もっとザックリでも良いかもしれません。

条件分岐部分のみ、ざっくり解説しますと、

property=”og:image”
は、アイキャッチ画像が設置されていたらアイキャッチ画像を出し、無ければ予め設定した代表的な画像を出す、という形にしています。
もちろん、functions.phpにアイキャッチ画像が出力されるソースコードを予め書いてあることが前提です。

property=”og:title”
は、Webサイトのトップページにいる時はサイト名を表示して、各記事ページにいる時は記事タイトルを表示する、という形にしています。

property=”og:url”
は、Webサイトのトップページにいる時はサイトURLを表示して、各記事ページにいる時はその記事のURLを表示する、という形にしています。

property=”og:description”
は、記事の概要が表示されるようにしていますが、ココをさらに独特にしたいのなら、カスタムフィールド実装も考えられると思います。
その場合には、

<meta property="og:description" content="<?php echo get_post_meta($post->ID, 'ogp', true); ?>">

などとして、カスタムフィールドの名前を「ogp」として、値に表示させたい文言を書くと良いと思います。

以上です。

Facebookについては、仕様が結構変わったりしますので情報のキャッチアップが必要なこともあると思いますが、2012年5月26日時点では、上記のようにWordPress実装は可能かと思います。
WordPressテーマのカスタマイズが出来ることが前提ではありますが、たいていのWordPressテーマでは、header.phpが存在すると思いますので、そのhtmlとmetaの記述に、自分に合わせてカスタマイズしてみましょう。

弊社では、だいたい上記のようなソースコードを書いていますので、もし何かしらの参考になれば嬉しいです。