【2012/12/02：追記】
記事本文の最初にでてくる画像URLを抜き出すという目的では、元の正規表現では少々問題があったため修正しました。詳細はMTタグの解説部分のコメントをご確認ください。
ども、ブログご無沙汰気味のヤガーです。
久しぶりにちゃんと技術っぽい事書かないとなぁと思いまして、いまさらですがOGP対応の話題など取り上げたいと思います。
といっても、すでに詳しく書かれているページもたくさんあるでしょうから、今回はボクがブログで使用しているMovableTypeでの実装方法にフォーカスしています。
いきなりですが、個別ブログ記事テンプレート用の完成版のソースです！
<meta property="og:title" content="<$MTEntryTitle remove_html="1"$>" /> <meta property="og:type" content="article" /> <meta property="og:url" content="<$MTEntryPermalink$>" /> <meta property="og:site_name" content="Creazy!（クリエイジー！）" /> <MTSetVarBlock name="og_image"><mt:entrybody regex_replace='/[\S\s]*?src="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2"></MTSetVarBlock><mt:If name="og_image" like="^(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)$"><meta property="og:image" content="<$MTGetVar name="og_image"$>" /><mt:Else><meta property="og:image" content="http://creazy.net/img/logo_ogp.jpg" /></mt:If> <meta property="og:description" content="<$MTEntryExcerpt convert_breaks="0" words="120" $>" /> <meta property="fb:admins" content="100001083970301" /> <meta property="fb:page_id" content="131869520198765" />
それぞれのブログ用の差し替える部分もありますから、このまま貼りつけちゃ駄目ですよー。
いまさら書いただけあって、ちょっと工夫した部分もありますｗ
詳しい説明は続きをどうぞ。
og:title = ブログ記事タイトル
個別記事の場合は、記事タイトルを入れるのが適切でしょう。
MTEntryTitle が該当しますね。
og:type = articleで固定
Open Graph protocol – Facebook開発者を見ると色々な type が存在するのですが、ブログ記事の場合は article で良いでしょうか。他に、「blog」「website」というのもあるのですが、トップレベルのURLにつけるもののようです。
og:url = ブログ記事URL
これはブログ記事のPermalink URLが入ります。
MTEntryPermalink が該当します。
ちなみに、rel=canonical を付けていれば、og:url がなくても正常に機能しますが、一応付けとくことにしました。
参考：検索エンジン3社が開始した、rel=canonicalの使い方
og:site_name = ブログタイトル
ブログタイトルを入れるのですが、MTBlogNameのようにMTタグを使わず、各ページで変更のないテキストは直接書いておいた方が、再構築が遅くなるなどの影響がでなくてよいと思います。
og:image = 記事中の画像、あるいはブログアイコンなど
今回一番工夫したのでこの項目です。
og:imageに画像URLが入っているとFacebookのウォールにサムネイルが表示されるので、友達が見たときにリンク先の記事が自分の興味のあるものかどうか簡単に判断でき、クリック率にも大きく影響する可能性があります。ボクの場合、画像のほとんどをFlickrに上げているので、MTのアイテム機能を使っていません。ですので、単純にMTタグから記事内の画像を取り出すということができないのですが、今回、regex_replaceというグローバル・モディファイアを使って、正規表現で本文内から画像URLを取り出すという荒療治をやってみました。
一番初めの完成版では1行にまとめちゃってたので、pg:image部分だけ改行付きでおさらいです。
<!-- 正規表現で本文から画像URLを変数に入れる --> <MTSetVarBlock name="og_image"> <mt:entrybody regex_replace='/[\S\s]*?src="(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2"> </MTSetVarBlock> <!-- 画像URLが取れているか確認して、metaタグ出力 --> <mt:If name="og_image" like="^(https?:\/\/.+?)(\.jpe?g|\.gif|\.png)$"> <meta property="og:image" content="<$MTGetVar name="og_image"$>" /> <mt:Else> <meta property="og:image" content="http://creazy.net/img/logo_ogp.jpg" /> </mt:If>
まず、mt:entrybodyにregex_replaceモディファイアを使って正規表現で画像URLを取り出します。
http | httpsから始まっていて、jpg | gif | pngの拡張子で終わっているURL文字列を探し出して、MTSetVarBlockを使って変数に入れておきます。
【2012/12/02：追記】
最初にでてくる画像URLを取りたかったので、「/[\S\s]*?」と?マークを追加しました。
その後、mt:Ifで先ほど変数に入れておいた文字列がちゃんと画像URLになっているかをチェックして（like=で正規表現チェックできる）、画像URLが取り出せている場合はその画像URLでmetaタグを生成、ない場合は代表の画像URL（ロゴや、なければプロフィール画像とか）を入れたmetaタグを作ります。
【2012/12/02：追記】
likeの正規表現チェックは完全に画像URLであることを確認したかったため、前後に「^」「$」を入れて完全一致するようにしました。
常に固定のURLを出すよりはよっぽど効果的だと思いますよ。
og:description = ブログ記事概要
記事の概要を入れますが、meta name=”description” が入っていれば不要だったりします。
MTEntryExcerpt というドンピシャな関数があるのでこれでいいですね。
fb:admins（fb:app_id） = facebookアカウントID
ここにfacebookのアカウントIDを入れておくと、facebookのインサイトで解析が見れるようになるようです。
facebookの自分のID（数字のヤツ）は普段は見ることないので分かりにくいですが、自分のプロフィールページで、プロフィール画像をクリックするとURLに数字のパラメータがありますのでそれをコピーします。
fb:page_id = facebookページID
これは個別記事ページでは必須じゃないような気がするのですが、実験的にいれています。
インサイトで解析を見つ方法として、facebookページと関連付ける方法もありますので、その時に挿入するタグがfb:page_idです。
解説は、Web担のページが詳しいのでリンクしておきます。
サイトに設置した「いいね!」の押され具合をデータで解析する方法 | Web担当者Forum
URLリンターでチェック
テンプレートの編集が終わったら、再構築の前にタグが合っているか確認しましょう。
任意の１記事を更新して、新しいテンプレートを反映させ、その記事の公開URLをコピーしてURLリンターでチェックしましょう。
URLリンター – Facebook開発者
URLを指定するだけで、OGPのタグが正しいかチェックしてくれるFacebook純正のツールです。
編集するたびいいね！してみるとか面倒ですから、ぜひご利用ください。
まとめ
いかがだったでしょうか？
解説が長いと難しそうですが、基本的には HEAD タグの中に貼り付けて、自分用の情報に書き換えるだけですので、それほど時間かからない作業だと思います。
ぜひ、試してみてください。
Creazy!のFacebookページもありますので、まだいいね！してない人はぜひ！
