Микроразметка Schema.org: синтаксис и готовые примеры кода

Чтобы сайт приносил трафик и конвертировал его в продажи, нужно не просто вывести его в топ-10 поисковых систем, но и привлечь внимание пользователей и замотивировать их перейти именно на ваш сайт. Для этого необходимо сделать привлекательный сниппет и работать над CTR.

Улучшить сниппет и увеличить показатель CTR можно с помощью микроразметки Schema.org.

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

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

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

Что можно подтянуть в сниппет:

Навигационную цепочку
Рейтинг и количество голосов
Количество отзывов
Цены на товары и услуги
Изображения товаров
Номер телефона и режим работы
и др.

Улучшение сниппетов таким образом позволит увеличить CTR, что в свою очередь приведет к росту трафика и увеличению заявок и продаж.

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

Есть автоматизированные сервисы для генерации микроразметки, например: https://webcode.tools/generators/structured-data

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

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

Schema.org – это единая схема микроразметки данных, которая была разработана совместно компаниями Google, Yahoo! и Microsoft. Позже к разработке данной схемы присоединилась компания Яндекс.

Микроразметка Schema.org была создана для улучшения поисковой выдачи и для помощи веб-мастерам и разработчикам в продвижении веб-сайтов.

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

Микроразметкой Schema.org чаще всего размечают следующие элементы:

Товары и цены в интернет-магазинах
Услуги и стоимость услуг
Контактную информацию
Отзывы и рейтинг товаров и услуг
Комментарии и оценки в статьях
Вопросы и ответы
Инструкции
Навигационные цепочки и меню

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

Разберем подробнее наиболее распространенные типы разметки данных.

Микроразметка Schema.org может передаваться в 3 форматах структурированных данных:

JSON-LD
Microdata
RDFa

Формат JSON-LD хорошо воспринимается поисковой системой Google, но не поддерживается Яндексом. Если вы отдаете приоритет поисковой системе Google, рекомендуем использовать формат JSON-LD. Для генерации микроразметки в данном формате можно использовать онлайн-генераторы, а код микроразметки можно добавить в header страницы, что значительно упрощает задачу по внедрению микроразметки.

Если вы хотите улучшить сниппеты в поисковой системе Яндекс, рекомендуем использовать формат Microdata.

Синтаксис микроразметки Sсhema.org довольно состоит из нескольких атрибутов:

указывает область действия словаря микроразметки. С помощью атрибута, поисковые роботы определяют, что на странице находится описание определенного объекта. Атрибут используется вместе с атрибутом;
указывает адрес словаря микроразметки, который задействован в разметке соответствующего элемента. Ссылка будет вести на соответствующую папку на домене schema.org.
определяет свойство выбранного элемента.

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

<div> – тег контейнеров для структурирования разделов документа и упорядочивания данных в коде

<span> — строчный контейнер

<time> – тег для разметки даты и времени

<a> – тег для обозначения ссылок

Чтобы внедрить микроразметку schema.org на сайт, необходимо выполнить следующие шаги:

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

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

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

https://webcode.tools/generators/structured-data

https://www.rankranger.com/schema-markup-generator

https://technicalseo.com/tools/schema-markup-generator/

Подготовил готовые примеры кода микроразметки Schema.org в форматах html и JSON.

Элементы навигационной цепочки «хлебные крошки» размечаются микроразметкой https://schema.org/BreadcrumbList. Наличие данной микроразметки позволяет оформить путь к странице в сниппете в виде текста, а не в виде URL. Это делает сниппет более аккуратным и информативным.

Код HTML микроразметки Хлебных крошек Breadcrumbs выглядит следующим образом:

<div itemscope itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="https://example.com/"> <span itemprop="name">Главная</span> </a> <meta itemprop="position" content="1" /> </span> <span> / </span> <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="https://example.com/category/"> <span itemprop="name">Категория</span> </a> <meta itemprop="position" content="2" /> </span> <span> / </span> <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <a itemprop="item" href="https://example.com/category/subcategory/"> <span itemprop="name">Подкатегория</span> </a> <meta itemprop="position" content="3" /> </span> <span> / </span> <span itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"> <span itemprop="name">Текущая страница</span> <meta itemprop="position" content="4" /> </span> </div>

https://schema.org/BreadcrumbList

{ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Главная", "item": "https://example.com/" }, { "@type": "ListItem", "position": 2, "name": "Категория", "item": "https://example.com/category/" }, { "@type": "ListItem", "position": 3, "name": "Подкатегория", "item": "https://example.com/category/subcategory/" }, { "@type": "ListItem", "position": 4, "name": "Текущая страница" } ] }

Для разметки товаров в интернет-магазинах используется микроарзметка https://schema.org/Product.

Данная разметка позволяет разметить следующие элементы:

название товара
описание товара
фото
стоимость
бренд
модель

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

Пример кода микроразметки товара:

<div itemscope itemtype="https://schema.org/Product"> <h1 itemprop="name">Название товара</h1> <img itemprop="image" src="https://example.com/images/product.jpg" alt="Изображение товара"> <p itemprop="description">Описание товара</p> <span itemprop="brand">Бренд товара</span> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <span itemprop="price">Цена товара</span> <meta itemprop="priceCurrency" content="USD" /> <link itemprop="availability" href="https://schema.org/InStock" /> </div> <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"> <span itemprop="ratingValue">Рейтинг товара</span> <span itemprop="reviewCount">Количество отзывов о товаре</span> </div> <a itemprop="url" href="https://example.com/product-page">Ссылка на страницу товара</a> </div>

https://schema.org/Product

{ "@context": "https://schema.org/", "@type": "Product", "name": "Название товара", "image": [ "https://example.com/images/product.jpg" ], "description": "Описание товара", "brand": { "@type": "Brand", "name": "Бренд товара" }, "offers": { "@type": "Offer", "price": "Цена товара", "priceCurrency": "USD", "availability": "https://schema.org/InStock" }, "aggregateRating": { "@type": "AggregateRating", "ratingValue": "Рейтинг товара", "reviewCount": "Количество отзывов о товаре" }, "url": "https://example.com/product-page" }

Вопросы и ответы размечаются микроразметкой https://schema.org/FAQPag. Данная микроразметка позволяет вывести в сниппет дополнительный блок с ответами на вопросы, а также повышает вероятность попасть в блок с быстрыми ответами и похожими запросами.

<div itemscope itemtype="https://schema.org/FAQPage"> <h2>Часто задаваемые вопросы</h2> <div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question"> <h3 itemprop="name">Какой тип доставки вы предлагаете?</h3> <div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer"> <p itemprop="text">Мы предлагаем бесплатную доставку в пределах города при заказе на сумму более 1000 рублей, а также платную курьерскую доставку по всей России и за её пределами.</p> </div> </div> <div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question"> <h3 itemprop="name">Какие способы оплаты вы принимаете?</h3> <div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer"> <p itemprop="text">Мы принимаем оплату наличными и банковской картой, а также через системы электронных платежей (Яндекс.Деньги, WebMoney и др.).</p> </div> </div> </div>

https://schema.org/FAQPage

{ "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "Какой тип доставки вы предлагаете?", "acceptedAnswer": { "@type": "Answer", "text": "Мы предлагаем бесплатную доставку в пределах города при заказе на сумму более 1000 рублей, а также платную курьерскую доставку по всей России и за её пределами." } }, { "@type": "Question", "name": "Какие способы оплаты вы принимаете?", "acceptedAnswer": { "@type": "Answer", "text": "Мы принимаем оплату наличными и банковской картой, а также через системы электронных платежей (Яндекс.Деньги, WebMoney и др.)." } } ] }

Для разметки контактной информации используется микроразметка https://schema.org/Organization.

Микроразметкой контактов можно разметить следующие элементы:

почтовый адрес
юридический адрес
номер телефона
номер факса
режим работы
e-mail
логотип компании
реквизиты (ИНН)
название компании или бренда
оценку на основе рейтинга и отзывов о компании

С помощью данной микроразметки можно вывести в сниппет контактные данные компании.

Пример кода микроразметки контактов в html:

<div itemscope itemtype="https://schema.org/Organization"> <h2>Контакты</h2> <p itemprop="name">Название компании</p> <div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress"> <p itemprop="streetAddress">Улица, дом</p> <p itemprop="addressLocality">Город</p> <p itemprop="postalCode">Индекс</p> <p itemprop="addressCountry">Страна</p> </div> <p itemprop="telephone">+7 (999) 123-45-67</p> <p itemprop="email">info@company.com</p> </div>

https://schema.org/Organization

{ "@context": "https://schema.org", "@type": "Organization", "name": "Название компании", "address": { "@type": "PostalAddress", "streetAddress": "Улица, дом", "addressLocality": "Город", "postalCode": "Индекс", "addressCountry": "Страна" }, "telephone": "+7 (999) 123-45-67", "email": "info@company.com" }

Микроразметкой https://schema.org/LocalBusiness размечаются контактные данных филиалов или региональных компаний.

<div itemscope itemtype="https://schema.org/LocalBusiness"> <h1 itemprop="name">Название компании</h1> <img itemprop="image" src="логотип.jpg" alt="Логотип компании"> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">Адрес компании</span>, <span itemprop="addressLocality">Город</span>, <span itemprop="postalCode">Почтовый индекс</span> </div> Телефон: <span itemprop="telephone">+7-XXX-XXX-XX-XX</span> <a href="ссылка на сайт" itemprop="url">Сайт компании</a> <div itemprop="description">Описание компании</div> </div>

{ "@context": "https://schema.org", "@type": "LocalBusiness", "name": "Название компании", "image": "логотип.jpg", "address": { "@type": "PostalAddress", "streetAddress": "Адрес компании", "addressLocality": "Город", "postalCode": "Почтовый индекс" }, "telephone": "+7-XXX-XXX-XX-XX", "openingHours": "Mo-Fr 09:00-18:00", "url": "ссылка на сайт", "description": "Описание компании" }

<div itemscope itemtype="https://schema.org/Service"> <h1 itemprop="name">Название вашей услуги</h1> <p itemprop="description">Описание вашей услуги</p> <img itemprop="image" src="путь/к/изображению" alt="Альтернативный текст для изображения"> <ul> <li itemprop="serviceType">Тип услуги</li> <li itemprop="areaServed">Регионы, где вы предоставляете услугу</li> <li itemprop="serviceAudience">Целевая аудитория вашей услуги</li> <ul> <li itemprop="itemListElement" itemscope itemtype="https://schema.org/Offer"> <span itemprop="name">Название вашего предложения</span> <span itemprop="description">Описание вашего предложения</span> <span itemprop="price" content="Цена вашего предложения">Цена вашего предложения</span> </li> </ul> </li> </ul> </div>

{ "@context": "https://schema.org/", "@type": "Service", "name": "Название вашей услуги", "description": "Описание вашей услуги", "serviceType": "Тип услуги", "areaServed": "Регионы, где вы предоставляете услугу", "serviceAudience": "Целевая аудитория вашей услуги", "itemListElement": [ { "@type": "Offer", "name": "Название вашего предложения", "description": "Описание вашего предложения", "price": "Цена вашего предложения" } ] } }

Микроразметкой https://schema.org/HowTo размечаются пошаговые инструкции. Наличие такой микроразметки позволяет вывести в сниппет шаги инструкции и сделать сниппет информативным и вривлекательным. Однако стоит быть внимательными и кроме микроразметки, добавить в сниппет дополнительные элементы, которые будут мотивировать пользователей перейти на сайт.

Пример html-кода микроразметки HowTo:

<div itemscope itemtype="https://schema.org/HowTo"> <h2 itemprop="name">Как приготовить пиццу в духовке</h2> <ul> <li itemprop="step" itemscope itemtype="https://schema.org/HowToStep"> <span itemprop="text">Разогрейте духовку до 200 градусов.</span> </li> <li itemprop="step" itemscope itemtype="https://schema.org/HowToStep"> <span itemprop="text">Разложите слой томатного соуса на пицце.</span> </li> <li itemprop="step" itemscope itemtype="https://schema.org/HowToStep"> <span itemprop="text">Добавьте на пиццу нарезанные овощи и мясо.</span> </li> <li itemprop="step" itemscope itemtype="https://schema.org/HowToStep"> <span itemprop="text">Посыпьте пиццу тертым сыром.</span> </li> <li itemprop="step" itemscope itemtype="https://schema.org/HowToStep"> <span itemprop="text">Выпекайте пиццу в духовке в течение 15-20 минут.</span> </li> </ul> <div itemprop="tool"> <span itemprop="name">Духовка</span> </div> <div itemprop="supply"> <span itemprop="name">Томатный соус</span> </div> <div itemprop="supply"> <span itemprop="name">Сыр</span> </div> <div itemprop="supply"> <span itemprop="name">Мясо</span> </div> <div itemprop="supply"> <span itemprop="name">Овощи</span> </div> <div itemprop="yield"> <span itemprop="name">1 пицца</span> </div> </div>

{ "@context": "https://schema.org", "@type": "HowTo", "name": "Как связать шарф", "description": "Шаг за шагом рассказываем, как связать шарф спицами.", "totalTime": "PT2H", "tool": [ { "@type": "HowToTool", "name": "Спицы" }, { "@type": "HowToTool", "name": "Пряжа" } ], "supply": [ { "@type": "HowToSupply", "name": "Шерстяная нить" } ], "step": [ { "@type": "HowToStep", "name": "Набрать петли", "text": "Наберите на спицы 40 петель, используя метод вязания двумя спицами." }, { "@type": "HowToStep", "name": "Вязать шарф", "text": "Следующие 2 часа вяжите шарф узором ажурным плетением." }, { "@type": "HowToDirection", "name": "Готовый шарф", "text": "Получите готовый шарф размером 180х30 см." } ] }

Ретинг размечается микроразметкой https://schema.org/AggregateRating, а отзывы https://schema.org/Review.

<div itemscope itemtype="https://schema.org/Product"> <h1 itemprop="name">Название продукта</h1> <img itemprop="image" src="изображение.jpg" alt="Изображение продукта"> <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"> <span itemprop="ratingValue">4.5</span> из <span itemprop="bestRating">5</span> звезд на основе <span itemprop="ratingCount">25</span> отзывов </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review"> <div itemprop="author">Автор отзыва</div> <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <span itemprop="ratingValue">4.5</span> из <span itemprop="bestRating">5</span> звезд </div> <div itemprop="description">Текст отзыва</div> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review"> <div itemprop="author">Автор отзыва</div> <div itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating"> <span itemprop="ratingValue">4.0</span> из <span itemprop="bestRating">5</span> звезд </div> <div itemprop="description">Текст отзыва</div> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review"> <div itemprop="author">Автор отзыва</div> <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <span itemprop="ratingValue">5.0</span> из <span itemprop="bestRating">5</span> звезд </div> <div itemprop="description">Текст отзыва</div> </div> </div>

{ "@context": "https://schema.org", "@type": "Product", "name": "Название продукта", "image": "изображение.jpg", "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.5", "bestRating": "5", "ratingCount": "25" }, "review": [ { "@type": "Review", "author": "Автор отзыва", "reviewRating": { "@type": "Rating", "ratingValue": "4.5", "bestRating": "5" }, "description": "Текст отзыва" }, { "@type": "Review", "author": "Автор отзыва", "reviewRating": { "@type": "Rating", "ratingValue": "4.0", "bestRating": "5" }, "description": "Текст отзыва" }, { "@type": "Review", "author": "Автор отзыва", "reviewRating": { "@type": "Rating", "ratingValue": "5.0", "bestRating": "5" }, "description": "Текст отзыва" } ] }

После составления кода микроразметки необходимо проверить код через валидаторы микроразметки:

Проверка микроразметки в Google – https://validator.schema.org/

Проверка микроразметки в Яндексе – https://webmaster.yandex.ru/tools/microtest/

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

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

Микроразметка позволяет улучшить сниппеты страниц в поисковой выдаче. Дополнительные элементы в сниппете могут привлечь внимание пользователей и положительно повлиять на CTR.

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

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

В таком случае микроразметка будет работать наиболее эффективно и привлечет на ваш сайт больше трафика.

Микроразметка Schema.org: синтаксис и готовые примеры кода

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

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

Что такое микроразметка Schema.org

Какой контент размечают микроразметкой Schema.org

Синтаксис микроразметки Schema.org

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

Онлайн инструменты для генерации кода микроразметки Schema.org

Готовые примеры кода микроразметки Schema.org

Пример html-кода микроразметки Хлебных крошек Schema.org Breadcrumbs

Пример микроразметки Хлебных крошек Breadcrumbs в JSON

Пример html-кода микроразметки товаров Schema.org Product

Пример микроразметки товаров Product в JSON

Пример html-кода микроразметки вопросов и ответов FAQ

Пример микроразметки вопросов и ответов FAQ в JSON

Пример html-кода микроразметки контактов Organization

Пример микроразметки контактов Organization в JSON

Пример микроразметки Local Business в JSON

Пример html-кода микроразмметки услуг Service

Пример кода микроразмметки услуг Service в JSON

Пример html-кода микроразмметки HowTo

Пример кода микроразметки HowTo в JSON

Пример html-кода микроразметки Ratting и Review

Пример микроразметки Ratting и Review в JSON

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

Заключение