VCard
Материал из AOW
Что такое 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. Это удобно потому что не приходится вручную копировать контакты и забивать их в контакт-лист 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>
Выглядит это в необработанном виде так:
Компания Рога и копыта Адрес: 125153, Россия, Москва, Красная площадь, д.1 Телефон: +7 (495) 234-12-34 Факс: +7 (495) 234-12-34
Но ничто не мешает вам оформить вывод этого кода при помощи CSS .
Причем скажу больше — вы можете сделать hCard целую страницу текста. Где в свободной литературной форме описывать ваши контактные данные. Главное — не забывать их обрамлять нужными тегами с нужными классами и нужными атрибутами вроде title. В этом прелесть формата — он совершенно безошибочно и точно читается роботами, но при этом может быть оформлен красиво и читабельно для людей. Если вы создали hCard и хотите проверить правильно ли — скопируйте его код в этот сервис валидации. Более подробную информацию о формате можно найти на официальных сайтах. Валидатор есть и у Яндекса. Взято здесь.