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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Разработка 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:
<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.ua/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://plitka-ot-zavoda.ua/index.php?route=product/search&search={query}",
"query-input": "required name=query"
}
}
</script>

• Хлебные крошки. Разметка этого элемента позволяет вывести дополнительные ключевые слова и более красиво оформить адрес страницы по сравнению со стандартной ссылкой.
• Разметка карточки товара. Основные элементы, такие как наличие, цена, характеристики должны быть описаны. Поисковые системы на основе этих данных сформируют красивый сниппет.
• Информация о компании. Для пользователя разметка информации не дает никаких преимуществ. Разметка контактов, адреса, телефонов и т.д. помогает более высокого ранжироваться компании.
• Строка поиска в выдаче поисковой системы – очень полезный инструмент. Пользователь не переходя на сайт может сразу в выдаче ПС ввести запрос и получить все интересующие его варианты. Кроме того сниппет со строкой поиска выглядит красивее стандартного и занимает больше места в поисковой выдаче.