Разметка данных об организации

Микроданные не привязаны к одному-единственному словарю. «Об авторе», конечно, хорошая страница, но у вас такая страница, скорее всего, одна. Жаждете нового опыта? Научимся оснащать микроданными страницы организаций и предприятий.

Ясоздалнесложныйобразецстраницыданныхобучреждении(http://diveintohtml5.. org/examples/organization..html). Рассмотрим первоначальный HTML-код этой страницы, без разметки микроданных:

<article>

<h1>Google, Inc.</h1>

<p>

1600 Amphitheatre Parkway<br> Mountain View, CA 94043<br>

США

</p>

<p>650-253-0000</p>

<p><a href="http://www.google.com/">Google.com</a></p> </article>

ПРИМЕЧАНИЕ

За изменениями, которые в этом разделе мы вносим в код страницы, вы можете проследить в режиме онлайн.. Было: http://diveintohtml5..org/examples/organization..html; стало: http:// diveintohtml5..org/examples/organization-plus-microdata..html..

Короткоихорошо.Всесведенияоборганизациисодержатсявнутритега <article>, с которого мы и начнем преобразования:

<article itemscope itemtype=”http://data-vocabulary.org/Organization”>

Как и при разметке данных о человеке, надо добавить атрибуты itemscope и itemtype в самый внешний тег, каковым в данном случае является <article>. В атрибуте itemtype надо объявить используемый словарь микроданных (сейчас это http://data-vocabulary..org/Organization). Атрибут itemscope удостоверяет, что все свойства микроданных, определенные в элементах-потомках <article>, относятся к тому же словарю.

Что же представляет собой словарь Organization? Он очень прост и даже прямолинеен. Часть его должна быть уже знакома вам. Внимание на табл. 10.3.

Внутри самой внешней обертки <article> первый элемент нашей разметки — <h1>. В заголовке <h1> содержится название организации, поэтому именно сюда следует вписать атрибут itemprop="name":

<h1 itemprop=”name”>Google, Inc.</h1>

Согласно табл. 10.1, теги <h1> обрабатываются стандартным образом и значение свойства микроданных, определенного в таком теге, равно текстовому содержимому тега. По-русски мы сказали бы всего лишь: «Название организации — Google, Inc.».

Следующим по порядку идет фрагмент адреса (улица и дом). Адреса организаций размечаются в точности так же, как и адреса людей. Надо сначала добавить атрибут itemprop="address" в самый внешний элемент, дочерними по отношению к которому будут все части адреса (в данном случае таков тег <p>). Этим способом мы введем свойство address словаря Organization.

Надо объявить атрибуты itemtype и itemscope, которые бы свидетельствовали, что у данной единицы, определяемой словарем Address, есть несколько дочерних свойств:

<p itemprop=”address” itemscope itemtype=”http://data-vocabulary.org/Address”>

Наконец, каждый фрагмент сведений, для которого подыскивается соответ-

ствующее свойство словаря Address (street-address, locality, region, postal-code, country-name), надо обернуть тегом <span> и после этого вписать нужное свойство:

<p itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">

<span itemprop=”street-address”>1600 Amphitheatre Parkway</span><br> <span itemprop=”locality”>Mountain View</span>,

<span itemprop=”region”>CA</span>

<span itemprop=”postal-code”>94043</span><br> <span itemprop=”country-name”>USA</span>

</p>

По-русски мы сказали бы: «У организации есть адрес, хранимый как совокупность нескольких свойств. Свойство с названием улицы и номером дома равно 1600 Amphitheatre Parkway. Свойство с названием населенного пункта равно Mountain View. Свойство с названием региона равно CA (это штат Калифорния). Почтовый индекс — 94043, а страна — США».

Теперь о телефонном номере организации. Всем известно, как сложно постро­ ены телефонные номера. В каждой стране их синтаксис какой-то свой, и при международных звонках случаются накладки. В данном примере есть телефонный номер США в формате, удобном для звонящих из любой части США:

<p itemprop="tel">650-253-0000</p>

Если вы вдруг не заметили, область видимости словаря Address закончилась с закрытием соответствующего тега <p>. Теперь мы вновь определяем свойства словаря Organization.

Чтобы перечислить несколько телефонных номеров, например один для клиентов из США, а другой для международных звонков, поступайте следующим образом. Поскольку каждое свойство микроданных может быть повторено, достаточно заключить оба телефона в независимые HTML-элементы, отделив их от текстовых меток:

<p>

Для клиентов из США: <span itemprop="tel">650-253-0000</span><br>

Для клиентов из Англии: <span itemprop="tel">00 + 1* + 65025 30000</span>

</p>

Согласнотабл.10.1,теги<p> и<span> обрабатываютсястандартнымобразом.Значение свойства микроданных tel, определенного в таком элементе, — это просто текстовое содержимое. Словарь микроданных Organization не предусматривает делениятелефонногономераначасти;значениесвойства tel —текствсвободнойфор- ме. Если хотите указать в скобках код страны или области, а группы цифр разделить не дефисами, а пробелами, это можно сделать. Как будет читать телефонные номера клиентская программа — обработчик микроданных, решать самой программе.

Следующее свойство, url, опять знакомо нам. Как описано в предыдущем разделе, можно связывать URL-адрес с человеком (Person), но можно, естественно, и с организацией. Как URL-ресурс может выступать главная страница сайта фирмы, страница контактов, страница одного из продуктов и т. п. Ссылку на сетевой ресурс компании (или о компании) снабжают атрибутом itemprop="url":

<p><a itemprop=”url” href="http://www.google.com/">Google.com</a></p>

Согласно табл. 10.1, теги <a> обрабатываются особым образом: значение свойства микроданных приравнивается к значению атрибута href, а не к вложенному текстовому содержимому. По-русски: «Эта организация как-то связана с URLадресом http://www..google..com/». Ничего более конкретного о характере связи сказать нельзя; текст ссылки — Google..com — игнорируется.

Осталось сказать о геолокации, но не о W3C API геолокации (о котором см. главу 6), а о том, как отразить в разметке микроданных физическое местонахождение организации.

Вплоть до настоящего момента все наши примеры вращались вокруг дополнительной разметки данных, видимых на экране. Так, например, если есть <h1> с текстом — названием фирмы, мы добавим в тег <h1> атрибут itemprop, чтобы тем самым объявить: видимый на экране текст (заголовок) представляет собой название фирмы. Другой пример: если тег <img> ссылается на фотографию, мы тоже добавим

вэтот тег атрибут itemprop, который будет свидетельствовать: видимая на экране картинка представляет собой фотографию человека.

Не таковы геолокационные сведения. Широта идолгота местонахождения офиса организации (с точностью до четырех десятичных знаков!) на экране отсутствуют. Да и наша страница-образец до оснащения разметкой микроданных вовсе не содержала геолокационных сведений. На странице есть ссылка на Карты Google, но

вURL-адрес этой ссылки не входят координаты — широта и долгота (вернее, входят, но в формате, специфичном для Google). Если бы даже на нашей странице стояла ссылка на гипотетический веб-сервис с картами, который бы принимал широту и долготу как параметры URL-адреса динамически генерируемой страницы, нельзя было бы выделить нужные фрагменты адреса и разметить их микроданными. Невозможно объявить, что первый параметр URL-запроса представляет широту, второй — долготу, а все остальные параметры несущественны.

Для сложных случаев, таких как этот, в HTML5 предусмотрен механизм аннотирования невидимыхданных. Пользоваться им следует лишь при отсутствии альтернатив. Если важные для вас данные можно хоть как-то вывести на экран, это обязательно надо сделать. Невидимым машиночитаемым данным свойственно очень быстро «портиться». Это связано с тем, что, обновляя видимый текст на страницах, очень часто забывают обновить машиночитаемые данные, причем чаще, чем вам кажется (если вам пока не приходилось проявлять подобную забывчивость, то, думаю, еще придется).

Так или иначе в некоторых случаях нельзя обойтись без невидимых данных. Пусть, например, ваш начальник хочет, чтобы на сайте были машиночитаемые сведения о координатах офиса, но чтобы при этом пользовательский интерфейс не загромождала пара непонятных шестизначных чисел. В такой ситуации невидимые данные — единственная альтернатива. Можно лишь немного себя обезопасить, если поместить машиночитаемые сведения сразу после видимого текста, который они описывают. Тогда, возможно, при обновлении данных на странице администратор сайтанезабудетвнестиправкунетольковтекст,отображаемыйнаэкране,ноивданные, следующие за ним в коде страницы. В нашем примере можно создать внутри тогожетега<article>,которыйсодержитостальныесвойстваорганизации,тег <span> и внести в него невидимые геолокационные сведения:

<span itemprop=”geo” itemscope itemtype=”http://data-vocabulary.org/Geo”>

<meta itemprop="latitude" content="37.4149" /> <meta itemprop="longitude" content="-122.078" />

</span>

</article>

Для геолокации существует свой собственный словарь микроданных, как, например, для адреса человека или организации. Вот почему в этом теге <span> должны присутствовать следующие три атрибута:

itemprop="geo" — показывает, что в данном элементе определено свойство организации geo;

itemtype="http://data-vocabulary.org/Geo" — объявляет словарь микроданных,

которому соответствуют свойства внутри самого этого элемента;