自サイトのレシピを取り込みできるようにしたい。

HTMLタグに規定のクラス名を指定する事で取り込みできるようになります。

こちらに少し書いていますが、一定のルールにそってHTMLをマークアップして頂ければ、運営されているサイトやブログから『Favo Recipe』へレシピを取り込む事ができるようになります。

このページの下の方に、サンプルとして「かんたん!宇和島の鯛めし」のレシピがあります。このページはこのサンプルレシピを取り込み出来るように作っています。試しにレシピ取り込みしてみて下さい(味は保証できませんが・・・)。

  • 当ページに書かれている仕様は、予告なく変更する場合があります。変更した場合は、「お知らせ」と当ページで通知致します。
  • Favo Recipeのレシピ取り込み機能のサービスは、停止または中止する場合があります。
  • 当ページ情報に基づく貴サイト改変において発生した損失・損害等については一切の保証を致しかねます。
  • HTMLタグの書き方など、技術的な質問にはお答えできません。
ブログの場合、ブログサービスによっては使用できない場合があるかもしれません。
また、ブログサービスによっては、スマートフォンでブログを見た時はスマートフォン用のデザイン(URL)となり、記述したHTMLタグやクラス名が有効にならない場合があります。その場合は、ページを共有してのレシピ取り込みはできません。(ページ内に表示方法をPCモードに切り替えるリンクがある場合は、PCモードに切り替えると取り込みできます。)

HTMLのマークアップのしかた

詳しくは後述しますが、Favo Recipeは、「microformatsのhRecipe」および「Googleのレシピ リッチスニペット」の仕様に準拠しており、HTMLの各タグのクラス名からレシピ情報の位置を判断し、レシピ情報を取得しています。

Googleさんの方は多少融通が効くようですが、Favo Recipeは次の仕様となっていますので、よろしくお願い致します。

手順としては、レシピ情報部分のHTML各タグに、class属性を追加していく流れとなります。
(Favo Recipeで取り込みできるのは、1ページにつき1つになりますのでご注意下さい。複数のマークアップがあった場合、最初に見つかったレシピを取得します。)

class属性の値(クラス名)を次に示します。

(クラス名とその階層)
hrecipe    (レシピ情報開始【必須】)
 ┣ fn      (レシピ名【必須】)
 ┣ photo     (レシピ写真)
 ┣ duration   (調理時間(value-title))
 ┣ calories   (カロリー)
 ┣ yield     (レシピの分量)
 ┣ ingredients  (材料情報開始)
 ┃ ┣ ingredient   (材料アイテム1開始)
 ┃ ┃ ┣ name       (材料名1)
 ┃ ┃ ┗ amount      (分量1)
 ┃ ┣ ingredient   (材料アイテム2開始)
 ┃ ┃ ┣ name       (材料名2)
 ┃ ┃ ┗ amount      (分量2)
 ┃ ┃ :                :
 ┃ ┗ ingredient   (材料アイテムn開始)
 ┃   ┣ name       (材料名n)
 ┃   ┗ amount      (分量n)
 ┗ instructions (手順情報開始)
   ┣ instruction  (手順1)
   ┣ instruction  (手順2)
   ┣ :               :
   ┗ instruction  (手順n)

※塩分には対応していません。
※手順写真には対応していません。

まず、レシピが書かれている範囲を、<div>タグなどで囲い、クラスを「class=”hrecipe”」として下さい。そして、レシピ名や材料などを、クラスを決められた値でマークアップしていきます。例えば、レシピ名ですと「class=”fn”」、カロリーですと「class=”calories”」になります。(タグが不足する場合は<span>タグで囲むと良いと思います。)

Favo Recipeでは、レシピ情報開始(“hrecipe”)とレシピ名(“fn”)のクラス指定が必須となっています。

最初はちょっと悩んでしまうかもしれませんが、ご自身のサイトに合ったテンプレートをひとつ作ってしまえば、後は簡単だと思います。
このページ下部にあるサンプルレシピ、「かんたん!宇和島の鯛めし」は、Favo Recipeで取り込みできるように記述しています。そのレシピのHTMLを下記に表示していますので、ご参考になさって下さい。

サンプルレシピのHTML

[html]
<!– ▽サンプルレシピ開始▽ –>
<div class="hrecipe">

<!– レシピ名 –>
<h1 class="fn">かんたん!宇和島の鯛めし</h1>

<!– レシピ写真 –>
<img class="photo" src="/images/taimeshi.jpg" width="200"
alt="「かんたん!宇和島の鯛めし」の写真"/>

<!– 基本情報 –>
<table>
<tr>
<td>調理時間</td>
<td>
<span class="duration">20分<span class="value-title" title="PT20M"></span></span>
</td>
</tr>
<tr>
<td>カロリー</td>
<td>
<span class="calories">576</span>kcal
</td>
</tr>
</table>

<!– 材料 –>
<h2>材料</h2>
<div class="yield">1人分</div>
<table class="ingredients">
<tr class="ingredient">
<td class="name">鯛のお刺身</td>
<td class="amount">適量</td>
</tr>
<tr class="ingredient">
<td class="name">ごはん</td>
<td class="amount">適量</td>
</tr>
<tr class="ingredient">
<td class="name">☆だし醤油</td>
<td class="amount">大さじ1/2</td>
</tr>
<tr class="ingredient">
<td class="name">☆醤油</td>
<td class="amount">大さじ1/2</td>
</tr>
<tr class="ingredient">
<td class="name">☆酒</td>
<td class="amount">大さじ1/2</td>
</tr>
<tr class="ingredient">
<td class="name">☆みりん</td>
<td class="amount">大さじ1/2</td>
</tr>
<tr class="ingredient">
<td class="name">☆卵黄</td>
<td class="amount">1個分</td>
</tr>
<tr class="ingredient">
<td class="name">☆すりごま</td>
<td class="amount">一つまみ</td>
</tr>
<tr class="ingredient">
<td class="name">海苔、大葉、ネギ</td>
<td class="amount">適量</td>
</tr>
</table>

<!– 手順 –>
<h2>作り方</h2>
<ol class="instructions">
<li class="instruction">☆を混ぜてタレを作る。</li>
<li class="instruction">1のタレに鯛のお刺身を入れ、10分ほど置き、タレをなじませる。</li>
<li class="instruction">少し冷ましたごはんの上に鯛をのせ、タレを適量かけて出来上がり!お好みで、刻んだ大葉や海苔、ネギをかけてお召し上がり下さい。</li>
</ol>

</div>
<!– △サンプルレシピ終了△ –>
[/html]

サンプルレシピのHTMLタグは、材料が<table>になっていたり、手順が<ol>になっていたりしますが、HTMLタグの決まりはありません。また、項目の出現順にも決まりはありません。クラス名が正しく記述されていれば問題ないです。

「レシピ情報開始」のマークアップ方法【必須】

レシピ情報が含まれる範囲を<div>タグ等で囲い、クラス名を「hrecipe」とします。
なるべく、レシピ情報以外の情報が範囲内に含まれることのないよう、最小範囲で囲むようにして下さい。
“hrecipe”のマークアップは必須です。

[html]
<div class="hrecipe">
:
</div>
[/html]

「レシピ名」のマークアップ方法【必須】

レシピ名にあたる部分のクラス名を「fn」とします。
適当なタグがない場合は、<span>タグ等で囲んでクラス名を付けます。
“fn”のマークアップは必須です。

[html]
<h1 class="fn">かんたん!宇和島の鯛めし</h1>
[/html]

「レシピ写真」のマークアップ方法

レシピ写真の<img>タグのクラス名を「photo」とします。
Favo Recipeでは、<img>タグのみ有効です。

[html]
<img class="photo" src="/images/taimeshi.jpg" width="200"
alt="かんたん!宇和島の鯛めし"/>
[/html]

「調理時間」のマークアップ方法

調理時間のマークアップはちょっと独特です。
調理時間は、クラス名「duration」と「value-title」を使用してマークアップします。
サンプルレシピの調理時間は20分ですが、HTMLは下のようになっています。

[html]
<span class="duration">20分<span class="value-title" title="PT20M"></span></span>
[/html]

クラス名「duration」で調理時間の場所を示すのですが、使用される値は”20分”ではなく、「duration」クラスの指定があるタグに囲まれた「value-title」クラスの指定があるタグのtitle名、つまり”PT20M”になります。
内側の<span>は、”PT20M”をマークアップする為だけのものなので、中身がないタグとなっています。

“PT20M”のような時間の表し方は、「ISO8601の時間長の形式」というそうです。難しいですね。
書き方は、『”PT” + 分 + “M”』または『”PT” + 時間 + “H” + 分 + “M”』となるようですので、
1時間の場合は「PT60M」や「PT1H」、
1時間30分の場合は「PT90M」や「PT1H30M」で表す事ができます。

「カロリー」のマークアップ方法

カロリーにあたる部分のクラス名を「calories」とします。
適当なタグがない場合は、<span>タグ等で囲んでクラス名を付けます。
Favo Recipeでは、値の単位はキロカロリーで、タグ内は数値のみとし、単位部分(”kcal”など)はタグの外に出すようにして下さい。

[html]
<span class="calories">576</span>kcal
[/html]

「分量」のマークアップ方法

レシピの分量(〇人前、〇個分 など)にあたる部分のクラス名を「yield」とします。
適当なタグがない場合は、<span>タグ等で囲んでクラス名を付けます。

[html]
<div class="yield">1人分</div>
[/html]

「材料」のマークアップ方法

材料情報は項目が複数である為、入れ子になっています。
まず、<div>タグなどを使い、クラス名「ingredients」で材料情報全体を囲みます。
そして、材料の項目ひとつひとつをクラス名「ingredient」で囲み、材料名を「name」、分量を「amount」でクラス名を付けます。
(サンプルは<table>タグを使っていますが、タグは何でも構いません。)

[html]
<table class="ingredients">
<tr class="ingredient">
<td class="name">鯛のお刺身</td>
<td class="amount">適量</td>
</tr>
<tr class="ingredient">
<td class="name">ごはん</td>
<td class="amount">適量</td>
</tr>

</table>
[/html]

「手順」のマークアップ方法

手順情報は項目が複数である為、入れ子になっています。
まず、<div>タグなどを使い、クラス名「instructions」で手順情報全体を囲みます。
そして、手順項目ひとつひとつをクラス名「instruction」で囲みます。
(サンプルは<ol>タグを使っていますが、タグは何でも構いません。)

[html]
<ol class="instructions">
<li class="instruction">☆を混ぜてタレを作る。</li>
<li class="instruction">1のタレに鯛のお刺身を入れ… </li>
<li class="instruction">少し冷ましたごはんの上に… </li>
</ol>
[/html]

この仕様について

少し難しいお話になります。興味のある方はどうぞ。
この仕様は、Googleのレシピ リッチスニペットの仕様に準拠する形となっています。

リッチスニペットとは、検索結果と共に表示される情報の事です。
Googleで「カレーライス」などとレシピ検索すると、検索結果と一緒に調理時間やカロリーなど、レシピの情報が表示される事がありますよね。
Google検索結果

このような情報、仕組みの事をリッチスニペットと言います。Googleのレシピ情報は、上で説明したようなHTMLのマークアップからデータを抽出し、検索結果として表示しており、これと同じ方法をFavo Recipeも使っています。

Googleのレシピ リッチスニペットの記述方法には、microdata、RDFa、microformatsの3種類があるようですが、現在、Favo Recipeで完全対応しているのは「microformats」です。

microformats(マイクロフォーマット)とは、HTMLのclass属性やrel属性に規定の値をマークアップし、HTMLデータに意味を持たせる仕組みの事です。microformatsには、イベント情報を記述する「hCalendar」や連絡先情報を記述する「hCard」、そしてレシピ情報を記述する「hRecipe」などの規格があります。
HTMLにこれらのマークアップを記述する事により外部へ情報を共有でき、外部サービスやアプリでは、HTMLからマークアップを読み取る事で、イベント情報をカレンダーアプリに保存したり、連絡先をアドレス帳に追加したりできるようになります。
Googleのレシピ リッチスニペット(microformats)では、この「hRecipe」の仕様に基づき、レシピ情報を取得しているようです。

ですので、Favo Recipeは「microformatsのhRecipe」の仕様にも準拠している形となります。今後、hRecipeの仕様、または、Googleのレシピ リッチスニペットの仕様が変更となった際は、当ページに記述しています内容を変更させて頂きますので、ご了承下さい。

サンプルレシピ

  • カロリー・塩分は正確な数値ではありません。
  • 分量があやしいです!もし作ってみようと思われる方がいらっしゃいましたら、味を調整して下さいね。

かんたん!宇和島の鯛めし


「かんたん!宇和島の鯛めし」の写真

調理時間 20分
カロリー 576kcal

材料

1人分
鯛のお刺身 適量
ごはん 適量
☆だし醤油 大さじ1/2
☆醤油 大さじ1/2
☆酒 大さじ1/2
☆みりん 大さじ1/2
☆卵黄 1個分
☆すりごま 一つまみ
海苔、大葉、ネギ 適量

作り方

  1. ☆を混ぜてタレを作る。
  2. 1のタレに鯛のお刺身を入れ、10分ほど置き、タレをなじませる。
  3. 少し冷ましたごはんの上に鯛をのせ、タレを適量かけて出来上がり!お好みで、刻んだ大葉や海苔、ネギをかけてお召し上がり下さい。