2012年12月17日 category : WordPress tags : Customize, Facebook

Facebook OGP向けプラグイン「Open Graph Pro」を外した理由

”Facebook OGP設定に便利なWordPressプラグイン「Open Graph Pro」ですが気になる点が…”

Facebookにブログやウェブサイトの情報を正しく伝えるために「Open Graph Protocol（OGP）」という記述方法があります。このOGPはブログやウェブページの情報を正しくFacebookに伝わるようにするためのものです。

このOGP設定はワードプレスでは便利なプラグインで設定できます。このブログでも数日間プラグインを使っていました。しかし、少し問題が発生したのでプラグインの使用をやめ、自分で処理を実装することにしました。

では今回発生した問題点と実装部分の紹介です。

01 . OGPとは？

OGPはHTMLのMETA情報に情報を付加する形で追加します。OGPを設定することにより、FacebookなどのSNSのプログラムがクロールした際にこのWebページには何が書かれているのかを正しく判断することができるようになります。

簡単にいうと人が読む情報ではなくプログラムがこのブログには何が書かれているのかを読む部分になります。

記述方法と各項目の内容は以下のような感じになります。

<meta property="og:title" content="ごすてっぷ">
<meta property="og:description" content="WordPress、Webサービスなどの情報を５ステップくらいで紹介しています。">
<meta property="og:type" content="blog">
<meta property="og:url" content="http://05step.com">
<meta property="og:image" content="http://05step.com/wp-content/themes/05step/images/aboutme-p.jpg">
<meta property="og:site_name" content="ごすてっぷ">
<meta property="fb:admins" content="100004148952998">
<meta property="fb:app_id" content="123456789098765">

og:title ブログタイトルまたは記事のタイトル
og:description　ブログまたは記事の概要
og:type　どのようなWebページなのか
og:url　ブログまたは記事のURL
og:image　表示する画像URL
og:site_name　サイト名
fb:admins　FacebookのAdmin Users
fb:admins FacebookのApplication ID

メタ情報に書き込むのですが、これは各記事でtitleやurlが変わるためHTMLにベタ書きではダメなんですね。ですので自分で処理を書くなり便利なプラグインを使ったりして対応する必要があります。

02 . 便利なプラグイン

プラグインは「Open Graph Pro」というのを使っていました。簡単に設置できるのでお勧めです。この記事の主題はプラグインの使用を「やめて」自分で実装するという話ですがやはりプラグインは便利です。

Facebookからの流入を増やしたい時、OGPの設定は絶対必要！ | ごすてっぷ
※Open Graph Proの設定方法はこちらの記事を参照

ガシガシ使っていいと思っています。では私は何故外したのかというお話へ。

03 . og:descriptionの取得漏れがある

このプラグイン「OGP Graph Pro（記事掲載時のバージョン 1.0）」ですが記事によってog:descriptionの取得漏れが発生していました。og:descriptionは記事の概要部分になるのですが、何故か取得していない記事があるんですよね。

全記事取得していないのならば分かるのですがたまに取得していないんですね。og:descriptionの値がないのではなく１行まるまる記載がない。ざっと見た感じでアバウトな情報になるのですが5件に1件くらいの割合な感じ。

プラグインたまに取得漏れるくらいでしょー、いいよプラグイン便利だし！でも全然いいレベルだと思いますが、私はその「たまに」が気になる(=_=)

04 . ということで実装

まず簡単に概要説明。ブログには記事ページとそれ以外のページ（ブログトップなど）があります。記事ページではタイトルを取得しますが同じ方法だとそれ以外のページでは最新記事のデータを取得してしまうのでまずはこの２つを分岐。

同様に画像URLや概要（description）も同じ理由で分岐させます。記事ページ以外のページではブログタイトル、ブログ概要、プロフィール画像を取得してくるといった感じです。

以下にソースコードも載せておきますが、少し横着していますのでこのまま使うには２点前提条件があります。
１．各記事ページにはサムネイル（アイキャッチ）が設定されていること
２．プラグイン「All in One SEO Pack」を使っていること

２．のプラグインは概要（description）にAll in One SEO Packで設定した値を取得していれてますので必要になります。ワードプレスを使っている人は入れている人が多いと思いますのでここも捕捉処理なし。

文章でみても分かりにくいかと思いますので以下ソースコードです。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<meta charset="UTF-8">
<?php
// ここからOGP
if(is_single()){// 単体記事ページ
	echo('<meta property="og:title" content="'); the_title(); echo('">'); echo("\n");
	echo('<meta property="og:description" content="').get_post_meta($post->ID, _aioseop_description, true).'">'; echo("\n");
	echo('<meta property="og:type" content="article">'); echo("\n");
	echo('<meta property="og:url" content="'); the_permalink(); echo('">'); echo("\n");
	// 単体記事の場合サムネイルを取得
	$image_id = get_post_thumbnail_id();
	$image = wp_get_attachment_image_src( $image_id, 'full');
	echo('<meta property="og:image" content="').$image[0].'">'; echo("\n");
}else{
	echo('<meta property="og:title" content="'); bloginfo('name'); echo('">'); echo("\n"); // 最新記事のタイトルを取得するためWP一般設定より取得
	echo('<meta property="og:description" content="'); bloginfo('description'); echo('">'); echo("\n"); // 最新記事のタイトルを取得するためWP一般設定より取得
	echo('<meta property="og:type" content="blog">'); echo("\n");
	echo('<meta property="og:url" content="'); bloginfo('url'); echo('">'); echo("\n"); // 最新記事のタイトルを取得するためWP一般設定より取得
	// プロフィール画像を取得
	echo '<meta property="og:image" content="プロフィール画像のURL">'; echo("\n");
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="fb:admins" content="FacebookのAdmin Users ID">
<meta property="fb:app_id" content="FacebookのApplication ID">

ソースコードはHTML5用に書いていますのでheadタグも書き換えている点注意です。詳細は以下の記事を参照ください。

HTML5でOGP設定する際に注意したいxmlns属性とprefix属性 | ごすてっぷ
SNS対応のOGP（Open Graph Protocol）をHTML5に追加する際に一部変更が必要なようです。ソーシャルネットワークサービス（SNS）を通じてブログを広めていくためにはOGP（O …

05 . 完成

これでどの記事にもdescriptionが挿入されるようになりました。満足。ソースコードは記載ミスなどがあればブログ自体が表示されなくなってしまいますのでソースコードを触り慣れていないかたはプラグインの利用で全然いいと思います。

近々、descriptionの取得漏れも対応されるかもですし、そもそも私の環境だけで発生している事象かもしれないですし。Facebook OGPのカスタマイズでした。

▽参考にさせてもらった記事：とてもわかり易く説明してくれています。
[Å] 私がブログでFacebook OGPの設定をプラグインに頼らない2つの理由 | あかめ女子のWebメモ
どうも立て続けのテスト投稿失礼しました。あかめ（@mk_mizuho）です❦ ようやく落ち着いたのでこれからガツガツ「ブログカスタマイズ記事」を放出していきます。知っていることも多いかもですが、何かの …