вторник, 18 августа 2015 г.

Разметка «обзоров»

09:21 By , No comments


Вот еще один пример создания Веб (а возможно и результатов поиска) с лучшей разметкой: отзывы о бизнесе и продуктах.
Это краткий обзор моей любимой пиццерии, расположенной рядом с моим домом. Давай посмотрим оригинальную разметку:
HTML
01<article>
02    <h1>Anna's Pizzeria</h1>
03    <p>★★★★☆ (4 stars out of 5)</p>
04    <p>New York-style pizza right in historic downtown Apex</p>
05    <p>
06        Food is top-notch. Atmosphere is just right for a "neighborhood
07        pizza joint." The restaurant itself is a bit cramped; if you're
08        overweight, you may have difficulty getting in and out of your
09        seat and navigating between other tables. Used to give free
10        garlic knots when you sat down; now they give you plain bread
11        and you have to pay for the good stuff. Overall, it's a winner.
12    </p>
13    <p>
14        100 North Salem Street<br>
15        Apex, NC 27502<br>
16        USA
17    </p>
18    <p>— reviewed by Mark Pilgrim, last updated March 31, 2010</p>
19</article>
Заметка: Для сравнения, код до — http://diveintohtml5.org/examples/review.html; код после — http://diveintohtml5.org/examples/review-plus-microdata.html
Весь обзор находится в элементе <article>, потому мы добавляем ему атрибуты itemtype и itemscope:
HTML
1<article itemscope itemtype="http://data-vocabulary.org/Review">
Что содержится в словаре Review? Смотрим таблицу:
СвойствоОписание
itemreviewedНазвание того, чего делаем обзор. Например, название заведения или продукта.
ratingЧисленная оценка качества по шкале от 1 до 5. Может использовать свой словарь http://data-vocabulary.org/Rating для нестандартной шкалы.
reviewerИмя автора обзора.
dtreviewedДата создания обзора в формате ISO (http://www.iso.org/iso/date_and_time_format)
summaryКраткое резюме обзора.
descriptionТело обзора.
Первое свойство простое: itemreviewed — это текст, содержащийся в <h1>:
HTML
1<h1 itemprop="itemreviewed">Anna's Pizzeria</h1>
Я сейчас пропущу рейтинг и вернусь к нему позже.
Следующие два свойства тоже просты — summary и description:
HTML
1<p itemprop="summary">New York-style pizza right in historic downtown Apex</p>
2    <p itemprop="description">
3    Food is top-notch. Atmosphere is just right for a "neighborhood
4    pizza joint." The restaurant itself is a bit cramped; if you're
5    overweight, you may have difficulty getting in and out of your
6    seat and navigating between other tables. Used to give free
7    garlic knots when you sat down; now they give you plain bread
8    and you have to pay for the good stuff. Overall, it's a winner.
9</p>
Свойства location и geo мы разбирали в предыдущих главах:
HTML
01<p itemprop="location" itemscope itemtype="http://data-vocabulary.org/Address">
02    <span itemprop="street-address">100 North Salem Street</span><br>
03    <span itemprop="locality">Apex</span>,
04    <span itemprop="region">NC</span>
05    <span itemprop="postal-code">27502</span><br>
06    <span itemprop="country-name">USA</span>
07</p>
08<span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
09    <meta itemprop="latitude" content="35.730796" />
10    <meta itemprop="longitude" content="-78.851426" />
11</span>
Последняя строка содержит знакомую проблему — она содержит две части информации. Это имя автора обзора — Mark Pilgrim и дата обзора — March 31, 2010. Проблему решаем также знакомым приемом — оборачиваем данные в контейнеры: дату тегом <time>, а имя автора — в <span>:
HTML
1<p>
2    <span itemprop="reviewer">Mark Pilgrim</span>, last updated
3    <time itemprop="dtreviewed" datetime="2010-03-31">
4    March 31, 2010 </time>
5</p>
6</article>
Теперь вернемся к рейтингам. Рейтинг — это сложная часть разметки обзора. По умолчанию словарь Review имеет шкалу от 1 (ужасно) до 5 (превосходно). Если нужно изменить шкалу, то такая возможность есть. Но давай сперва рассмотрим шкалу по умолчанию:
HTML
1<p>
2    ★★★★☆ (<span itemprop="rating">4</span> stars out of 5)
3</p>
4</article>
Если используется шкала по умолчанию, то достаточно добавить атрибут чтобы обозначить свойство. Но что делать, если такая шкала не устраивает? Есть возможность изменить границы шкалы. Например, если мы хотим использовать шкалу 0-10, то мы все также используем свойство itemprop="rating", но в добавок мы декларируем, что будет использоваться рейтинг согласно словарю http://data-vocabulary.org/Rating, где указан диапазон шкалы рейтинга (значение worst — худшее, best — лучшее) и текущее значение рейтинга
HTML
1<p itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
2    ★★★★★★★★★☆
3    (<span itemprop="value">9</span> on a scale of
4    <span itemprop="worst">0</span> to
5    <span itemprop="best">10</span>)
6</p>
Читается это так: «продукт рассматриваемый в обзоре, получил оценку 9 по 10-бальной шкале».
Я уже упоминал, что разметка микроданными обзоров может повлиять на вид результатов поиска? Кажется да. Вот сырые фрагменты, которые готовит Google Rich Snippets для микроданных обзоров:
Item
 Type: http://data-vocabulary.org/Review
 itemreviewed = Anna's Pizzeria
 rating = 4
 summary = New York-style pizza right in historic downtown Apex
 description = Food is top-notch. Atmosphere is just right ...
 address = Item(__1)
 geo = Item(__2)
 reviewer = Mark Pilgrim
 dtreviewed = 2010-03-31
Item
 Id: __1
 Type: http://data-vocabulary.org/Organization
 street-address = 100 North Salem Street
 locality = Apex
 region = NC
 postal-code = 27502
 country-name = USA
Item
 Id: __2
 Type: http://data-vocabulary.org/Geo
 latitude = 35.730796
 longitude = -78.851426
Вот так может выглядеть такой обзор в результатах поиска Google:
страница в результатах поиска
Признаюсь, что результатом я несколько впечатлен

0 коммент.:

Отправить комментарий