Как добавить на сайт микроразметку

Ваши ближайшие конкуренты, традиционно занимающие более низкую позицию в выдаче, «обзавелись» расширенным сниппетом и обошли вас? Вероятно, причиной успеха стала микроразметка сайта. Мы расскажем, что представляет собой этот инструмент, поговорим о его пользе, видах и способах применения.

Как добавить на сайт микроразметку

Основная задача микроразметки — помогать поисковикам лучше понимать контент, размещенный на странице, а сайту выделиться в выдаче, выглядеть более привлекательно для пользователей. Тем, кто не знаком с этим инструментом и не знает, что такое микроразметка или как ее добавить на свой сайт, поможет наша статья.

Микроразметка: что это?

Микроразметка — это стандарт, предназначенный для оптимизации семантики. Другими словами, это структурированная разметка страницы по типам данных с помощью добавления специальных атрибутов в ее HTML-код. На понятном для робота языке вы рассказываете, что на странице является заголовком, логотипом, основной фотографией, описанием товара, ценой, временем работы, телефоном. Для каждого основного вида данных есть свой атрибут разметки. Поисковик лучше понимает, о чем идет речь на странице, и формирует расширенный сниппет с обозначенной структурой.

Как добавить на сайт микроразметку

Микроразметка помогает рассказать покупателю, о чем ссылка и что он увидит после перехода по ней. Объясним на простом примере. Вы зашли поужинать в ресторан. В меню — только названия блюд и их цена. Чтобы понять, подойдет ли вам еда, из каких ингредиентов она состоит, понадобится помощь официанта, а значит — время. Если же в меню будет фото блюда, его состав, время приготовления, вы быстро найдете и закажете подходящее. Именно так происходит в случае сайта с микроразметкой. Расширенный сниппет, который появляется после ее внедрения, позволяет пользователю быстро принять решение о полезности информации и перейти по ссылке.

Для чего нужна микроразметка

Есть несколько причин добавить на сайт микроразметку. Среди основных:

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

Многих интересует вопрос, влияет ли микроразметка на ранжирование интернет-ресурса? Ответ — только косвенно.

Как микроразметка влияет на продвижение

Сайт приобретает привлекательный вид в SERP, что приводит к увеличению CTR сниппета. Хорошая кликабельность улучшает поведенческие факторы, которые учитывают все без исключения поисковики при присвоении рейтинга ресурсу.

Как добавить на сайт микроразметку

Сама разметка не входит в число факторов ранжирования и не оказывает прямого влияния на SEO. Кроме того, никто не гарантирует, что после ее внедрения вы сразу же получите ощутимый приток трафика на сайт. Однако это мощный инструмент, который помогает привлекать внимание в выдаче и выделять ресурс на фоне конкурентов.

Важно: если сайт попал под санкции поисковиков или не вызывает у них доверия, микроразметка не улучшит сниппет. Поэтому в первую очередь нужно заниматься общим качеством ресурса. SEO-продвижение — это комплексная работа.

Виды микроразметки

Каждая семантическая микроразметка состоит из словаря и синтаксиса. Проще говоря, языка (набора сущностей по типу «name», «title» и т.д.) и способов разметки (теги, атрибуты, элементы). Существует 3 основных вида микроразметки: Schema.org, OpenGraph, Microformats.org (микроформаты). Каждый удобен по-своему и используется для определенных целей. Важно понять, где каждый из них применять, чтобы достичь лучших результатов.

Schema.org

schema

В середине 2011 года разработчиками был представлен новый стандарт разметки Schema.org. Он считается общепринятым, т.к. поддерживается большинством поисковых систем. Микроразметка производится напрямую в HTML-коде страниц посредством специальных атрибутов и не требует создания файлов для экспорта. С ее помощью легко обозначить практически все элементы и блоки ресурса: отзывы, товары, рейтинг, организацию, профиль и др.

В принципе, сама разметка содержит три тега:

  • itemscope — показывает поисковику, что мы намерены описать какой-то объект;
  • itemtype — тип описываемого объекта;
  • itemprop — свойства объекта.
Как добавить на сайт микроразметку

Благодяря внушительному списку готовых схем и простоте использования, Schema.org на сегодняшний день считается самым дружественным стандартом.

OpenGraph

Как добавить на сайт микроразметку

Была создана разработчиками Facebook и изначально предназначалась для загрузки превью сайта при размещении в одноименной социальной сети. Сегодня ее используют Google+, Twitter. Здесь не так много тегов. В необходимый минимум входят:

  • og:title — основной заголовок;
  • og:description — описание страницы;
  • og:image — ссылка на картинку;
  • og:type — тип контента (самый распространенный — article);
  • og:url — ссылка на страницу.
Как добавить на сайт микроразметку

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

Microformats

Как добавить на сайт микроразметку

Разработка W3C (World Wide Web Consortium). По своей сути и области применения она очень похожа на Schema.org, но проигрывает ей по набору объектов, свойств и простоте использования. В настоящее время поисковиками поддерживаются несколько микроформатов для разметки:

  • hCard — контактной информации организации;
  • hRecipe — описания кулинарных рецептов;
  • hReview — отзывов;
  • hProduct — товаров.

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

Микроразметку можно использовать одну или сразу несколько, позаботившись о том, чтобы размеченные данные не противоречили друг другу.

Внедрение микроразметки на сайт

Существует несколько инструментов, позволяющих быстро расставить микроразметку на страницах своего ресурса. Так, разместить Schema.org помогут:

  • Маркер данных Google Search Console. Позволяет вручную разметить страницу, не меняя код сайта.
  • Мастер разметки структурированных данных (Google’s Structured Data Helper & Data Highlighter). Создает код, который затем внедряется в HTML сайта.
  • Внешние генераторы: apelsin, seolik. Вы вносите информацию, сервисы ее типизируют. Вам остается лишь добавить данные на свой ресурс.
  • Плагины. Schema Creator by Raven, WP Rich Snippets, Schema App Structured Data, All in One Schema.org Rich Snippets. Выбирайте любой плагин, а также подходящую тему: статья, событие, рецепт, отзыв или адрес организации. Это самый простой способ сделать микроразметку на сайте с CMS WordPress.

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

Приведем пример внедрения микроразметки с помощью Маркера данных:

  1. Переходим на ресурс Google Search Console.
  2. Указываем URL типичной страницы (система определит похожие и разметит их все, объединив в группу).
Как добавить на сайт микроразметку

3. Из перечня выбираем тип информации (к примеру, «Статья»), и нажимаем кнопку «Начать выделение».

4. В правой части экрана появится меню со свойствами для данной сущности. Выделяем поочередно области (заголовок, описание товара, контакты и пр.), присваиваем им свойства (выбираем из предложенного списка).

5. После присвоения свойств нажимаем «Готово».

6. Проверяем корректность страниц, исправляем ошибки (в случае их выявления системой), нажимаем кнопку «Опубликовать».

После этого поисковые роботы просканируют веб-страницы и учтут данную разметку.

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

Узнать о наличии микроразметки и о ее корректной работе довольно легко. Посмотрите код страницы или проверьте контент на предмет наличия в нем «itemscope» и «itemtype».

Оценить ссылку на статью в социальных сетях или мессенджерах можно, воспользовавшись сервисом Facebook — «Отладчик репостов». Если все выглядит красиво, структурировано, значит, разметка есть, кроме того, правильно работает.

Есть еще инструменты для проверки разметки, так называемые валидаторы. Это сервисы, специально созданные для этой цели, от Google. Вариантов проверки здесь два:

  1. Прямая вставка HTML-кода. Больше подходит для поиска правильного варианта разметки и дальнейшего переноса его на свой сайт.
  2. Вставка URL страницы. Используется непосредственно для проверки микроразметки на конкретной странице.
Как добавить на сайт микроразметку

Вы вносите код или ссылку на страницу, нажимаете кнопку «Проверить», инструмент анализирует содержимое и выводит отчет о выявленных ошибках (на русском языке). Не переживайте, если их окажется слишком много. Все поправимо.

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

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

Разные типы разметки позволяют описать совершенно разные данные. Для различных типов сайтов используются определенные форматы разметки.

Микроразметка для интернет магазина

Для коммерческого магазина очень важно получить яркий, информационный и максимально полный сниппет. В сниппет подтягивают рейтинги в виде звездочек, цены, описание, отзывы и много другой информации. Основные, наиболее важные элементы:

  • FAQ (часто задаваемые вопросы). Схема разработана для разметки страницы с часто задаваемыми вопросами. Расширенный сниппет, формируемый при помощи этой микроразметки занимает большое место в поисковой выдаче.
    Размеченная страница выглядит в поисковой выдаче следующим образом:
Микроразметка FAQ (вопросы и ответы)
Пример кода микроразметки FAQ:
<html itemscope itemtype="https://schema.org/FAQPage">
<head>
<title>Часто задаваемые вопросы</title>
</head>
<body>
<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<span itemprop="name">? Текст 1</span>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">✅ Текст ответа 1</div>
</div>
</div>
<div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
<span itemprop="name">? Текст 2</span>
<div itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
<div itemprop="text">✅ Текст ответа 2</div>
</div>
</div>
</body>
</html>
  • Хлебные крошки. Разметка этого элемента позволяет вывести дополнительные ключевые слова и более красиво оформить адрес страницы по сравнению со стандартной ссылкой.
  • Разметка карточки товара. Основные элементы, такие как наличие, цена, характеристики должны быть описаны. Поисковые системы на основе этих данных сформируют красивый сниппет.
  • Информация о компании. Для пользователя разметка информации не дает никаких преимуществ. Разметка контактов, адреса, телефонов и т.д. помогает более высокого ранжироваться компании.
  • Строка поиска в выдаче поисковой системы – очень полезный инструмент. Пользователь не переходя на сайт может сразу в выдаче ПС ввести запрос и получить все интересующие его варианты. Кроме того сниппет со строкой поиска выглядит красивее стандартного и занимает больше места в поисковой выдаче.
Строка поиска в сниппете
Реализация микроразметки поисковой строки

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "https://plitka-ot-zavoda.ru/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://plitka-ot-zavoda.ru/index.php?route=product/search&search={query}",
"query-input": "required name=query"
}
}
</script>
  • Хлебные крошки. Разметка этого элемента позволяет вывести дополнительные ключевые слова и более красиво оформить адрес страницы по сравнению со стандартной ссылкой.
  • Разметка карточки товара. Основные элементы, такие как наличие, цена, характеристики должны быть описаны. Поисковые системы на основе этих данных сформируют красивый сниппет.
  • Информация о компании. Для пользователя разметка информации не дает никаких преимуществ. Разметка контактов, адреса, телефонов и т.д. помогает более высокого ранжироваться компании.
  • Строка поиска в выдаче поисковой системы – очень полезный инструмент. Пользователь не переходя на сайт может сразу в выдаче ПС ввести запрос и получить все интересующие его варианты. Кроме того сниппет со строкой поиска выглядит красивее стандартного и занимает больше места в поисковой выдаче.

Микроразметка для сайта услуг

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

  • Контакты компании
  • Блог/статьи
  • Мероприятия/курсы/услуги
  • Разметка для соцсетей

Микроразметка для блога или инфо сайта

Для блогов или информационных сайтов делается разметка статей, рейтингов, видео.

  • Статьи/отзывы/рейтинги
  • Разметка для соцсетей
  • Видео

Внедрение микроформатов и разметки данных не дает гарантию резкого роста проекта, но микроразметка влияет на рост CTR. Большой красивый и структурированный сниппет вызывает интерес у пользователей и положительно влияет на решение перехода на сайт. Поэтому внедрять микроразметку однозначно следует. Но для правильного выбора элементов разметки и формирования кликабельных сниппетов стоит доверить работу специалистам.

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

Ваш комментарий

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

Telegram

Viber

Messenger

Зв'яжіться з нами онлайн
Закрити