Урок 178. Микроформат hCard – делаем страницу “Контакты” понятной для роботов

Всем-всем привет!
Страница “Контакты” на любом сайте играет немаловажную роль как с точки зрения посетителей, так и с точки зрения SEO. Оформив правильно данную страницу, Вы получите расширенный сниппет в поисковой выдаче, где будут отображаться не только мета-теги Title и Description, но и Ваша контактная информация. Также данные добавятся в справочник организаций Яндекса.
Добиться этого можно с помощью, так называемого, микроформата hCard.
Что такое hCard?
hCard — популярный, широко используемый во всем мире открытый формат, предназначенный для публикации контактной информации в структурированном виде.
Размечая контактные данные организации на сайте с помощью микроформата hCard, Вы делаете эту информацию понятной не только людям, но и поисковым роботам. Таким образом, при индексировании Вашего сайта робот засовывает эти данные в индекс, после чего они попадают в поисковую выдачу.
Однако, в выдаче контактные данные могут и не появится. Связано это с тем, что Яндекс публикует эту информацию исключительно на свое усмотрение. Чтобы повысить шансы на отображение “контактов” в справочнике и выдаче, достаточно следовать определенным правилам.
Как правильно оформить микроформат hCard?
Для того, чтобы информация правильна воспринималась роботом, нужно соблюдать некоторые правила. Вот пример правильно оформленной карточки с контактами организации:
<div class="vcard">
<div>Кафе <span class="fn org">Ромашка</span></div>
<div class="adr">
<span class="locality">г. Солнечный</span>,
<span class="street-address">просп. Романтиков, д. 21</span>
</div>
<div class="tel">Телефон:
<abbr class="value" title="+ 7 (890) 123-45-67">123-45-67</abbr>
</div>
</div>
Обязательно микроформат должен начинаться с блока vcard, где уже указываются все остальная информация.
Как видите, здесь имеются практически все необходимые данные об организации, которых вполне достаточно: название организации, адрес и номер телефона.
За каждый элемент отвечает определенный класс:
- fn и org – название организации;
- adr – адрес организации. Содержит вложенные элементы:
- country-name— страна;
-
region — субъект федерации, район;
-
locality — населенный пункт;
-
street-address — улица, дом, корпус, строение и т. п.;
-
extended-address— указывается данные о местонахождении организации внутри здания, то есть этаж, офис;
-
postal-code — почтовый индекс.;
- tel – номер телефона.
Конечно, можно указать еще дополнительную информацию, используя другие элементы, например, email. Пример со всеми указанными выше элементами:
<div class="vcard">
<div>
<a class="fn org url" href="http://www.cafe.com">Кафе Ромашка</a>
</div>
<div class="adr">
<span class="postal-code">111222</span>,
<span class="country-name">Россия</span>,
<span class="region">Абрикосовский край</span>,
<span class="locality">г. Солнечный</span>,
<span class="street-address">просп. Романтиков, д. 21</span>,
<span class="extended-address">эт. 7, оф. 701</span>
<div class="tel">Телефон:
<abbr class="value" title="+ 7 (890) 123-45-67">123-45-67</abbr>
</div>
</div>
</div>
Используйте эти примеры в качестве шаблонов для своих данных.
Таким образом информация будет выглядеть внешне на странице “Контакты”:
Конечно, ограничиться только такими данными о компании нельзя, нужно же еще и наглядно показать людям где находится Ваш офис. Для этого рекомендую прочитать статью о добавлении карты Яндекса на сайт.
Ну а на этом у меня все, дорогие друзья!
До свидания!
Спасибо за информацию! Оформил свою страницу с контактами на сайте по вашей инструкции. Вопрос: это кто-то уже опробовал на практике, в смысле, как то на практике это помогало помимо расширенного сниппета? Есть положительный результат по скорости индексации, к примеру?
Ощутимого эффекта это не даст, за исключением расширенного сниппета.