2013年8月1日木曜日

data:post.firstImageUrl

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

📖最新は data:blog.postImageUrl を使えます。
(記2023年1月26日)

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

真っ先に浮かんだのは、構造化データの schema.org と Facebook の Open Graph Protocol への設定。

data:blog.postImageThumbnailUrl というのは、あるのですが、これは、72x72px の小さなサムネイルで、しかも、投稿内のどの画像が使われるのか分からない代物。

image を指定するのに、少し困っていたので、一目で「これは!」と思い、即座に試してみました。



Facebook の og:image の指定

最近 og:image は最低 200×200 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。