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

hCard — это html-микроформат, который разработан на основе полей vCard. Он нужен для предоставления машиночитаемой контактной информации прямо на страницах вашего сайта.

Что такое vCard

Это простой текстовый файл, который содержит структурированную информацию о контактах с лицом или организацией. Аналог визитной карточки, откуда и название. Пример содержимого такого файла выглядит так.

BEGIN:VCARD
VERSION:3.0
FN:Смирнов Сергей Александрович
N:Смирнов;Сергей;Александрович;
ORG:Дайте2
URL:http://dayte2.com/
EMAIL;TYPE=INTERNET:email@dayte2.com
END:VCARD

Если браузеру отдать такой текстовый файл с расширением vcf и заголовком "Content-type: text/x-vcard" — он предложит открыть его вашим почтовым клиентом по-умолчанию. Часто это Microsoft Outlook. Это удобно потому что не приходится вручную копировать контакты и забивать их в контакт-лист аутлука.

Но такая штука — это только начало удобства.

Что такое hCard

hCard — это формат, который был разработан по аналогии с vCard, только не для передачи текстовых файликов, а для встраивания прямо в html-страницы. Причем для удобства все сделано так, что контактная информация может быть разбросана хоть по всей странице тонким слоем, но робот, анализирующий hCard все равно ее найдет, распознает и сможет собрать воедино. Хоть в формат vCard, хоть в другой какой-то.

Чем хорош hCard? Тем, что контактная информация совершенно четко представляется в определенном виде и может быть распознана роботом. Например — поисковым. Что и происходит сейчас. Например Яндекс начал поддерживать hCard и если вы хотите автоматического размещения координат вашей фирмы на яндекс.картах — вам это на руку. Если вы хотите чтобы Яндекс автоматически обновлял ваши изменившиеся телефоны и e-mail, а также выводил ваши контактные данные в результатах поиска — используйте hCard.

В общем, если вы думаете о seo и программировании — вы заинтересуетесь hCard.

Вот пример hCard:

<div class="vcard" id="company">
		<div class="company-name">Компания <span class="fn org">Рога и копыта</span></div>
		<div class="adr">
			Адрес:
			<span class="postal-code">125153</span>,
			<span class="country-name">Россия</span>,
			<span class="locality">Москва</span>,
			<span class="street-address">Красная площадь, д.1</span>
		</div>
		<div>
		Телефон: <abbr title="+74952341234" class="tel">+7 (495) 234-12-34</abbr>
		</div>
		<div>
		Факс: <abbr title="+74952341234" class="tel">+7 (495) 234-12-34</abbr>
		</div>
		<a class="url" href="http://dayte2.com"></a>
</div>

Выглядит это в необработанном виде так:

Но ничто не мешает вам оформить вывод этого кода при помощи CSS.

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

О конвертации hCard в vCard я напишу как-нибудь позже и приведу примеры. Конкретно — я планирую написать о генерации vCard и работе с hCard в MODx. Если не хотите пропустить — рекомендую подписаться на RSS моего блога.

Если вы создали hCard и хотите проверить правильно ли — скопируйте его код в этот сервис валидации. Более подробную информацию о формате можно найти на официальных сайтах. Валидатор есть и у Яндекса.