Google Blogger には data:post.firstImageUrl というテンプレートタグがあり、投稿記事の最初のイメージの URL を返してくれます。
(記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 のデバッガーでみると、「画像が小さすぎる」という警告が出ます。
初めに個別の記事のヘッダーに firstImageUrl を設定してみました。
<meta expr:content='data:post.firstImageUrl' property='og:image'/>
</head>
TEMPLATE ERROR でデータが展開されません。
<body> 内に設置しないと使えないようです。この辺りは、基本的な知識が欠けているのを露呈。
<body> に設置し直してみると、HTML は展開されるものの、今度は、Facebook のデバッガーでエラー。
こちらは、逆に <head> 内に設置しないといけない模様。
ということで、data:post.firstImageUrl は、og:image には使えないという自分なりの結論。
最終的に、OGPの設定は、以下のようになりました。
<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == "item"'>
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSmf3I0ZONPT3Uj1dOQfivGnYcobMbgKy6FsJf7V1GVtR8Y5ILEBtzOjR7qV35SfO7VKANYeNr2PcWJgFiF9AyCrUBeANvER06djvVblGcYBGr9L6g-NrdbootESV0dYOd7Ilsl7PjNAyo/d/Blogger-1500.png' property='og:image'/>
</b:if>
<meta expr:content='"ja_JP"' 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>にも要素を追加する必要があります。
こちらは、よくわからないので、参考サイトに書かれてあるまま貼り付けたところ、追加した途端に効果がありました。
schema.org の itemprop='image' の指定
<body> 内で使えるとなれば、schema.org の image プロパティに設定するのは可能ということになります。
一部のみの抜粋です。<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>
このブログのモバイルテンプレートは無効にしてあるので、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。