プロパティ
Google では、以下の microdata、RDFa、microformat（hRecipe）プロパティを認識します。microformats のプロパティ名が microdata/RDFa のプロパティ名と異なる場合、hRecipe のプロパティ名はかっこ内に記載されています。 | プロパティ | 説明 |
name（fn） | 必須レシピの名前です。 |
recipeType（tag） | 主菜、副菜、デザートなどレシピの種類です。 |
photo | レシピの画像です。 |
published | レシピを公開した日付を ISO 日付形式で指定します。 |
summary | レシピの要約文です。 |
review | レシピのレビューです。レビュー情報をネストすることができます。 |
prepTime | 準備にかかる時間です。ISO 8601 の時間長の形式（リンク先は英語）で指定します。min、max を子要素として利用して、時間の最小、最大値を指定できます。 |
cookTime | 実際の調理にかかる時間です。ISO 8601 の時間長の形式（リンク先は英語）で指定します。min、max を子要素として利用して、時間の最小、最大値を指定できます。 |
totalTime（duration） | 準備時間と調理時間の合計時間です。ISO 8601 の時間長の形式（リンク先は英語）で指定します。min、max を子要素として利用して、時間の最小、最大値を指定できます。 |
nutrition | レシピの栄養情報です。子要素として、servingSizecalories、fat、saturatedFat、unsaturatedFat、carbohydrates、sugar、fiber、protein、cholesterolを含めることができます。これらの要素は hRecipe microformat では明示的に定義されていませんが、Google ではこれらを認識します。 |
instructions | レシピの作り方です。ひとつひとつのステップを子要素 instruction を用いてアノテートすることもできます。 |
yield | レシピの分量です（例: 4 人分、3 個分など）。 |
ingredient | レシピに必要な材料です。子要素に name（材料名）と amount（分量）を含めることができます。ひとつひとつの材料に ingredient をマークアップする必要があります。 |
author | レシピの作者/投稿者/講師です。子要素として人物を含めることができます。 |
コンテンツのマークアップ
次の HTML コードは、アップルパイのレシピについて記述しています: <div> <h1>おばあちゃんの手作りアップルパイ</h1> <img src="apple-pie.jpg"/> 作成: 東京 花子 公開日: 2009 年 11 月 5 日 おばあちゃん自慢のアップルパイのレシピです。ナツメグが隠し味です。 総合評価: 4.0（35 件のレビュー） 準備時間: 30 分 調理時間: 1 時間 合計調理時間: 1 時間 30 分 分量: 22 cm パイ皿 1 枚分 1 人分: 8 等分 1 切れ 1 切れあたりのカロリー: 250 kcal 1 切れあたりの脂質: 12 g 材料: リンゴ: 3 個 砂糖: 25 g ... 作り方: 1. リンゴの皮をむいて切ります。 2. 砂糖とシナモンを混ぜます。リンゴに分量外の砂糖を使います。 ... </div>
次のセクションでは、microdata、microformats、RDFa を使用してこのコンテンツをマークアップする方法について説明します。
microdata microdata でマークアップした HTML コードは、次のようになります。
<div itemscope itemtype="http://data-vocabulary.org/Recipe" > <h1 itemprop="name">おばあちゃんの手作りアップルパイ</h1> <img src="apple-pie.jpg" itemprop="photo"/> 作成: <span itemprop="author">東京 花子</span> 公開日: <span itemprop="published" datetime="2009-11-05">2009 年 11 月 5 日</span> <span itemprop="summary">おばあちゃん自慢のアップルパイのレシピです。ナツメグが隠し味です。</span> <span itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate"> 総合評価: <span itemprop="rating">4.0</span>（ <span itemprop="count">35</span> 件のレビュー） </span> 準備時間: <time itemprop="prepTime" datetime="PT30M">30 分</time> 調理時間: <time itemprop="cookTime" datetime="PT1H">1 時間</time> 合計調理時間: <time itemprop="totalTime" datetime="PT1H30M">1 時間 30 分</time> 分量: <span itemprop="yield">22 cm パイ皿 1 枚分</span> <span itemprop="nutrition" itemscope itemtype="http://data-vocabulary.org/Nutrition"> 1 人分: <span itemprop="servingSize">8 等分 1 切れ</span> 1 切れあたりのカロリー: <span itemprop="calories">250 kcal</span> 1 切れあたりの脂質: <span itemprop="fat">12 g</span> </span> 材料: <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient"> <span itemprop="name">リンゴ</span>: <span itemprop="amount">3 個</span> </span> <span itemprop="ingredient" itemscope itemtype="http://data-vocabulary.org/RecipeIngredient"> <span itemprop="name">砂糖</span>: <span itemprop="amount">25 g</span> </span> ... 作り方: <div itemprop="instructions"> 1. リンゴの皮をむいて切ります。 2. 砂糖とシナモンを混ぜます。リンゴに分量外の砂糖を使います。 ... </div> </div>
このサンプルについて解説します:
- 1 行目の
<itemscope itemtype="http://www.data-vocabulary.org/Recipe"> は <div> で囲まれた HTML がレシピを表していることを示しています。itemscope は <div> のコンテンツがアイテムについて記述していることを示し、itemtype="http://www.data-vocabulary.org/Recipe" はアイテムがレシピであることを示しています。 - この例では、レシピのプロパティとして、作者、材料、準備時間などを記述しています。レシピのプロパティをラベル付けするため、これらのプロパティのいずれかを含む各要素（
<div> や <span> など）に、プロパティを示す itemprop 属性を割り当てます。（例: <span itemprop="author">）。 - プロパティは別のアイテムで構成されることもあります（つまり、アイテムに他のアイテムを含めることができます）。たとえば上記のレシピには、集計レビューのアイテム（
itemtype="http://www.data-vocabulary.org/Review-aggregate"）とそのプロパティ（rating、count）、さらにレシピの材料のアイテム（ingredient）とそのプロパティ（amount、name）が含まれています。 - 特別な場合を除き、ユーザーに対して隠されているコンテンツを Google が表示することはありません。ただし、ページの閲覧者に詳細情報を表示したくないときでも、検索エンジンにこの情報を提供すると役に立つ場合があります。この例では、
datetime 属性を使って、リッチ スニペットのパーサーにその属性値がレシピの準備時間、調理時間、合計調理時間を表すことを伝えますが、ページ上の表記はユーザーが理解できる時間表示を維持できます。たとえば <time itemprop="cookTime" datetime="PT1H">1 時間 </time> のようになります。
Microformats microformats でマークアップした HTML コードは、次のようになります（注: 上記のプロパティのいくつかは、Google では認識しますが、microformats.org で公開されている公式の hRecipe draft specification には含まれていません）。
<div class="hrecipe"> <span class="item"> <h1 class="fn">おばあちゃんの手作りアップルパイ</h1> </span> <img src="apple-pie.jpg" class="photo" /> 作成: <span class="author">東京 花子</span> 公開日: <span class="published">2009 年 11 月 5 日<span class="value-title" title="2009-11-05"></span></span> <span class="summary">おばあちゃん自慢のアップルパイのレシピです。ナツメグが隠し味です。</span> <span class="review hreview-aggregate"> <span class="rating"> 総合評価: <span class="average">4.0</span> （<span class="count">35</span> 件のレビュー） </span> </span> 準備時間: <span class="prepTime">30 分<span class="value-title" title="PT30M"></span></span> 調理時間: <span class="cookTime">1 時間<span class="value-title" title="PT1H"></span></span> 合計調理時間: <span class="duration">1 時間 30 分<span class="value-title" title="PT1H30M"></span></span> 分量: <span class="yield">22 cm パイ皿 1 枚分</span> <span class="nutrition"> 1 人分: <span class="servingsize">8 等分 1 切れ</span> 1 切れあたりのカロリー: <span class="calories">250 kcal</span> 1 切れあたりの脂質: <span class="fat">12 g</span> </span> 材料: <span class="ingredient"> <span class="name">リンゴ</span>: <span class="amount">3 個</span> </span> <span class="ingredient"> <span class="name">砂糖</span>: <span class="amount">25 g</span> </span> 作り方: <span class="instructions"> 1. リンゴの皮をむいて切ります。 2. 砂糖とシナモンを混ぜます。リンゴに分量外の砂糖を使います。 ... </span> </div>
このサンプルについて解説します:
- 1 行目の
class="hrecipe" は <div> で囲まれた HTML がレシピ（この例では、アップルパイ）を表していること示しています。 - 構造化情報は、
class 属性（class="fn"、class="author" など）とその値（"砂糖"、"1 時間 30 分" など）で指定します。<span> や <div> などのタグは、必要に応じて変更できます。 - レビュー情報を表示するには、集計レビュー情報（
hreview-aggregate）を hrecipe の中にネストします。アイテムのネストについて詳しくは、こちらをご覧ください。 - 評価（
class="rating"）はレシピのウェブページで「総合評価: 4.0」と記載されている場合に、その値の部分を表します。レビューの評価のマークアップについて詳しくは、こちらをご覧ください。 - 特別な場合を除き、ユーザーに対して隠されているコンテンツを Google が表示することはありません。ただし、ページの閲覧者に詳細情報を表示したくないときでも、検索エンジンにこの情報を提供すると役に立つ場合があります。上記の HTML は、microformats の value class パターンの例を含みます。これは、ISO 8601 の時間長の形式（リンク先は英語）を使って検索エンジンに合計調理時間を伝えるとともに、ページ上の表記はユーザーが理解できる時間表示（「1 時間 30 分」）を維持することができます。また、
title 属性で、この属性の値を合計調理時間として使うようリッチ スニペットのパーサーに示すとともに、ページ上の表記をユーザーが理解できる形式に維持できます。たとえば、<span class="value-title" title="PT1H30M"> のようになります。
RDFa RDFa でマークアップした HTML は、次のようになります。
<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Recipe"> <h1 property="v:name">おばあちゃんの手作りアップルパイ</h1> <img src="apple-pie.jpg" rel="v:photo"/> 作成: <span property="v:author">東京 花子</span> 公開日: <span property="v:published" content="2009-11-05">2009 年 11 月 5 日</span> <span property="v:summary">おばあちゃん自慢のアップルパイのレシピです。ナツメグが隠し味です。</span> <span rel="v:Review"> <span typeof="v:Review-aggregate"> <span rel="v:rating"> <span typeof="v:Rating"> 総合評価: <span property="v:average">4.0</span> （<span property="v:count">35</span> 件のレビュー） </span> </span> </span> </span> 準備時間: <span property="v:prepTime" content="PT30M">30 分</span> 調理時間: <span property="v:cookTime" content="PT1H">1 時間</span> 合計調理時間: <span property="v:totalTime" content="PT1H30M">1 時間 30 分</span> 分量: <span property="v:yield">22 cm パイ皿 1 枚分</span> <span rel="v:nutrition"> <span typeof="v:Nutrition"> 1 人分: <span property="v:servingSize">8 等分 1 切れ</span> 1 切れあたりのカロリー: <span property="v:calories">250 kcal</span> 1 切れあたりの脂質: <span property="v:fat">12 g</span> </span> </span> 材料: <span rel="v:ingredient"> <span typeof="v:Ingredient"> <span property="v:name">リンゴ</span>: <span property="v:amount">3 個</span> </span> </span> <span rel="v:ingredient"> <span typeof="v:Ingredient"> <span property="v:name">砂糖</span>: <span property="v:amount">25 g</span> </span> </span> ... 作り方: <div property="v:instructions"> 1. リンゴの皮をむいて切ります。 2. 砂糖とシナモンを混ぜます。リンゴに分量外の砂糖を使います。 ... </div> </div>
このサンプルについて解説します。
- このサンプルの先頭では
xmlns を使用して、ネームスペースを宣言しています。このネームスペースには、ボキャブラリ（エンティティとそのコンポーネントのリスト）が指定されています。ページ内の人物、レビュー、レシピ、イベント、場所のデータをマークアップするときは、いつでもxmlns:v="http://rdf.data-vocabulary.org/# namespace" 宣言を使用できます。末尾に必ずスラッシュと # を付けます（xmlns:v="http://rdf.data-vocabulary.org/#"）。 - また、1 行目の
typeof="v:Recipe" は、マークアップしたコンテンツがレシピについて記述していることを示しています。 - レシピの各プロパティ（レシピ名、要約文、脂質など）には、
property を使用してラベル付けします。プロパティ名の前には v: を付けます（<span property="v:fat">）。 - 特別な場合を除き、ユーザーに対して隠されているコンテンツを Google が表示することはありません。ただし、ページの閲覧者に詳細情報を表示したくないときでも、検索エンジンにこの情報を提供すると役に立つ場合があります。この例では、
content 属性を使い、リッチ スニペットのパーサーにその属性値がレシピの準備時間、調理時間、合計調理時間を表すことを伝えますが、ページ上の表記はユーザーが理解できる時間表示を維持できます。たとえば、<span property="v:prepTime" content="PT30M">30 分</span> のようになります。
0 件のコメント:
コメントを投稿