Урок 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>

Используйте эти примеры в качестве шаблонов для своих данных.

Таким образом информация будет выглядеть внешне на странице “Контакты”:

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

Ну а на этом у меня все, дорогие друзья!

До свидания!