Google検索結果にPageMapでサムネイルを出す方法

Googleのスマホの検索結果にたまに出てくるサムネイル付きのリッチスぺニットを出すマークアップです。

Google検索結果にPageMapでサムネイルを出す方法

Googleで空港の駐車場を調べていたら・・・あれ？サイトによっては画像が表示されているところがありますね。
こんな感じで。

一番上と一番下がそれぞれ画像が出ています。
これってどうやって表示してるんでしょうか・・・。調べてみたらGoogle推奨の方法があるんですね。

意外と簡単実装のPageMap

Googleのドキュメントの中に方法が紹介されていました。

基本的には方法は2つ。

PageMapのマークアップを書く

例にある通りこんなタグをコメントアウトして入れることでPageMapの指定ができるようです。

<!--
<PageMap>
    <DataObject type="thumbnail">
<Attribute name="src" value="http://www.example.com/recipes/applepie/applepie.jpg"/>
<Attribute name="width" value="100"/>
<Attribute name="height" value="130"/>
</DataObject>
</PageMap>
-->

これはちょっと面倒ですが、Wordpressなどの場合は、フッタなどのテンプレートに以下のコードを入れるとOKだと思います。

<?php $imgattr = wp_get_attachment_image_src(get_post_thumbnail_id()) ; ?>
<!--
<PageMap>
    <DataObject type="thumbnail">
<Attribute name="src" value="<?php echo $imgattr[0]; ?>"/>
<Attribute name="width" value="<?php echo $imgattr[1]; ?>"/>
<Attribute name="height" value="<?php echo $imgattr[2]; ?>"/>
</DataObject>
</PageMap>
-->

ややこしい場合はmetaタグへの追加でも可能とのこと。

<meta name="thumbnail" content="画像URL" />

なので、Wordpressの場合は、

<meta name="thumbnail" content="<?php the_post_thumbnail_url('medium'); ?>" />

でもいいってことですね。

大元になるPageMapのヘルプはこちら。

一応PageMapのthumbnailについては、src,width,heightが必須属性という記載がありますが、srcだけでも動く感じです。
先々ダメになるかもですが。
あと別サイトでこの指定をした途端、すぐに検索結果に反映されました。すげー。
なんでなんでしょうね・・・？