2013年11月6日水曜日

Bloggerの投稿をschema.orgのDescriptionに対応させる

2013年12月17日
投稿内のdata:blog.metaDescriptionの扱いが正しくなかったため修正しました。

Blogger - data:blog.metaDescription

投稿記事ごとのschema.orgの description への対応方法です。新しいテンプレートはすでに対応されているものもあります。


data:post.snippetをdescriptionに割り当てる方法

http://schema.org/BlogPosting を検索して、青字のコードを追加します。

<b:includable id='post' var='post'>
  <div class='post hentry'  itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.snippet'>
    <meta expr:content='data:post.snippet' itemprop='description'/>
    </b:if>

モバイル テンプレートと2ヶ所ある場合があります。

data:post.snippet(投稿記事の要約)を schema.orgの descriptionに割り当てています。

構造化データ テスト ツールの結果

記事本文をdescriptionに割り当てる公式の方法

公式のテンプレートでschema.orgに対応しているものは次のようになっています。

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
    <!-- Then use the post body as the schema.org description,
    for good G+/FB snippeting. -->
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
<b:else/>
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
</b:if>

投稿記事の本文の先頭から description を取得しています。先の data:post.snippet を利用したものと、ほぼ同じ結果になります。

構造化データ テスト ツールの結果

ただ、このテンプレートは、data:blog.metaDescription がない場合のみ展開されるように条件分岐されています。

data:blog.metaDescriptionはブロガーの設定の検索設定、メタ タグで設定した説明です。

その為ここを設定すると、schema.orgのDescriptionのマークアップは展開されないことになります。

data:blog.metaDescription は、ブログの説明で(対応しているなら)、http://schema.org/Blogのくくりのなかにあります。
今回マークアップしたのは、投稿記事の説明http://schema.org/BlogPostingの中にあり、 itemprop='description'が2つあってもおかしくないので、分岐しなくともいいような気がします。

テンプレートが間違っているのか真意が他にあるのか判りませんが、2番目は次のように条件分岐せずに簡略化できると思います。
構造化データ テスト ツールで確認しても問題は見つかりません。

変更前
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

変更後
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>


むしろバッティングする可能性のあるのは、headerに展開される投稿ごとの検索向け説明で、こちらを記入すると、種類が違うdescriptionが2つになります。
Bloggerの検索向け説明

<meta content='検索向け説明' name='description'/>

<div itemprop='description' >本文から抜粋した説明</div>

調べた限りのBlogger公式のテンプレートでは、これを意に介していません。
またGoogle+ のスニペットに関してのみですが、複数の種類があるのは問題がなく、schema.org マイクロデータが優先されると明記されています。

スニペット - Google+ Platform — Google Developers

この優先順位が逆だと、もっと都合が良いのですが、さしあったて問題ないと思います。
検索向け説明は、<b:include data='blog' name='all-head-content'/>で他のヘッダー情報と一緒に一斉にはき出されるので、これだけを、schema.org のマークアップや分岐の条件として利用することができません。

このブログのマークアップは他のテンプレートを見る前に考えましたので、data:post.snippetを利用した方法になっています。勧めるなら無難な公式の方法を選ぶかもしれません。