2011年11月01日　(2011/11/06 23:02 )

facebook、mixi等で「いいね！」される際の画像・概要をセット - OGP対応MovableType編

　カテゴリ : ブログ　タグ :

■2011/10/31 [Googleロジック変更の影響？検索エンジンからの流入が「73%消失」の実例]
何はなくとも何もせずにというワケにもいきませんので、メインコンテンツが少しでも上に来るようにとバナー系を下げたり減らしたりといったレイアウト変更をしてみたりしています。
前記事でブログ記事ページのレイアウトをちょこちょこいじっていた件の
延長の話なのですが、前々からちょっと対応してみようかなと思っていた
OGP(Open Graph Protocol) 用のメタタグ挿入を実施してみました。
　

　
OGPとは何かというと、利用例としてわかりやすくいえば、facebookやmixiなどで
いいね！されるときに 引用される概要情報 をちゃんと指定するメタタグ、
といえば分かりやすいと思います。(本来はもっと様々な目的のための仕様ですが)
詳しくはこちらの amachangさんのブログ の説明が分かりやすいですね。
　
■フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
http://d.hatena.ne.jp/amachang/20110117/1295233078
　
そのためのメタタグをMovableTypeでどう埋め込んだら良いかについては、
こちらの Creazy!(クリエイジー)さんのブログ の記事が大変参考に
なりましたので、ほとんどそのまま使わせて頂きました m(_ _)m
　
■MovableTypeにFacebookのOpen Graph protocol（OGP）を対応させる方法 [C!]
http://creazy.net/2011/06/movabletype_facebook_ogp.html
　
実際にMTタグを使ってこんな感じで埋め込んでいきます。
　

　
内容はほとんど上述の Creazy!(クリエイジー) さんの記述と同じですが、
いちおうご紹介をしていきますと、title、type、url、site_name、description
の5つについては、固定文字列 を入れるか、ある 1つのMTタグ を
放り込むだけでほぼそのまま使えますので迷うことは特にありません。
　
<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="デジモノに埋もれる日々" />
<meta property="og:description" content="<$MTEntryExcerpt convert_breaks="0" words="120" encode_html="1"$>" />
　
が、imageについてはちょっと難関です。概要画像として 記事中の一番最初の
画像のURL を引っ張りたいのですが、Creazy!(クリエイジー)さんでは何と
「mt:EntryBody」（ブログ全文）のタグに対して、「regex_replace」(特定の
文字を置き換える) というコマンドを使い、
　
　「ブログ本文すべて」を「1つめの画像URLだけ」に置き換える
　
という荒業を使っています。それをMTの変数として保持し、ちゃんと中身があれば
その画像URLを、何も残らなければ固定の代表画像URLをog:imageにセットする、
という仕組みになっています。この発想がそもそも凄いですね。
　
私のサイト用に若干手直しして入れたものがコレです。
　
<MTSetVarBlock name="og_image"><mt:entrybody regex_replace='/[\S\s]*?src="(https?:\/\/c-kom.homeip.net/review/blog/images/.+?)(\.jpe?g|\.gif|\.png)"[\S\s]*/i',"$1$2"></MTSetVarBlock><mt:If name="og_image" like="(https?:\/\/c-kom.homeip.net/review/blog/images/.+?)(\.jpe?g|\.gif|\.png)"><meta property="og:image" content="<$MTGetVar name="og_image"$>" /><mt:Else><meta property="og:image" content="http://c-kom.homeip.net/review/blog/images/digimono_title_left_150x140.gif" /></mt:If>
　
最初のところで「?」がないと、正規表現が最長一致になってむしろ「最後の画像」
を取ってきてしまうため、ここだけはロジックそのものを変更しました。
あとは画像URLを判別する部分にわざわざ「c-kom.homeip.net/review/blog/images/」
という部分も書き加えています。
　
これはたとえば画像URLを何でもアリにしてしまうと、はてブの「B!」ボタン の
画像なども対象に入ってきてしまったりして、意図しない画像が必ず選ばれて
しまうためです。自分のブログの 「画像置き場」のURLはここ！ というのが
分かっていれば、それを指定することで誤選択を減らすことができるでしょう。
（ちなみに画像が無かった場合に選ばれる代表画像は「埋」のロゴです。）
　

　
こんな感じで、「いいね！」 されるときにちゃんとタイトル、画像、概要文
などが表示されるようになりました。ちょっとしたことではありますが、
やってみて損するものでもありませんので、とりあえず入れておこうという
くらいの気持ちで対応してみると良いことがある？かもしれませんね。