Xiper

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

Автор: Евгений Рыжков и Татьяна Головко Дата публикации:

Микроданные не ограничиваются одним словарем. Для страницы «обо мне» прекрасно подходил только один. Какие есть еще? Рассмотрим разметки для организаций и бизнеса.

Я создал образец страницы с данными компании. Первоначальная разметка без микроданных выглядит так:

<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="">Google</a></p>
</article>

Заметка: сравнить разметки с микроданными и без можно по адресам: (до) (после).

Просто и понятно. Вся информация об организации находится в элементе <article>. С него и начнем:

<article itemscope itemtype="">

Как и для разметки людей нужно установить атрибуты itemscope и itemtype внешнему элементу. В этом случае таковым является <article>. Атрибут itemtype объявляет, какой словарь мы используем. В данном случае — это А itemscope заявляет, что данный словарь распространяется на все дочерние элементы.

Что у нас в словаре Organization? Словарь очень простой. В таблице приведен список свойств:

Свойство Описание
name Название организации
url Ссылка на главную страницу сайта организации
address Адрес организации, который может содержать улицу, дом, район, регион, страну, почтовый индекс.
tel Номер телефона организации
address Адрес организации, который может содержать улицу, дом, район, регион, страну, почтовый индекс.
geo Географические координаты расположения. Всегда содержит два подсвойства: latitude и longitude

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

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

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

Далее идет адрес. Разметка будет точно такая же, какую мы использовали для адреса человека. Сначала добавляем атрибут itemprop="address" для элемента, содержащего адрес (в нашем случае — это <p>). Также добавляем атрибут itemscope чтобы заявить об области действия нового словаря Address:

<p itemprop="address" itemscope itemtype="">

Наконец, оборачиваем каждый отдельный элемент информации в <span> чтобы иметь возможность добавить имена свойств микроданных:

<p itemprop="address" itemscope itemtype="">
	<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 закончилась с закрытием предыдущего абзаца (</p>). Тут уже действует словарь Organization.

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

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

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

Далее идет уже знакомое нам свойство url. По синтаксису все то же самое, что было и для человека. Тут могут быть ссылки на домашнюю страницу сайта компании, страницу контактов, каталога продукции и т.д. Чтобы отнести ссылку к микроданным, добавляем атрибут itemprop="url":

<p><a itemprop="url" href="">Google</a></p>

Как уже упоминалось, элемент <a> имеет специальную обработку. Значением свойства микроданных является значение атрибута href, а не текст ссылки. Читаем: «Данная организация связана с URL».

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

До этого момента все мои примеры были сосредоточены на видимой разметке. Т.е. у нас есть <h1> с названием компании, мы добавляем атрибут itemprop этому элементу, тем самым заявляя, что видимый текст — есть название компании. Аналогично для <img> — заявляем, что видимое изображение — это фото конкретного человека.

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

Для таких случаев в HTML5 есть возможность использования невидимых данных. Эта техника должна использоваться как крайнее средство, когда других вариантов нет. Если есть возможность использовать видимые данные — именно их и используй. Пользователи зачастую забывают обновлять невидимые данные, даже если они обновили видимые. И это происходит чаще, чем ты себе представляешь.

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

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

	<span itemprop="geo" itemscope itemtype="">
		<meta itemprop="latitude" content="37.4149" />
		<meta itemprop="longitude" content="-122.078" />
	</span>
</article>

Геолокация описывается своим собственным словарем, так же как и организации, и люди, и адреса. Таким образом, тег <span> имеет три атрибута:

  • itemprop="geo" — говорит, что элемент представляет гео информацию о данной организации;
  • itemtype= — указывает какой словарь используется;
  • itemscope — говорит, что все дочерние элементы подпадают под действие словаря Geo.

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

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

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

Эти микроданные не поддерживаются в Google Rich Snippets, поэтому я не могу привести образец, как это будет отображается в результатах поиска. Но организации имеют еще две тематики (события и обзоры), которые поддерживаются Google Rich Snippets. О них пойдет речь в следующих статьях.

Куда дальше