Чтобы сайт приносил трафик и конвертировал его в продажи, нужно не просто вывести его в топ-10 поисковых систем, но и привлечь внимание пользователей и замотивировать их перейти именно на ваш сайт. Для этого необходимо сделать привлекательный сниппет и работать над CTR.Улучшить сниппет и увеличить показатель CTR можно с помощью микроразметки Schema.org.Что такое микроразметка?Микроразметка – это разметка контента на страницах сайта, которая позволяет поисковым роботам лучше распознавать контент, что в свою очередь ускоряет индексацию данного контента.Микроразметка позволяет выводить размеченный контент в сниппет, что делает его более информативным и привлекательным для пользователей. Микроразметка состоит из определенных атрибутов, которые добавляются в код страницы сайта. Для разных элементов контента используются соответствующие атрибуты микроразметки.Размеченные данные подтягиваются в сниппеты и выделяются в поисковой выдаче, что позволяет сделать сниппет более информативным и заметным, что дает преимущество перед конкурентами.Что можно подтянуть в сниппет:Навигационную цепочкуРейтинг и количество голосовКоличество отзывовЦены на товары и услугиИзображения товаровНомер телефона и режим работыи др.Улучшение сниппетов таким образом позволит увеличить CTR, что в свою очередь приведет к росту трафика и увеличению заявок и продаж.Однако внедрение микроразметки не гарантирует улучшение сниппета, так как поисковые системы сами принимают решение, подтягивать ли размеченные данные в сниппет или нет. Алгоритмы, по которым формируется решение об улучшении сниппетов, неизвестны.Есть автоматизированные сервисы для генерации микроразметки, например: https://webcode.tools/generators/structured-dataКак микроразметка поможет вам увеличить продажи и почему важно внедрить микроразметкуВсе очень просто. Микроразметка делает сниппет страницы в поисковой выдаче более информативным и привлекательным. Наличие микроразметки позволяет выделить ваш сайт на фоне конкурентов в поиске, что в свою очередь приводит к росту количества переходов. А с ростом трафика соответственно растут конверсии и продажи.Однако здесь стоит учитывать, что надеяться только на SEO и микроразметку в данном случае будет оишбочно. Вы должны предоставлять конкурентные цены на ваши товары или услуги, предоставлять выгодные условия доставки (бесплатная доставка в короткие сроки позволит вам отхватить долю пользователей у конкурентов, с менее выгодными условиями).Что такое микроразметка Schema.orgSchema.org – это единая схема микроразметки данных, которая была разработана совместно компаниями Google, Yahoo! и Microsoft. Позже к разработке данной схемы присоединилась компания Яндекс.Микроразметка Schema.org была создана для улучшения поисковой выдачи и для помощи веб-мастерам и разработчикам в продвижении веб-сайтов.Микроразметка Schema.org позволяет структурировать контент на страницах сайта, улучшать индексацию контента и формировать информативные и привлекательные сниппеты в поисковой выдаче.Какой контент размечают микроразметкой Schema.orgМикроразметкой Schema.org чаще всего размечают следующие элементы:Товары и цены в интернет-магазинахУслуги и стоимость услугКонтактную информациюОтзывы и рейтинг товаров и услугКомментарии и оценки в статьяхВопросы и ответыИнструкцииНавигационные цепочки и менюБолее подробно с типами контента, который можно разметить микроразметкой Schema.org вы можете ознакомится в документации.Разберем подробнее наиболее распространенные типы разметки данных.Синтаксис микроразметки Schema.orgМикроразметка Schema.org может передаваться в 3 форматах структурированных данных:JSON-LDMicrodataRDFaФормат JSON-LD хорошо воспринимается поисковой системой Google, но не поддерживается Яндексом. Если вы отдаете приоритет поисковой системе Google, рекомендуем использовать формат JSON-LD. Для генерации микроразметки в данном формате можно использовать онлайн-генераторы, а код микроразметки можно добавить в header страницы, что значительно упрощает задачу по внедрению микроразметки.Если вы хотите улучшить сниппеты в поисковой системе Яндекс, рекомендуем использовать формат Microdata.Синтаксис микроразметки Sсhema.org довольно состоит из нескольких атрибутов:указывает область действия словаря микроразметки. С помощью атрибута, поисковые роботы определяют, что на странице находится описание определенного объекта. Атрибут используется вместе с атрибутом;указывает адрес словаря микроразметки, который задействован в разметке соответствующего элемента. Ссылка будет вести на соответствующую папку на домене schema.org.определяет свойство выбранного элемента.В разметке данных в html-коде используются следующие теги:<div> – тег контейнеров для структурирования разделов документа и упорядочивания данных в коде<span> — строчный контейнер<link> – элемент для указания ссылки<time> – тег для разметки даты и времени<a> – тег для обозначения ссылок<meta> — для хранения дополнительной информацииКак внедрить микроразметку schema.org на сайтЧтобы внедрить микроразметку schema.org на сайт, необходимо выполнить следующие шаги:Определите, какие данные вы хотите разметить. Например, это может быть информация о компании, товарах, событиях, отзывах и т.д. Выберите соответствующий тип микроразметки на сайте schema.org.Создайте код микроразметки для каждого элемента, который вы хотите разметить. Код микроразметки должен быть добавлен на страницу сайта в тех местах, где находится соответствующий контент.Добавьте код микроразметки на страницу сайта. Код микроразметки можно вставить в HTML-код страницы вручную, или использовать плагины и расширения для упрощения этого процесса.Проверьте правильность вставки кода микроразметки. Используйте инструменты проверки микроразметки, чтобы убедиться в правильности разметки и отсутствии ошибок.Опубликуйте изменения на сайте. После того, как вы внесли изменения на страницу сайта, убедитесь, что они отображаются корректно.Важно помнить, что внедрение микроразметки schema.org не гарантирует ее немедленное отображение в поисковой выдаче. Это зависит от алгоритмов поисковых систем, которые могут использовать размеченные данные при ранжировании и отображении результатов. Однако, использование микроразметки повышает шансы на формирование более информативных и привлекательных сниппетов. Онлайн инструменты для генерации кода микроразметки Schema.orgЕсть множество инструментов для генерации кода микроразметки, где вы просто заполняете поля и воодите свои данные, а сервис автоматически генерирует готовый код микроразметки, который вы можете скопировать и добавить на ваш сайт. Вот несколько примеров таких инструментов:https://webcode.tools/generators/structured-datahttps://www.rankranger.com/schema-markup-generatorhttps://technicalseo.com/tools/schema-markup-generator/Готовые примеры кода микроразметки Schema.orgПодготовил готовые примеры кода микроразметки Schema.org в форматах html и JSON.Пример html-кода микроразметки Хлебных крошек Schema.org BreadcrumbsЭлементы навигационной цепочки «хлебные крошки» размечаются микроразметкой 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>Пример микроразметки Хлебных крошек Breadcrumbs в JSONhttps://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": "Текущая страница" } ] }Пример html-кода микроразметки товаров Schema.org ProductДля разметки товаров в интернет-магазинах используется микроарзметка 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>Пример микроразметки товаров Product в JSONhttps://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" }Пример html-кода микроразметки вопросов и ответов FAQВопросы и ответы размечаются микроразметкой 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>Пример микроразметки вопросов и ответов FAQ в JSONhttps://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 и др.)." } } ] }Пример html-кода микроразметки контактов OrganizationДля разметки контактной информации используется микроразметка 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>Пример микроразметки контактов Organization в JSONhttps://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>Пример микроразметки Local Business в JSON{ "@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": "Описание компании" }Пример html-кода микроразмметки услуг Service<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>Пример кода микроразмметки услуг Service в JSON{ "@context": "https://schema.org/", "@type": "Service", "name": "Название вашей услуги", "description": "Описание вашей услуги", "serviceType": "Тип услуги", "areaServed": "Регионы, где вы предоставляете услугу", "serviceAudience": "Целевая аудитория вашей услуги", "itemListElement": [ { "@type": "Offer", "name": "Название вашего предложения", "description": "Описание вашего предложения", "price": "Цена вашего предложения" } ] } }Пример html-кода микроразмметки HowToМикроразметкой 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>Пример кода микроразметки HowTo в JSON{ "@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 см." } ] }Пример html-кода микроразметки Ratting и ReviewРетинг размечается микроразметкой 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>Пример микроразметки Ratting и Review в JSON{ "@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.Информативные сниппеты вызывают больше доверия у пользователей.При этом слишком подробные сниппеты могут ответить на вопрос пользователя еще в поисковой выдаче, что отобьёт потребность в переходе на сайт. Поэтому при добавлении микроразметки необходимо продумать, какой контент заинтригует пользователя, но при этом не даст развернутого ответа на вопрос.В таком случае микроразметка будет работать наиболее эффективно и привлечет на ваш сайт больше трафика.