E-riverstyle Vanguard

OGP（Open Graph Protocol）という仕様の存在を知ってから、それなりに経ちますが、これまであまり意識せずにここまできましたが、FacebookなどのSNSのことを考えると非常に大事なことで、これは何とかしないといけないと思い、このブログにOGPを追加しました。

OGPって何

そもそもOGPが何かというと、以下はてなキーワードからの引用ですが、

ウェブページの内容をプログラムに読める形で記述する方法。Facebook、mixi、GREEなどの大手SNSがOGPを利用している。

と書かれている通り、ページの内容をプログラムで識別するための仕様です。

事の発端

そもそも、OGPを追加しようと思った動機ですが、Facebookのニュースフィードで表示されるサムネイルを何とかしたいと思ったからです。

よくニュースフィードの表示の仕方というのが変わるなぁと思っていたのですが、「いいね！」を押したら、ニュースフィードに、「○○さんが、～についていいねッ言ってます。」という感じでテキストのみしか表示されませんでしたが、いつ頃からか分かりませんが、最近では、サムネイルまで表示されるようになりました。

そのサムネイルが表示されるのはいいのですが、欠点として、表示されるサムネイルが選べないというところです。

ニュースフィードに、URLを入力したら、サムネイルを選べる場合があるのですが、「いいね！」の場合は、サイト内にある適当な画像が表示されます。

そのため、そのサムネイルがサイトのイメージに合っているものが表示されれば良いのですが、広告の画像だったりとそのサイトに関係の無いサムネイルが表示されるとそれは問題です。

上記の画像で示しているように、広告のサムネイルが表示されました。そのため、OGPを追加しようと思った次第です。

OGPを実装したい

まず、『OGPってどうやって実装するんや』と思ったわけですが、下記のサイトを参考にまず下調べ。

• Open Graph protocol - Facebook開発者
• フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
• The Open Graph Protocol
• metaタグを追加してFacebookに対応する方法とハマりやすいポイント | KAYAC DESIGNER'S BLOG

分かったことは、HTMLにmeta要素として記述する、簡単です。早速やってみました。

<meta property="og:title" content="E-riverstyle Vanguard | CSSやXHTML,JavascriptやWeb製作に関する事を紹介">
<meta property="og:type" content="blog">
<meta property="og:description" content="CSSやJavaScriptからWebアクセシビリティなどのWeb製作に関する事を紹介するブログ">
<meta property="og:url" content="http://blog.e-riverstyle.com/">
<meta property="og:image" content="http://blog.e-riverstyle.com/image/ogp.jpg">

このブログの情報を上記のように記述します。それぞれのプロパティに関しては、上記で記したサイトが分かりやすいです。

しかし、こうやってしまうと「いいね！」が押されたときに問題が起こります。

このブログのトップページならば、上記で記したURLやサイト名や説明なので良いのですが、各ブログ記事に「いいね！」が押されたときにも、上記の情報がニュースフィードに表示されます。ニュースフィードに各エントリーごとの情報を表示させたい場合には、そのブログに最適化された実装が必要です。

MTにOGPを実装したい

このブログはMTなので、MTに最適化されたOGPを実装していきます。実装にあたっては下記サイトを参考にさせていただきました。

• Open Graph Protocol 付きで「いいね！」ボタンを設置する - Open MagicVox.net
• MovableTypeが出力する記事をThe Open Graph Protocolへ対応するようMTタグを試行錯誤してみる
• MovableTypeでOpen Graph Protocolを実装したい｜linker journal｜linker

<MTIf name="entry_archive">
<meta property="og:title" content='<$MTEntryTitle encode_html="1"$>' />
<meta property="og:type" content="article" />
<meta property="og:description" content="<$MTEntryExcerpt$>" />
<meta property="og:url" content="<$MTEntryPermalink$>" />
<meta property="og:image" content="http://blog.e-riverstyle.com/image/ogp.jpg" />
</MTIf>

指定したサムネイルとエントリータイトルがちゃんと表示されています。

最後に

まぁ、この指定してある画像が良いかは別として、これでなんとかサイトと関係の無いバナー広告の画像が表示されることはなくなりました。少なくとも「いいね！」を押してもらったときに関係の無い画像が表示されるよりかはマシです。

本当に、今まで全く気にしてなかったのですが、facebookの強力さを考えるとこういう最適化したサムネイル表示など本当に大事だなぁと今回強く感じました。

そもそもそもそも広告を貼れなければいいんじゃね、みたいなツッコミはご遠慮いただければ幸いです。