ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog

テクノロジー

Yahoo!検索プラグインとメタデータの埋め込み

こんにちは。検索開発部の佐藤 学です。
Yahoo!検索では昨年12月に、Yahoo!検索プラグインという機能を一部リリースしました。 機能面や全体の仕組みについては、以前の記事 で紹介していますので、こちらをご覧ください。 今回は検索結果をリッチ表示化するために必要な構造化データの提供を行う方法の一つである、HTMLへのメタデータ埋め込みについて紹介したいと思います。

検索結果のリッチ表示化と構造化データ

Yahoo!検索では、すでに飲食店やレシピといったジャンルでリッチな検索結果表示を提供していますが、 まだYahoo!検索側でサイトを選択し、個別に構造化データを抽出しているケースが多いのが現状です。

この方法ではHTMLの変更の影響を受けてしまい、安定して構造化データを取得することが難しいのですが、今回紹介するHTMLへのメタデータ埋め込みを行うことで、 レイアウトの変更等に左右されずに、検索バックエンドへの安定した構造化データ提供を行うことができるようになります。

安定した構造化データ提供ができていれば、 開発ツール公開後には、サイト管理者側でプラグインを開発、提出して、プラグイン一覧ページに掲載できます。 また、その中で多くの検索利用者にとって有用なプラグインは、ディフォルトで検索結果に表示する場合があります。

埋め込むメタデータの形式には、RDFa,Microformatsといったフォーマットに対応していますが、Microformatsは対応している分野が限られているので、基本的にはRDFaを利用することになると思います。

RDFa

RDFaとは、メタデータを表現するための枠組みであるRDFをXHTMLの属性として埋め込むための仕組みです。 2008年10月に、仕様がW3C勧告として公開され、検索サービス各社がサポートしたことで注目を集めています。

また、現状ではRDFaはXHTMLを前提とした仕様です。 RDFaをHTMLに対応する仕様についても草案として提案されていますが、 基本的にはHTMLでサイトを作成している場合はXHTMLに変更する必要があります。

ただし、Yahoo!のクローラはHTMLや、整形式でないXHTMLを、整形式のXHTMLに変換する機能を持っていますので、標準仕様を無視してHTMLにRDFaの属性を入れて、データを抽出させることも実際には可能です。しかし、標準仕様に従わない場合、他サービスに対応するときに問題となる可能性や、整形式のXHTMLからあまりに離れている場合、正しく抽出できない可能性などが考えられますので、採用可能であればXHTMLで記述することをおすすめします。

XHTMLにRDFaを追加して、Yahoo!の検索バックエンドに構造化データ提供を行うには、以下の3点を記述する必要があります。
  • XML名前空間の宣言
    property属性やrel属性の値として記述する、rdfs,mediaなどといった接頭辞の名前空間について、宣言を記述します。
  • property属性
    タグで囲まれたテキストの内容を抽出させたい場合に記述します。
  • rel属性
    src属性や、href属性でリンクされた、URLを抽出させたい場合に記述します。
そして、propertyやrelの値としては、vCard,vCalendarなど RDF用の語彙のなかから適切なものを選択して記述します。

RDFaのサンプル

RDFaでYahoo!検索のバックエンドへ構造化データ提供するための、具体的な例を以下に示します。

商品情報の場合

<!-- 記述する対象の種類と、XML名前空間の宣言 -->
<div typeof="product:Product"
 xmlns:product="http://search.yahoo.com/searchmonkey/product/"
 xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
 xmlns:media="http://search.yahoo.com/searchmonkey/media/"
 xmlns:review="http://purl.org/stuff/rev#"
 xmlns:xsd="http://www.w3.org/2001/XMLSchema#"
 xmlns:currency="http://search.yahoo.com/searchmonkey-datatype/currency/">

 <!-- 商品の定価、販売価格、通貨 -->
 <span property="product:listPrice">1280</span>
 <span property="product:salePrice">680</span>
 <span property="product:currency" content="JPY" />

 <!-- 商品名 -->
 <span property="rdfs:label">カテゴリ6 LANケーブル - 3m</span>

 <!-- 商品の画像 -->
 <span rel="rdfs:seeAlso media:image">
  <img src="http://example.com/product.jpg"/>
 </span>

 <!-- クチコミ・レビューによる5点満点評価、評価の総件数 -->
 <div rel="review:hasReview">
  <span typeof="review:Review">
   <span property="review:rating" datatype="xsd:float">4.5</span>
   <span property="review:minRating" datatype="xsd:integer">0</span>
   <span property="review:maxRating" datatype="xsd:integer">5</span>
   <span property="review:totalRatings" datatype="xsd:integer">45</span>
  </span>
 </div>
</div>

店舗情報の場合

<!-- 記述する対象の種類と、XML名前空間の宣言-->
<div typeof="vcard:VCard commerce:Business"
 xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#"
 xmlns:vcard="http://www.w3.org/2006/vcard/ns#"
 xmlns:review="http://purl.org/stuff/rev#"
 xmlns:xsd="http://www.w3.org/2001/XMLSchema#">

 <!-- 店舗名 -->
 <span property="rdfs:label vcard:fn">ヤフー レストラン</span>

 <!-- 住所 -->
 <div rel="vcard:adr">
  <div typeof="vcard:Address">
   <span property="rdfs:label">東京都港区赤坂9-7-1 </span>
  </div>
 </div>
 <span property="vcard:tel">03-0000-0000</span>

 <!-- 緯度、経度 -->
 <div rel="vcard:geo">
  <span property="vcard:latitude" datatype="xsd:float">37.392326</span>
  <span property="vcard:longitude" datatype="xsd:float">-121.974426</span>
 </div>

 <!-- 画像 -->
 <span rel="vcard:photo">
  <img src="http://example.com/restaurant.jpg"/>
 </span>

 <!-- 公式ページのURL -->
 <a rel="vcard:url" href="https://www.yahoo.co.jp">Yahoo! JAPAN</a>

 <!-- 評価情報 -->
 <div rel="review:hasReview">
  <div typeof="review:Review">
   <span property="review:rating" datatype="xsd:float">3.5</span> 点 / 
   <span property="review:totalRatings" datatype="xsd:integer">14</span>件
   <span property="review:minRating" datatype="xsd:integer">1</span> - 
   <span property="review:maxRating" datatype="xsd:integer">5</span>
  </div>
 </div>
</div>
例ではdiv,spanなどの要素を使っていますが、どの要素を使うかについては、各サイトで利用しているものに合わせていただき、 属性の親子関係と、どの属性指定を使うかという部分について参考にしていただければと思います。

RDF語彙の選択

サンプルで提示したようなジャンルには該当しない場合、 property属性やrel属性に入れる値として、適切なRDF語彙を探す必要があります。 基本的にはどのような語彙でも利用可能ですが、 推奨する語彙としては、Yahoo! Incで提供しているSearchMonkeyの語彙と共通になります。

英語版のみとなってしまいますが、 SearchMonkey - Getting Startedや、 SearchMonkey vocabulariesのページに該当するものがあれば利用可能です。 これらのドキュメントに該当するものが存在しない場合、検索エンジンなどで探すか、自分で語彙を定義することになります。 下記のサンプルは、digicamという名前空間接頭辞で独自の語彙を追加する例です。
<div xmlns:digicam="http://example.com/vocab/digicam#">
 <span property="digicam:megapixels">7.2</y:meta>
</div>
XML名前空間宣言の属性の値には、関連するドキュメントや、 RDFスキーマと呼ばれる形式のファイルを設置して、そのURLを記述することが望ましいですが、 Yahoo!のクローラはファイルの存在をチェックしていませんので、 この記述を追加するだけでデータ提供自体は可能です。

RDFaにより構造化データ提供する方法の説明は以上になりますが、 ここに書いた内容ではすべてカバーしきれていませんので、詳細なガイドの準備を進めています。

RDF関連の用語は抽象的な表現が多くてとっつきにくい部分はあるのですが、 必要な作業としては簡単なものなので、ぜひこうしたメタデータ埋め込みの導入を検討いただければと思います。

こちらの記事のご感想を聞かせください。

  • 学びがある
  • わかりやすい
  • 新しい視点

ご感想ありがとうございました

このページの先頭へ