2013年8月1日木曜日

data:post.firstImageUrl

Bloggerにdata:post.firstImageUrlというテンプレートタグがあり、投稿記事の最初のイメージのURLをかえしてくれます。


新しいタグのようで、あまり検索にも掛からず知らなかったのですが、すでに2011年の記事には掲載されていました。

真っ先に浮かんだのは、構造化データのschema.orgとFacebookのOpen Graph Protocolへの設定。
data:blog.postImageThumbnailUrl というのは、あるのですが、これは、72x72の小さなサムネイルで、しかも、投稿内のどの画像が使われるか、わからない代物。
imageを指定するのに、少し困っていたので、一目で「これは!」と思い、即座に試してみました。


Facebook の og:image の指定

最近og:imageは最低200x200 pxになったらしく、推奨は1500x1500 px。
data:blog.postImageThumbnailUrlを指定してFacebookのデバッガーでみると、「画像が小さすぎる」という警告が出ます。

og:image should be larger
初めに個別の記事のヘッダーにfirstImageUrlを設定してみました。
<head>
<meta expr:content='data:post.firstImageUrl' property='og:image'/>
</head>

TEMPLATE ERRORでデータが展開されません。
<body>内に設置しないと使えないようです。この辺りは、基本的な知識が欠けているのを露呈。

<body>に設置し直してみると、HTMLは展開されるものの、今度は、Facebookのデバッガーでエラー。
こちらは、逆に<head>内に設置しないといけない模様。
ということで、data:post.firstImageUrl は、og:imageには使えないという自分なりの結論。
最終的に、OGPの設定は、以下のようになりました。
<head>
<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <meta expr:content='data:blog.pageName' property='og:title'/>
     <b:if cond='data:blog.postImageThumbnailUrl'>
     <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
     </b:if>
<b:else/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='website' property='og:type'/>
    <meta content='https://lh3.googleusercontent.com/-l_4_AKqAEe0/UedkZepeX6I/AAAAAAAAG0M/gjybsp_F2kM/d/Blogger-1500.png' property='og:image'/>
</b:if>

<meta expr:content='&quot;ja_JP&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<!-- End Open Graph metadata -->
</head>

個別のページなら、data:blog.postImageThumbnailUrl 値を、それ以外のページなら、Picasaから1500x1500pxの画像を直接指定しています。

誰が書いても、だいたい同じになると思いますが、data:blog.postImageThumbnailUrl は、72pxのサムネイルなので、デバッガーでは、エラーになります。なにも指定しないと適当なイメージを見つくろってくれるので、そちらが正解かもしれません。


このタグを追加したら、<html>にも要素を追加する必要があります。
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:mixi='http://mixi-platform.com/ns#' xmlns:og='http://ogp.me/ns#'>

こちらは、よくわからないので、参考サイトに書かれてあるまま貼り付けたところ、追加した途端に効果がありました。


schema.org の itemprop='image' の指定

<body>内で使えるとなれば、schema.orgのimageプロパティに設定するのは可能ということになります。

一部のみの抜粋です。
<b:includable id='post' var='post'>
<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image'/>
</b:if>
<b:if cond='data:post.thumbnailUrl'>
<meta expr:content='data:post.thumbnailUrl' itemprop='thumbnailUrl'/>
</b:if>
<a expr:name='data:post.id'/>


このブログのモバイルテンプレートは無効にしてあるので、1ヶ所のみですが、通常は2ヶ所必要になると思います。

個別のページでは、最初の画像を、itemprop='image'に指定。Indexページでは、BlogPostingごとに一つ指定されます。

BlogPostingには、thumbnailUrlというプロパティがあるので、data:post.thumbnailUrl はこちらに転用。Indexページでは、thumbnailUrlは表示されません。


今のところ、schema.orgは、Googleが対応していて、なおかつ検索結果の表示に影響を与えるitemtype以外は、設定してもほとんど意味がないと思いますので、わりと適当です。




Open Graph Protocol はすごい

OGPは最近設定したのですけど、ものすごいです。目に見えて効果がありました。たぶんFacebook以外にも色々影響があるのだと思います。
なにを隠そう、アカウントを持っていないので、何も分からず書いてあったことをブログに反映させただけです。

いいね!ボタンがあるならOGPの設定は必須です。いや、なかったら付けるべきです。


著作者情報も高い効果がありました。(Googleの検索結果に顔写真が表示されるやつ)

どのくらい効果があるかというと、google.comで著者情報が表示されたときから、海外からのアクセスが増えました。見ているのは英語圏の方ですので、例え検索トップに表示されたとしても、日本語の記事をクリックするとは思えません。 つまり…


彼(女)らは、間違いなく顔写真だけでクリックしてる!

内容関係なしにお客さんを呼んでくる、著作者情報恐るべし。


この2つは、絶対に設定しておくべきです。

最近、google.co.jpにも著作者情報が表示されました。

やったー!!めっちゃ目立ってるw。