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

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

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

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

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

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

До свидания!


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

  • 1
    Игорь в 20/12/2017

    Спасибо за информацию! Оформил свою страницу с контактами на сайте по вашей инструкции. Вопрос: это кто-то уже опробовал на практике, в смысле, как то на практике это помогало помимо расширенного сниппета? Есть положительный результат по скорости индексации, к примеру?

  • 2
    Ринас ContextUP в 21/12/2017

    Ощутимого эффекта это не даст, за исключением расширенного сниппета.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *