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

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

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

<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? Словарь очень простой. В таблице приведен список свойств:

Первая часть разметки в <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. О них пойдет речь в следующих статьях.

Куда дальше

• следующая — Разметка «мероприятия»
• предыдущая — Введение в расширенные фрагменты Google
• содержание