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

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

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

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

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

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

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

• статьи;
• изображения;
• видео;
• отзывы;
• мероприятия;
• товары;
• и прочее.  

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

Зачем нужна микроразметка

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

Она обеспечивает ряд важных преимуществ: 

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

Стандартная поисковая выдача состоит из сниппетов – блоков информации, которые содержат заголовок страницы, URL-адрес и небольшое описание.

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

Влияние микроразметки на результаты поиска 

Чтобы лучше понять, как микроразметка влияет на результаты поиска, рассмотрим несколько примеров. 

Если в поисковую строку ввести запрос «купить планшет в Москве», то на первой странице можно увидеть товарные сниппеты. 

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

По запросу «лучшие рецепты пиццы» поисковая система тоже может выдать красочные результаты:

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

Аналогично, в выдаче могут появиться и видео:

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

В этой же поисковой выдаче присутствует и такой результат:

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

Еще один пример результата:

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

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

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

Что такое словари и синтаксисы микроразметки

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

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

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

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

Существует несколько типов синтаксиса:

• JSON-LD;
• RDFa;
• микроданные;
• микроформаты. 

Самым популярным считается JSON-LD. Его активно рекомендует Google, так как он обладает высокой гибкостью и удобством использования.

В рамках одного словаря можно применять различные виды синтаксиса. Например, Schema.org совместим с JSON-LD, RDFa, микроданными и микроформатами. Однако при их совместном использовании критически важно обеспечить согласованность атрибутов, чтобы избежать неоднозначности и путаницы в интерпретации данных поисковыми системами.

Обзор основных словарей

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

Schema.Org

Schema.org – это комлексная онлайн-библиотека типов микроразметки, которая позволяет детально описывать сотни самых разнообразных видов контента. 

Среди них самые популярные:

• Article (для статей). 
• Recipe (для рецептов). 
• VideoObject (для видео). 
• HowTo (для инструкций). 
• BreadcrumbList («хлебные крошки» – для навигации по сайту). 
• Product (для описания товаров). 
• Review (для отзывов). 
• ImageObject (для изображений). 

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

Schema.Org включает множество различных тегов. Среди них есть три основных: 

• itemscope – обозначает начало блока, где будет описан объект и его атрибуты;
• itemtype – определяет категорию или класс объекта;
• itemprop – описывает конкретные свойства или характеристики объекта.

Этот словарь рекомендуют к использованию ведущие поисковые системы, включая Яндекс, Google и Bing.

OpenGraph

OpenGraph – это стандарт разметки, который был разработан в Facebook*. Изначально он был предназначен только для оптимизации отображения веб-страниц в этой социальной сети. 

Сегодня данный словарь поддерживают многие онлайн-ресурсы:

• Социальные сети Facebook*, ВКонтакте, Pinterest и прочие.
• Блог-платформы, среди которых WordPress, Shopify, Wix и Squarespace. 
• Мессенджеры вроде Telegram, Skype и Viber. 

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

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

Микроформаты – это стандарт, который объединяет в себе элементы синтаксиса и словаря. При их использовании нельзя применять другие словари микроразметки. Это считается их существенным недостатком, который делает их менее гибкими по сравнению с другими инструментами. 

Микроформаты впервые были введены в 2007 году и сегодня уже считаются устаревшими. Их используют значительно реже, чем OpenGraph и Schema.org. 

Dublin Core

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

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

Виды синтаксиса для микроразметки и их характеристики

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

JSON-LD

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

Основное преимущество JSON-LD заключается в том, что данные размещаются в специальном скриптовом теге <script>. Благодаря этому их можно внедрять и управлять без изменения основного содержимого HTML-страницы. В итоге данные становятся легко доступными для поисковых систем.

Базовый код JSON-LD выглядит следующим образом:

<script type="application/ld+json">
{
//здесь помещаются элементы
}
</script>

Этот код можно считать неким каркасом, который используется по умолчанию. Если сравнить его с html-страницами, то там аналогично работают теги <html>, <head> и <body>. Код самой микроразметки вставляется внутри каркаса, и он должен содержать необходимые данные. 

Например, микроразметка товара может выглядеть следующим образом:

<script type="application/ld+json">
{
"@context": "https://schema.org/", //здесь указывается словарь разметки – Schema.org
"@type": "Product", //объявляется сущность – товар
"name": "iPhone", // свойство – название товара
"image": "https://site.ru/iphone14.png", // URL изображения товара
"description": "iPhone 14", // описание
"brand": "Apple", // бренд-производитель
"aggregateRating": { //рейтинг товара
"@type": "AggregateRating",
"ratingValue": "5", //средняя оценка
"ratingCount": "56" //количество пользовательских оценок
}
}
</script>

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

RDFa

RDFa используется преимущественно с Open Graph. Он направлен на улучшение взаимодействия контента с социальными сетями и позволяет создавать качественные сниппеты, которые привлекают внимание и улучшают вовлеченность пользователей. 

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

Микроданные (Microdata)

Микроданные тесно связаны со словарем Схема.орг и изначально использовались для разметки веб-страниц. Они требуют непосредственного вмешательства в HTML-код, что может быть менее удобно по сравнению с JSON-LD. Несмотря на это, микроданные остаются важным SEO-инструментом, особенно для поисковых систем, которые не полностью поддерживают JSON-LD.

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

В контексте синтаксиса микроформаты тоже можно считать устаревшим стандартом разметки, который использует классы HTML для аннотирования контента. Они все еще могут встречаться на некоторых сайтах, но их роль уменьшается в пользу более современных и удобных форматов, таких как JSON-LD.

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

«Хлебные крошки»

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

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

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

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

Разметка хлебных крошек включает элементы, которые содержат информацию для навигации:

• название страницы (свойство name);
• URL страницы (свойство item);
• позицию в пути (свойство position)​​​​.

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

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

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

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

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

Для большинства компаний подходит тип Organization. Но существуют и более конкретные типы, которые лучше подходят для некоторых видов бизнеса, например LocalBusiness.

Пример кода микроразметки для страницы контактов:

<div itemscope="" itemtype=">
 <span itemprop="name">Название компании</span>
 Контактная информация:

<div itemprop="address" itemscope="" itemtype=>
 Почтовый адрес:
 <span itemprop="streetAddress">номер дома, улица</span>
 <span itemprop="postalCode">почтовый индекс</span>
 <span itemprop="addressLocality">город, страна</span>
 </div>

 Телефон:<span itemprop="telephone">контактный телефон</span>,
 Факс:<span itemprop="faxNumber">факс</span>,
 E-mail: <span itemprop="email">корпоративный e-mail</span>
</div>

В этом примере прописаны разные виды контактной информации: 

• название компании;
• адрес;
• телефон;
• электронная почта.

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

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

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

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

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

Код такой разметки может выглядеть следующим образом:

<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Майка для фитнеса женская</h1>
<img src="/images/article/1556014550.jpg" itemprop="image">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <div>1200 руб.</div>
<meta itemprop="price" content="1200.00"> <meta itemprop="priceCurrency" content="RUB"> </div>
<div>Производитель: <span itemprop="brand">ФитнесСтор</span></div>
<div>Модель: <span itemprop="model">13438</span></div>
<div itemprop="description">Спортивная майка для фитнеса свободного кроя, подойдет как для мягких классов, так и для силовых тренировок, а также повседневной носки. Качественные материалы, ткань отводит влагу, комфортная посадка.</div>
</div>

Здесь тип схемы определен контейнером, в котором содержится микроразметка товара. А внутри основного контейнера присутствует вложенный. Поэтому поисковый алгоритм определяет, что именно там находится конкретная позиция с описанием, ценой и прочими данными.

При необходимости микроразметку для карточки товара можно адаптировать под категорию товаров. Это делается путем добавления дополнительных параметров:

• offerCount – количество товаров в категории (то есть в разделе сайта);
• lowPrice и highPrice – самая низкая и самая высокая цена в указанной категории.

Код такой разметки может выглядеть следующим образом:

<div itemscope itemtype="http://schema.org/Product">
<p itemprop="name">Мужские джинсы</p>
<div itemtype="http://schema.org/AggregateOffer" itemscope="" itemprop="offers">
<div>50 товаров</div>
<meta content="50" itemprop="offerCount">
<div>от 1500 руб.</div>
<meta content="1500" itemprop="lowPrice">
<div>до 7000 руб.</div>
<meta content="7000" itemprop="highPrice">
<meta content="RUB" itemprop="priceCurrency">
</div>
</div>

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

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

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

Используя Schema.org. для такой микроразметки часто включают следующие атрибуты:

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

Пример микроразметки для статьи с использованием Схема.орг может выглядеть так:

<section itemscope itemtype="http://schema.org/Article">
<h1 itemprop="headline">Микроразметка для статьи</h1>
<time itemprop="datePublished" datetime="2024-05-15T20:10:00+00:00">15 мая апреля 2024</time>
<div itemscope itemprop="image" itemtype="http://schema.org/ImageObject">
<img itemprop="url contentUrl" src="/images/article/microrazmetka-schema-org.png" alt="Микроразметка статьи">
</div>
<h2 itemprop="alternativeHeadline">Подзаголовок</h2>
<article itemprop="articleBody">
<p>Текст статьи</p>
</article>
<div>Автор: <span itemprop="author">Иван Ильин</span></div>
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
<img itemprop="url image" src="logo.svg" />
</div>
<meta itemprop="name" content="Иван Ильин">
<meta itemprop="telephone" content="+7 999 99 99 999">
<meta itemprop="address" content="г. Москва">
</div>
<meta itemprop="dateModified" content="2024-05-15T23:30:40+00:00" />
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="Ссылка на статью" />
</section>

Здесь важно обращать внимание на корректное использование атрибутов itemprop и itemtype, а также на правильное указание URL изображений и дат.

Если выполняется микроразметка в формате JSON-LD, то ее нужно вставлять в секцию <head> веб-страницы, и она не влияет на видимый контент. 

Пример такой разметки:

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Article",
    "headline": "Заголовок статьи",
    "datePublished": "YYYY-MM-DD",
    "image": {
        "@type": "ImageObject",
        "url": "URL_изображения",
        "width": 800,
        "height": 600
    },
    "author": {
        "@type": "Person",
        "name": "Имя автора"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Название издателя",
        "logo": {
            "@type": "ImageObject",
            "url": "URL_логотипа"
        }
    },
    "description": "Краткое описание статьи"
}
</script>

Проверка микроразметки на наличие ошибок

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

Для этой цели существуют специализированные инструменты от самих поисковых систем.

В Google для проверки микроразметки можно использовать Google Search Console. Этот инструмент проверяет структурированные данные и создает отчет по двум параметрам:

• Ошибки. Указывают на проблемы, которые нужно исправить, чтобы страница отображалась в Google с дополнительной информацией, что сделает ее более привлекательной для пользователей. 
• Предупреждения. Указывают на потенциальные улучшения, которые можно внести для усиления результата. 

Исправив эти проблемы, можно значительно повысить видимость контента в поисковой выдаче.

В Яндексе для проверки микроразметки есть специальный инструмент в Yandex Webmaster. Он позволяет загрузить фрагмент кода или URL страницы для проверки. Все обнаруженные ошибки будут выделены красным цветом с подробным описанием. Благодаря этому можно быстро идентифицировать и устранить возможные проблемы со структурированными данными на сайте.

Кроме того, существует валидатор разметки от Schema.org. Он работает аналогично двум предыдущим сервисам – позволяет ввести код для проверки или указать URL страницы и получить детальный отчет об ошибках.

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

Заключение

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