Разметка организаций

Микроданные не ограничены единственным словарём. Страницы «О нас» это хорошо, но у вас, вероятно, есть только одна из них. Ещё голодны? Давайте узнаем, как делать разметку организаций и предприятий.

Вот пример страницы со списком организаций. Взглянем на оригинальную разметку HTML, без микроданных.

<article>
  <h1>Google, Inc.</h1>
  <p>
    1600 Amphitheatre Parkway<br>
    Mountain View, CA 94043<br>
    USA
  </p>
  <p>650-253-0000</p>
  <p><a href="http://www.google.com/">Google.com</a></p>
</article>

Коротко и ясно. Все сведения об организации содержатся внутри элемента <article>, так что с него и начнём.

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

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

Так что находится в словаре Organization? Он простой и понятный. На самом деле, кое-что должно выглядеть знакомо.

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

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

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

Далее идёт адрес местоположения. Разметка адреса организации работает аналогично разметке адреса человека. Для начала добавим атрибут itemprop="address" к внешнему элементу адреса (в данном случае, это элемент <р>). Он утверждает, что свойство address относится к словарю Organization. Но что насчёт свойств самого адреса? Мы также должны определить атрибуты itemtype и itemscope, которые говорят, что это пункт Address и он содержит свои собственные свойства.

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

Окончательно, мы должны обернуть каждый отдельный кусочек информации в фиктивный элемент <span>, чтобы добавить соответствующее имя свойства (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, страна USA».

Дальше — номер телефона организации. Телефонные номера, как известно, запутаны и точное написание характерно для каждой страны (а если вы захотите позвонить в другую страну, то всё ещё хуже). В данном примере у нас есть телефонный номер США, в формате, подходящем для вызова внутри страны.

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

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

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

<p>
  US customers: <span itemprop="tel">650-253-0000</span><br>
  UK customers: <span itemprop="tel">00 + 1* + 6502530000</span>
</p>

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

Далее, у нас есть ещё одно знакомое свойство: url. Так же, как мы связывали URL с человеком, так вы можете связать URL с организацией. Это может быть главная страница компании, контактная страница, страница продукта или что-то ещё. Если эта ссылка связана с организацией, отметьте её через itemprop = "url".

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

В соответствии с моделью микроданных HTML5, у элемента <a> есть специальная обработка. Значением свойства выступает значение атрибута href, а не текстовая ссылка. Говоря простым языком: «эта организация связана с URL http://www.google.com/». Это не говорит что-то более конкретное о связи и не включает в себя текст ссылки «Google.com».

Наконец, я хочу поговорить о геолокации. Нет, не об API геолокации от W3C. А о том, как размечать физическое местоположение организации с помощью микроданных.

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

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

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

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

В этом примере мы можем создать фиктивный элемент <span> в том же элементе <article>, что и все остальные свойства Organization, а затем вставить невидимые данные геолокации внутрь <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>

Геолокация определяется в своём собственном словаре, подобно адресу в Person или Organization. Таким образом, для элемента <span> требуется три атрибута:

1. itemprop="geo" говорит, что этот элемент представляет собой свойство geo окружающего словаря Organization;
2. itemtype="http://data-vocabulary.org/Geo" говорит, какой словарь микроданных подходит для этого элемента;
3. itemscope говорит, что этот элемент является элементом микроданных со своим собственным словарём (указанным в атрибуте itemtype). Все свойства внутри этого элемента являются свойствами http://data-vocabulary.org/Geo, а никак не окружающего словаря http://data-vocabulary.org/Organization.

Следующий большой вопрос, на который отвечает этот пример: «Как вы описываете невидимые данные?». Вы используете элемент <meta>. В предыдущих версиях HTML вы могли применять <meta> только внутри <head>. В HTML5 вы можете использовать элемент <meta> в любом месте. И это именно то, что мы делаем.

<meta itemprop="latitude" content="37.4149">

В соответствии с моделью микроданных HTML5, элемент <meta> имеет специальную обработку. Значением свойства микроданных выступает атрибут content. Поскольку этот атрибут никогда не отображается, мы имеем прекрасную настройку для безграничного количества невидимых данных. С большой властью приходит большая ответственность. В этом случае ответственность лежит на вас, так что убедитесь, что невидимые данные согласованы с видимым текстом вокруг них.

Нет прямой поддержки словаря Organization в Google Rich Snippets, так что у меня нет хороших примеров поисковых результатов для демонстрации. Но организации в значительной степени связаны с двумя учеными примерами: события и отзывы. А они как раз поддерживаются Google Rich Snippets.