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

Источник: sanity.io

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

В материале расскажем, что такое микроразметка, как её правильно настраивать и для чего она применяется.

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

Микроразметка — специальные теги и коды, которые добавляются на веб–ресурс для улучшения восприимчивости информации поисковыми роботами. Это специальные атрибуты в вёрстке, которые используются для того, чтобы системы и сервисы могли быстрее и полнее проанализировать содержимое сайта.

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

Микроразметку сайта можно сравнить с картотекой книг в библиотеке. Читатель сначала изучает в каталоге карточки и на их основе выбирает нужную книгу. Также поступают и поисковые роботы: они сначала анализируют метки и на их основе находят нужную информацию.

Для каких целей используется?

Источник: prod.website-files.com

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

Преимущества внедрения микроразметки:

Качественное отображение в поисковой выдаче: достигается благодаря информативным сниппетам (адаптированная мини-версия сайта), дополнительным элементам и структурированному представлению данных.
Улучшение показателей кликабельности. Достигается за счёт расширенных сниппетов (например, такие элементы как маркированные списки, карусель изображений или видеоконтент), более точного соответствия запросам пользователей, визуального выделения среди конкурентов.
Рост релевантного трафика. Происходит благодаря улучшению позиций в поисковой выдаче, увеличению целевой аудитории и сведению к минимуму показателя отказов.
Оптимизация голосового поиска. Структурированность информации позволяет голосовым помощникам эффективнее находить нужные сайты.

Исследования показывают, что добавление микроразметки позволяет ряду крупных компаний повысить CTR на 25–30%.

Что такое словари микроразметки сайта?

Источник: wooninjas.com

Микроразметка состоит из нескольких элементов: тегов и атрибутов. Часть из них видна пользователям, другие необходимы исключительно для поисковых систем. Для того, чтобы лучше разобраться в теме, необходимо изучить основные атрибуты (словари).

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

Schema.org

Предназначен для предоставления информации по объекту без посещения страницы. Содержит три основных атрибута:

itemscope — указывает непосредственно на объект;
itemtype — указывает на тип объекта, — itemprop — указывает на свойства объекта. В случаях с товарами это цены или описание.

Open Graph

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

«og:locale» — местоположение сайта и основной язык контента;
«og:type» — тип отображаемого контента, например, обзор, статья, пост;
«og:title» — метатег title в основном используется для статей;
«og:description» — метатег description;
«og:url» — указывает на адрес веб-страницы;
«og:image» — наличие изображений в теле статьи, обзора, описания;
«og:site_name» — название сайта.

Микроформаты

Микроразметка, которая использует стандартные элементы языка HTML. Их применяют для того, чтобы поисковые системы быстрее находили и могли продемонстрировать пользователю основные данные страницы. Например, контакты, отзывы, карточку товара.

Включают в себя несколько форматов, например, hCard, hRecipe и hReview. При этом каждый формат обладает своими правилами и атрибутами.

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

Синтаксисы микроразметки сайта

Если словари микроразметки показывают что описывается, то синтаксисы — как это делается.

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

Microdata

Устаревший синтаксис, который изначально применялся со словарями Schema.org. Сложен в применении из-за необходимости вручную помечать каждый HTML–элемент в редакторе. В данный момент используется для поисковых систем, поддерживающих JSON-LD («Яндекс»).

RDFa (Resource Description Framework in attributes)

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

Основан на тегах и атрибутах языка XHTML, из-за своей сложности используется не часто и в большинстве случаев со словарём Open Graph для создания привлекательных сниппетов в социальных сетях.

JSON-LD (JavaScript Object Notation for Linked Data)

Наиболее распространённый формат синтаксиса, который чаще всего применяется для разметки в рамках словаря Schema.org. Элементы размещаются не в коде HTML–страницы, а в скриптовом теге — <script>. Информацию, размеченную JSON-LD, понимают и используют основные поисковые системы (Google в основном поиске, «Яндекс» — в «Яндекс Почте» и для вопросов и ответов на мобильной выдаче).

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

Представим, что нам нужно добавить микроразметку для сайта, например, автосалона ООО «АвтоРай».

Начнём с добавления контактов, для этого потребуется воспользоваться словарём Schema.org:

На сайте выбираем подходящий словарь, например, Organization.
Изучаем актуальные требования и рекомендации основных поисковых систем (Яндекс и Google).
Указываем необходимые атрибуты, чтобы поисковые роботы смогли определить, что в данной секции используется разметка со словарём. Для этого нужно добавить атрибут itemscope, который задаст область связанных метаданных. Затем необходимо включить связанный атрибут itemtypy, где указываем URL–адрес применяемого словаря. В нашем случае это Organization. В итоге должна получиться запись вида «ключ-значение»: itemtype="<http://schema.org/Organization>".
Производим разметку адреса организации. Для этого можно воспользоваться атрибутом itemprop с значением address, чтобы выделить в разметке адрес компании. В результате получим запись вида: itemprop="address". По такому же алгоритму можно использовать атрибут itemprop для разметки остальных контактных данных.
Проверяем корректность добавленной микроразметки. Чуть ниже расскажем, как это сделать.

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

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

Способы проверки микроразметки на Яндексе и Google

После окончания работы с микроразметкой ресурса, необходимо удостоверится насколько сайт соответствует требованиям поисковых систем. Для этого есть валидаторы:

«Яндекс.Вебмастер»

Сервис позволяет загрузить фрагмент кода или ссылку на ресурс. При обнаружении ошибок, программа их подсветит красным цветом и выдаст комментарии с указанием возможных ошибок. Процесс занимает от нескольких секунд до пары минут. Проверке подлежат следующие форматы словарей: Schema.org, Microdata, RDFa.

Преимущества:

Прост в использовании. Достаточно вставить адрес или HTML-код, чтобы запустить процесс проверки.
Интуитивно понятное отображение ошибок. Сервис подсвечивает все ошибки и предупреждения, а также даёт комментарии по их причинам возникновения.

Недостатки:

Авторизация. Проверка доступна только авторизованным пользователям «Яндекс».
Проверить можно не все форматы. Например, невозможно проверить на валидность JSON-LD и Open Graph.

Google

Проверить работоспособность микроразметки в Google можно по URL или через загрузку HTML–кода. Также есть возможность посмотреть как будут отображаться расширенные сниппеты.

Преимущества:

Детальная проверка. Можно ознакомиться со всеми нюансами связанными с микроразметкой.
Расширенные сниппеты. Сервис демонстрирует как будут выглядеть сниппеты в поисковой выдаче.
Авторизация. Проверку можно выполнить при отсутствии аккаунта Google.

Недостатки:

Проверяются исключительно ошибки в Schema.org. Если на веб–странице применяется несколько форматов разметки, то на наличие ошибок в них придётся проверять в другом валидаторе.

Примеры

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

Применяем актуальные версии словарей;
Проверяем корректность разметки;
Системно обновляем данные;
Следим за обновлениями требований поисковых систем;
Тестируем отображение в выдаче.

Помимо этого, есть ещё SEO-рекомендации:

Приоритезируем важные страницы;
Проводим мониторинг эффективности;
Используем A/B тестирование разных форматов;
Регулярно проводим анализ конкурентов;
Отслеживаем тренды.

Расскажем подробнее, как применяется микроразметка для разных типов страниц.

Организация

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

Телефонные номера в международном формате;
Адрес с указанием страны и почтового индекса;
Время работы в стандартном формате;
Координаты с точными значениями;
Ссылки на социальные сети с полными URL.

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

Продукт

Для разметки карточек товара специалисты рекомендуют использовать тип Product из словаря Schema.org. Он поможет указать основную информацию о продукте, в том числе, название, изображение, стоимость, наличие и другие характеристики.

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

offerCount — указывает на количество товара в категории;
lowPrice и highPrice — самая низкая и высокая цена в указанном разделе.

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

В микроразметку продукта могут быть включены следующие элементы:

Карточка товара с кратким описанием;
Перечень основных характеристик и свойств товара;
Отзывы и рейтинги;
Стоимость и наличие товара;
Условия доставки;
Условия акций и реферальной программы.

Статьи и новости

Для размещаемых на веб–ресурсе статей или новостей используются атрибуты:

headline – название материала, по нему поисковые роботы определяют, что в этом месте кода размещён заголовок;
datePublished – по данному атрибуту поисковые системы распознают дату публикации;
image – указывает на изображения, которые связаны с материалом;
articleBody – помогает поисковикам распознать основной текст статьи;
author – указывает на автора статьи;
publisher – показывает название ресурса, на котором статья опубликована.

Часто задаваемые вопросы

В чем заключаются преимущества и недостатки микроразметки?

Использование микроразметки имеет широкий спектр преимуществ и недостатков:

Преимущества:

повышение кликабельности за счёт улучшения отображения сниппетов в поисковой выдаче;
улучшение показателей видимости сайта и возможность выделиться среди конкурентов;
упрощение индексации страниц поисковыми роботами.

Недостатки:

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

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

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

Какие ошибки могут встречаться и как их исправить?

В ходе проверки работоспособности микроразметки сайта могут быть выявлены следующие ошибки:

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