«« iPadアプリ「7notes」を擬人化するなら | 小説スーパー乙女大戦(アダルト)は、特撮描写にコダワリ過ぎてていい! »»

MovableTypeが出力する記事をThe Open Graph Protocolへ対応するようMTタグを試行錯誤してみる

2011年2月13日

このエントリーをはてなブックマークに追加
The Open Graph Protocolへブログやホームページを対応させると、SMSサイトで自分のホームページを紹介される際に表示される画像やテキストを上手くコントロールでき、より強力な口コミへと繋がるかもしれません。ということでHTML記載サンプルとそれをMovableTypeのタグに落としこんでみた例を紹介します。


facebookなど(検証はしていないがmixi等でも言える話かも)では、サイト内の「いいね!」ボタンを押したり、直接ニュースフィードのURLに書き込むと、自分とその友人のウォールに対して「いいね!」ボタンを押したホームページの紹介をする機能があります。
「いいね!」ボタンの例→
つまり、ここに上手く書き込まれるよう工夫すると、口コミ効果が期待できそう!というわけだな。

そこで、私のサイトにおける以前作成したPerl上で動作するCGIソフト「顧客管理データベース」に対して、ウォールに書きこんでみようという自作自演すると、デフォルトではこんな感じ。

110213facebook_ogp01.png

恐らくfacebookは、顧客管理データベース紹介ページのTitleタグや、<META NAME="Description" CONTENT="〜">タグを読み込んでホームページの紹介を行おうとしているのでしょう。
しかし、バナー部分を同ページ内に埋め込んでいるamazonのバナーを読み込んだり、親サイトの「ジグソーTools」もタイトル名として読み込んでいたりして、ちょっと不格好だ。

そこで、The Open Graph Protocolという、SNSがデータを取り込む為の仕様というのがあり、それに基づいて記載すると、その辺も上手くカスタマイズが出来るんだそうな。

http://d.hatena.ne.jp/amachang/20110117/1295233078
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記

IT戦記様の紹介記事を参考に、これまた以前作成したリンク先お手軽作成Webサービス「Paste Title」に対して埋め込むコードを実際に作ってみた。

 
<meta property="og:title" content='Paste Title' /> 
<meta property="og:type" content="product" />
<meta property="og:description" content="Paste Titleは、指定したWebページのURLを<a>タグで囲むブログ向けWebサービスです。" />
<meta property="og:url" content="https://kuje.kousakusyo.info/tools/" />
<meta property="og:image" content="https://kuje.kousakusyo.info/tools/PasteTitle/images/thumbnail.jpeg" />
<meta property="og:site_name" content='ジグソーTools' />
<meta property="og:email" content="hiroshikuze@gmail.com" />

で、facebookでの動きを試したのがコレ。

110213facebook_ogp02.png

確かにデフォルトのものに比べて余計な情報が減って見やすくなった。
しかし、サイト紹介画像も設定していた(property="og:image")なのにどうして反映されないんだ?
画像のサイズなども指定があるらしいけど、https://kuje.kousakusyo.info/tools/PasteTitle/images/thumbnail.jpegは、400x300pxだぞ?

ちなみに、The Open Graph Protocol(OGP)を、MovableTypeのタグに設定してみるなら、以下のような感じになると思う。

<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="<$MTBlogUrl$>" />
<mt:EntryAssets><meta property="og:image" content="<$MTAssetThumbnailURL$>" /></mt:EntryAssets>
<meta property="og:site_name" content='<$MTBlogName encode_html="1"$>' />
<meta property="og:email" content="あなたのメールアドレス" />

しかし、ここでもfacebookで試したけど、サイト紹介の画像は表示されないんだよなぁ。
なぜだ?


Facebook-Anwendungen programmieren
Mario Scheliga
O'Reilly Vlg. Gmbh & Co.


■追記

MovableTypeタグの方は上手く、facebookに画像が認識されてました。
Metaタグに記載すると同時に、本文内にも同じ画像が含まれていないと無効になるのかな?


投稿者 kuze : 2011年2月13日 01:17


■このエントリーに関連した記事

■「実用ソフト&サイト」カテゴリの最新記事

«« iPadアプリ「7notes」を擬人化するなら | 小説スーパー乙女大戦(アダルト)は、特撮描写にコダワリ過ぎてていい! »»


自己紹介
PHPやVBによるコーディングやシステムエンジニアを仕事にしています。
主にiPhoneアプリの紹介やWeb開発などのPC系の話題と、アニメやゲームなどのサブカルな話題を取り扱っています。

[PR]

instagram

カテゴリ

最近のエントリー

最近掲載した画像
  • 大人の麻しん対策としてMMRワクチンを予防接種してきた
  • 親知らずのむし歯を治療して合わせて神経も抜いてもらいました
  • 先日Doll's Mythとガールズアートコレクション2019へ行ってきました!
  • 先日Doll's Mythとガールズアートコレクション2019へ行ってきました!
  • 先日Doll's Mythとガールズアートコレクション2019へ行ってきました!
  • 先日Doll's Mythとガールズアートコレクション2019へ行ってきました!
  • 先日Doll's Mythとガールズアートコレクション2019へ行ってきました!
  • 先日Doll's Mythとガールズアートコレクション2019へ行ってきました!
  • 先日Doll's Mythとガールズアートコレクション2019へ行ってきました!
  • 先日Doll's Mythとガールズアートコレクション2019へ行ってきました!
  • むし歯にはとりあえずロキソニン?
  • サーバーレスなサーバー(特にAWS Lambda)を調べてみた
  • TwitterのフィードをJSONに変換するcall_twitterをGitHubで公開しました
  • 3DSのわがままファッションGIRLSMODEよくばり宣言!は女の子画像が好きなら男性でも楽しめるかも
  • 3DSのわがままファッションGIRLSMODEよくばり宣言!は女の子画像が好きなら男性でも楽しめるかも
  • 3DSのわがままファッションGIRLSMODEよくばり宣言!は女の子画像が好きなら男性でも楽しめるかも
  • 3DSのわがままファッションGIRLSMODEよくばり宣言!は女の子画像が好きなら男性でも楽しめるかも

RSS
更新情報はRSSをご利用下さい