microdataのBlogPostingをBloggerで使う

前回の記事でhAtomのmicrodataがBloggerに埋め込まれているのは判りました。
Search Consoleの構造化データのエラーを減らすべくmicrodataの書き方を試行錯誤中です (hAtom編)

次にBlogPostingの場合を調べてみました。

BlogPostingは名前の通りschema.org でソーシャルメディアのブログに関連する情報をbotが理解するための構造が定義されています。GoogleやBingなどの検索サイトのbotがあなたのブログを巡回しに来たとき、基本的な情報をbotに理解しやすい形で表現したものです。
今回はBloggerで使うのでブログ用の構造を主に使います。

schema.orgにはブログ以外の情報サイトに適したものも定義されています。例えば料理のレシピをよく紹介される方はrecipeを眺めてみると良いでしょう。調理時間は？　手順は？　料理のジャンルは？　などを正確にbotへ伝えることができます。より正確にあなたのレシピが検索結果に表示されることになります。
あるいは、本の紹介、楽曲の紹介、ゲームの紹介などに適した構造が定義されているようです。主にショッピングサイト向けですかね。

前回の記事と同じく詳細はより良いサイトがあるでしょうから他サイト様にお任せです。
基本的な構造と定義の仕方を中心にBlogger特化気味に書いておきます。

schema.orgをmicrodataで埋め込む

hAtomではクラス名を使ってデータを埋め込んでいました。schema.orgではどうすればよいのでしょうか。
使い方のドキュメントはこちらにあります。

Getting started with schema.org using Microdata

htmlの要素タグに属性を追加してデータの範囲を指定していくのは同じです。使う属性名が異なります。hAtomはcssと同じDOMを意識すれば良いのでhtmlのデザインを理解していればすぐにデータを追加できる感じでした。schema.orgもmicrodata表現を使うなら基本的に同じですが少し面倒です。クラス名を使わないので、別の階層表現をしなくてはなりません。

itemscopeとitemtype

階層を表す属性が"itemscope"です。htmlの要素にこの属性を追加すると要素の範囲内にschema.orgのデータを置いておかなくてはなりません。

itemtypeとはschema.orgのどのデータタイプの情報があるかを宣言します。

<div itemprop='blogPost' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>
 ...
</div>

itempropは後で説明します。
Bloggerでは値の無い属性を書けないので"itemscope='itemscope'"と書きます。ちょっとExampleと違うので最初戸惑います。
itemtypeはBlogPostingを例にしています。
これでhAtomのhentryと同じ感じの宣言になります。

div要素を例にしましたがもちろん他の要素に属性を置いてもかまいません。まぁ、cssのDOMと大きくかけ離れると書いてる本人が混乱すると思います。

あとはこの範囲内に入れ子にしながら他のデータを配置していきます。

itemprop

"itemprop"はデータの名称になります。この名称のデータがitempropの属性値を持つ要素内にありますとbotに教える事になります。

<div itemprop='blogPost' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>
 ...
 <span itemprop='name'>NAME HERE</span>
 ...
</div>

入れ子になったitemtype

itempropで構造化データを追加しているとStructured Data Testing Toolですぐにエラーが出ます。小さいデータ構造itemtypeの集まりでできているためitempropの名称だけでは何のデータを表すか明確にならないのです。そのため、いちいちitemtypeを指定する必要があるようです。例えばブログの著者を追加したい場合、単にitemprop='author'と書くとエラーになってしまいます。こんな時は次のように書くようです。

<div itemprop='blogPost' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>
 ...
 <span itemprop='name'>NAME HERE</span>
 ...
 <div itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'gt;
  <span itemprop='name'>Author NAME HERE</span>
 </div>
 ...
</div>

Personというitemtypeを使う宣言をして著者の名前を追加しました。さらに著者の写真がある場合には’image'という名前の'ImageObject'タイプのスコープを追加して写真の'url'を指定する事になります。う～ん、どんどん文が長くなっていく。もう面倒になってきた。

まとめ

hAtomに比べると指定できるデータの種類は圧倒的に多いです。的確に使えば検索サイトなどに正しくブログを認識してくれることにはなります。
schema.orgには必須のデータというのは無いようなのですぐに使えそうなデータだけマークアップすれば良いように思います。でも、Structured Data Testing Toolではエラー表示されたりします。生ものなので仕様もよく変わるでしょうし、対応する側もすぐに使っていいものかわかりません。

悪い点はhtmlのコードが長くなって読みにくくなることです。hAtomはcssの延長程度で済むのですが扱えるデータが増えるに従い、人間向けの情報とブラウザ向けの情報とbot向けの情報が混然としてしまいます。
ここはやはりJSON-LDを使いbot向けデータを分離したいところですがBloggerでは作れそうにないのが残念です。

----

このブログを検索

Signal Flag "Z"