microdataとソフトウェア(調査編)
以前microdata関連のブログを書いてから何日が経ったでしょうか(遠い目)。 続きはいつかきっと書くとして(えー),今日はソフトウェアアプリケーションについてmicrodataを入れるとどんなよいことがあるのか,ということに着目して書いていくことにしましょう。
目的
研究室で開発したソフトウェアを宣伝したい。そのためには,検索エンジンで目立つことが1つの対策だ。目立つためにmicrodataを使ってみよう。
目立つってどういうこと?
こういうことです。
あ,LINEなんてもう超有名なんだから宣伝する必要が無いって?いやいや,これを我々の開発してるソフトウェアでもやってしまいましょうということです。
調査
どんなページ?
調査から入りましょう。 先ほどのヒットをクリックするとこんなかんじで,普通のソフトウェアの紹介ページです。
コードを拝見
このように☆が検索結果にあるページというのは,なんらかのメタデータが埋め込まれているか,超大手のサイトで検索エンジンのクローラーが,勝手に構造を解釈しているかのどちらかです(まおりんしらべ)。さあ,コードを見てみましょう。
ちょっと小さくて見にくい感じですが‥ありました!"itemscope" microdataは"itemtype"と"itemscope"と"itemprop"で大抵の場合,構成されているので,それらが見つかればmicrodataでマークアップされていると考えていただいて問題ないです。 さて,このgoogleのページ : リッチ スニペット - ソフトウェア アプリケーション を見ると,色々とデータをマークアップして,メタデータを付与できるのことが分かります。しかしながら,全部入れるのは少々面倒ですし,検索結果にきれいに反映されないとせっかくやったのに(´Д⊂グスンということになるので,今回は拾ってきてくれそうなものだけに着目することにしましょう。
ピックアップ
必要なのは,上記画像の★★★☆☆評価:3 部分と68票,無料,Androidの部分です。 何のitempropを使用しているか,調べるために 構造化データ テストツールを使います。もう既にmicrodataによるマークアップが完了しているウェブページの場合,ここのURLに記入し,プレビューを押せばOKです。さきほど参照したサイトだと,このようにデータが表示されます。一部抜粋↓
マークアップされているタグを探していこう。
こちらのデータを参照すると,
<div itemscope itemtype="http://schema.org/SoftwareApplication"> <strong itemprop="name">LINE(ライン) - 無料通話・メールアプリ</strong> …中略… <dl itemprop="aggregateRating" itemscope itemtype="http://schema.org/aggregaterating"> <dt>ユーザー </dt> <dd> <ul> <li> <meta itemprop="worstRating" content="0" /> <span itemprop="ratingValue">6.1</span> <meta itemprop="bestRating" content="10" /> …中略… <em itemprop="ratingCount">68</em> </li> </ul> </dd> </dl> <dd itemprop="operatingSystems"> <ul><li>Android</li></ul> </dd> <ul itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <li><meta itemprop="price" content="0" /></li> </ul> </div>
まずは,概要的なitempropから。<strong itemprop="name">LINE(ライン) - 無料通話・メールアプリ</strong>
でソフトウェアの名前を書いています。
次に,評価を書くためのソフトウェアのプロパティitemprop="aggregateRating"
を使い,具体的な評価を書く際には評価を書くためのitemtype="http://schema.org/aggregaterating"
を使用し,入れ子にして書いています。その中での最低点をitemprop="worstRating"
で示し,最高点をitemprop="bestRating"
で示しています。なお,このworstとbestは特に指定しないと,1が最低,5が最高点となるようです。参照 : http://schema.org/AggregateRating また,metaタグを使うと,画面上には表示しないメタデータをhtml上に埋め込むことが出来ます。得点の最高,最低点なんで書かなくても良いですものね? さて,ここでの得点はitemprop="ratingValue"
を使って書いています。<span itemprop="ratingValue">6.1</span>
この6.1点が,5点満点に変換されて,評価:3と検索結果では表示されているようです。
票数は,<em itemprop="ratingCount">68</em>
で書かれています。お気づきのように,microdataのitemprop等のタグはspanやdivタグに限らず,通常のタグ内に埋め込んでしまって構いません。そして,そのタグが閉じられるまでは,そのmicrodataで指定したプロパティが有効になっています。従って,この評価については,<dl itemprop="aggregateRating" itemscope itemtype="http://schema.org/aggregaterating">
とdlタグで始まっているので</dl>
で閉じられています。
金額について書く時には"http://schema.org/Offer"
をボキャブラリとして使い,プロパティとしてpriceでマークアップし,その中身はcontent="0"で無料であることを示しています。<li><meta itemprop="price" content="0" /></li>
後出しジャンケン的な解説になりますが,itemscopeというのが,次に書かれているitemtype="http://schema.org/aggregaterating"
が有効になっている範囲が始まるぜベイベ的な意味を持っています。
そんな関係で,OperatingSytemは評価から外れるので,aggregateratingのタグの外に出て,<dd itemprop="operatingSystems">
で書かれています。
言葉で説明すると少しややこしいかもしれませんが,グラフにするとこんなかんじです。
RDFグラフの視覚化 Turtle, Microdata, JSON-LD より
グラフっ
評価の部分は入れ子になっていることがわかると思います。
JSONっ
JSONにしたほうがやりやすいという方もいるので,JSONにするとこんなかんじです。 参照:Live Microdata
{ "items": [ { "type": [ "http://schema.org/SoftwareApplication" ], "properties": { "name": [ "LINE(ライン) - 無料通話・メールアプリ" ], "aggregateRating": [ { "type": [ "http://schema.org/aggregaterating" ], "properties": { "worstRating": [ "0" ], "ratingValue": [ "6.1" ], "bestRating": [ "10" ], "ratingCount": [ "68" ] } } ], "operatingSystems": [ "\nAndroid\t\t\t\t\t\t\t\t\n" ], "offers": [ { "type": [ "http://schema.org/Offer" ], "properties": { "price": [ "0" ] } } ] } } ] }
続くっ
次回はマークアップ編です。お手持ちの開発した,もしくは評価したいソフトウェアにmicrodataでマークアップします。ご期待くださいっ