Как сделать на сайте микроразметку и выделиться в результатах поиска

Как сделать на сайте микроразметку и выделиться в результатах поиска

Дата: 12.09.2018

Когда человек что-то ищет в «Яндекс» и Google, он видит несколько блоков с сайтами. Они похожи друг на друга, но у некоторых есть дополнительные элементы – цена товара, время работы, картинка, что-то еще. Хотите так же? Рассказываем, как сделать микроразметку на сайте и выделиться в результатах поиска..

Что такое микроразметка?

Прежде чем показывать ваш сайт в поисковой выдаче, его код анализируют роботы «Яндекса» и Google. Если встроить в HTML-документ специальные атрибуты для тегов, то робот поймет, что эта строка является номером телефона, другая – адресом организации. Он переработает теги и в результатах поисковой выдачи появится визуальное отображение этих данных.

семантическая разметка.jpg

Сайты с микроразметкой выделяются в результатах поиска – бесплатная отстройка от конкурентов в выдаче

Если отойти от технической терминологии, то для чего нужна микроразметка в первую очередь? Чтобы визуально выделить ваш сайт среди конкурентов в поисковой выдаче:

  • Пользователь вбивает запрос в поисковую строку;
  • Видит ссылки на десяток сайтов;
  • Большинство объявлений не оформлено;
  • У вас – четко выделенные часы работы, номер телефона, стоимость товара или что-то еще полезное.
  • Объявление в поиске заметнее, переход на ваш сайт вероятнее.

Влияние на продвижение

«Яндекс» утверждает, что напрямую использование тегов микроразметки не влияет на продвижение, но помогает получить больше целевого трафика. Причина – те, кто использует микроразметку, выделяются визуально и сообщают полезную информацию пользователям.

Например – интернет-магазин с помощью микроразметки сообщает цену на товар. Если стоимость подходит, пользователь перейдет на сайт. Если слишком дорого –пользователь не станет кликать.

В случае, когда микроразметки нет, покупатель зайдет на сайт, увидит высокую цену и сразу закроет вкладку. Так увеличивается показатель отказов - метрика, которую поисковые системы учитывают.

микроразметка товаров

Крупные интернет-магазины используют микроразметку – выделяют рейтинг товара или указывают стоимость

Типы микроразметки

Есть несколько типов микроразметки, которые отличаются друг от друга синтаксисом атрибутов. Как это работает?

Вы пишите код сайта тегами. Например, простой блок выглядит так: 

<div>Тестовый блок</div>

В открывающий тег можно добавить специальные символы, которые не отображаются на самом сайте, но их поймет поисковый робот. Вот так: 

<div class=”test_atribut”>Тестовый блок</div>.

Синтаксис микроразметки - это как раз список атрибутов, которые нужно добавлять в теги.

Самый популярный синтаксис – schema.org. Такую микроразметку рекомендует использовать «Яндекс».

Микроразметка JSON-LD аналог sсhema.org. Данный формат отличается тем, что не нужно вписывать HTML-код в тело страницы, достаточно весь код разместить в контейнер <head>.

Пример разметки контактных данных с помощью JSON-LD: 

разметка json-ld

У Google есть специальный инструмент, который помогает составить код JSON-LD.

Микроразметка open graph – разработана специально для Facebook, но работает и для ВКонтакте. Вы указываете специальные атрибуты, чтобы при репосте отображалась не скучная ссылка, а красивая картинка, заголовок статьи, телефон компании, геолокация и другие плюшки, которые украсят пост. Как на примере:

разметка OG

С помощью микроразметки можно выбрать, что будет отображаться в посте.

Микроформаты – устаревший вид микроразметки. Нужно прописывать логические и смысловые атрибуты class в тегах. Такой вид разметки встречается в старых шаблонах для Wordpress и других системах управления сайтом.

Если вы только планируете начать размечать сайт, используйте Schema.org – этот словарь развивается и поддерживается всеми поисковыми системами.

Микроразметка Schema.org для разных типов страниц

«Яндекс» и Google используют не все атрибуты схемы Schema.org, но список постоянно пополняется. Вы можете размечать сайт новыми атрибутами, даже если они еще не работают – когда список поддерживаемых обновится, ваш сайт уже будет готов и все автоматически заработает.

Основные виды разметки

Для микроразметки SEO рекомендуем использовать несколько видов атрибутов.

«Хлебные крошки»- это путь от корня сайта к странице.

разметка хлебных крошек

Микроразметка «хлебные крошки» сообщит, на какой странице представлена детская обувь, а на какой – мужская

Строка поиска. В Google можно добавить строку поиска для сайта – пользователю не нужно делать лишний клик, а сразу начнет поиск нужного товара в вашем интернет-магазине.

Контакты. Удобно, когда поисковая выдача содержит контактные данные – адрес и телефон. Пользовать сразу в поиске кликнет по номеру и позвонит в компанию.

Социальные сети. С помощью микроразметки  можно добавить иконки социальных сетей.Один клик по иконке и пользователь перейдет в ваш паблик.

Оформленные статьи. В Google можно добавить разметку специально для статей. Указываете название, изображение и дату публикации – пользователь сразу видит, когда опубликован контент и понимает, что ждет его на сайте. В итоге снижается показатель отказов – важно для SEO.

Рейтинги и карточка компании. Покажите пользователям карточку компании. Она содержит информацию о предприятии, адрес, расписание работы. В Google - ссылку на дополнительное действие. Например, на бронь места в ресторане. Рейтинг компании или товара демонстрируется красивыми звездочками. Оценка вычисляется на основе мнений пользователей.

Полный список атрибутов для микроразметки ищите на сайте разработчиков разметки. Есть русская версия, но там меньше информации.

Как использовать разметку. Примеры кода

Чтобы данные отображались в результатах поиска, нужно влезть в код сайта:

  • Решите, какую информацию нужно добавить с помощью микроразметки;
  • Найдите страницу или шаблон, в котором находится HTML-код, содержащий нужные данные;
  • Добавьте в теги нужные атрибуты из списка schema.

Микроразметка организации

Для отображении адреса и контактов организации можно использовать два варианта кода.

Без графика работы:

микроразметка организации

С графиком работы:

микроразметка организации

Микроразметка изображений

Трафик можно получать из поиска по картинкам, поэтому все изображения на сайте стоит разметить.Пример:

микроразметка изображений

Микроразметка рейтинга

Чтобы получить красивые звездочки с указанием рейтинга организации, участвуйте в партнерской программе «Яндекса». Размечайте страницу по правилам Review.

микроразметка рейтинга

Микроразметка карточки товара и цена

Микроразметка товара полезна для интернет-магазинов. Воспользуйтесь примером:

микроразметка товара

Микроразметка навигации – хлебные крошки

«Яндекс» сам распознает «хлебные крошки», поэтому используйте шаблон ниже для Google:

Цветом отмечено что нужно добавить в шаблон вашего меню

микроразметка меню

Цветом отмечено что нужно добавить в шаблон хлебных крошек

Микроразметка хлебных крошек

Микроразметка FAQ

Блок вопросов и ответов поможет отработать возражения потенциального покупателя. Добавьте микроразметку этого блока:

микроразметка faq

Как проверить микроразметку

Воспользуйтесь специальными сервисами проверки корректности микроразметки – валидаторами:

Вы увидите, как отображается ваш сайт в результатах выдачи. Скорее всего, в одном из поисковиков будет ошибка - с первого раза настроить одинаковую визуализацию сложно.

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

Обсудить сотрудничество