Микроразметка как способ повышения отдачи от SEO

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

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

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

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

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

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

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

Форматы микроразметки

Есть несколько форматов микроразметки. Среди самых популярных: Schema.org, Open Graph и Twitter Cards. Эти форматы предоставляют различные типы метаданных, которые могут быть использованы в зависимости от типа контента на странице. Кроме того, существуют специальные инструменты и плагины, которые могут помочь в создании и управлении микроразметкой на сайте.

Schema.org — «золотой стандарт» микроразметки, которому уже больше 10 лет. Его главный плюс — универсальность. С помощью Schema.org можно описать почти любой контент или продукт. 

Open Graph — разработка Meta (ранее Facebook)*. Изначально ее создавали, чтобы в выдаче лучше выглядели сниппеты соцсетей. Однако сейчас использование Open Graph стало шире. В частности, она подходит для блог-платформ. 

Twitter Cards похожа на Open Graph, поскольку также применяется для социальных сетей. С ее помощью можно оформлять сниппеты из Twitter и Telegram.

Далее рассмотрим каждый вариант подробнее. 

Schema.org

Обычное оформление сниппета

Оформление сниппета с микроразметкой Schema.org

Яндекс рекомендует использовать формат Schema.org с синтаксисом Microdata, а Google — с синтаксисом JSON-LD. JSON-LD и Microdata — это способы встраивания микроразметки на веб-страницу, однако они отличаются синтаксисом и способом использования.

Microdata — это встраивание микроразметки прямо в HTML-код страницы. В этом случае HTML-элементам добавляются атрибуты, которые описывают их свойства и тип данных. Такие атрибуты, как itemprop, itemtype и itemid, используются для определения свойств объектов и типа данных.

JSON-LD — это формат сериализации данных. Он использует структурированные данные, которые находятся в теге <script> на странице. JSON-LD имеет более гибкий синтаксис, чем Microdata, и позволяет использовать сложные структуры данных, такие как вложенные объекты и списки.

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

Некоторые из основных типов микроразметки Schema.org включают:

CreativeWork — информация о книгах, фильмах, музыке, статьях и других творческих работах.

Event — о мероприятиях, таких как конференции, спортивные события и концерты.

Organization — о компаниях и других организациях.

Person — об отдельных людях.

Place — о местах, таких как магазины, рестораны и достопримечательности.

Product — о продуктах, таких как электроника, косметика и автомобили.

Review — об отзывах на продукты, услуги и другие объекты.

Video — о видео, включая название, описание и продолжительность.

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

Теги schema.org

В коде семантической разметки schema.org используются стандартные HTML-теги:

div — тег для разграничения разделов документа. С помощью div можно упорядочить блочные элементы и показывать начало / конец объекта.

span — строчный контейнер для описания объекта отрывками текста.

link — «пустой элемент» для задания канонического URL. Для указания ссылки этот тег используют вместе с href-атрибутом.

time — задает дату / время. При этом дату можно указывать только в формате YYYY-MM-DD (2023-03-13). Время — только в формате Тhh:mm (Т15:10) или Тhh:mm:ss (15:10:00).

a — для показа URL, которые должны быть видимыми на странице.

meta — для хранения дополнительной информации.

Open Graph

Обычное оформление сниппета

Оформление сниппета с микроразметкой Open Graph

Некоторые из основных типов микроразметки Open Graph включают:

og:title — заголовок контента.

og:type — тип контента, например, «статья», «книга», «фильм» и т. д.

og:image — изображение, связанное с контентом.

og:url — URL-адрес страницы с контентом.

og:description — описание контента.

og:site_name — название сайта, на котором размещен контент.

og:audio — аудиофайл, связанный с контентом.

og:video — видеофайл, связанный с контентом.

Кроме того, существуют и другие метатеги Open Graph, которые могут быть использованы для более точного описания контента, такие как og:locale, og:updated_time, og:app_id и т. д.

Twitter Cards

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

Twitter Cards доступны в нескольких вариантах:

1. Summary Card — позволяет добавлять заголовок, описание и изображение к твиту.
2. Summary Card with Large Image — аналогичен Summary Card, но с более крупным изображением.
3. App Card — позволяет добавить информацию о мобильном приложении, которое связано с ссылкой в твите.
4. Player Card — позволяет добавлять мультимедийный контент (видео или аудио) в твит.

Пример обычной Summary Card

Пример Summary Card with Large Image

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

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

Пример:   

  <meta name=»twitter:card» content=»summary»>

        <meta name=»twitter:creator» content=»@WizardSape»>

        <meta name=»twitter:title» content=»Влияние ссылок на позиции сайта»>

        <meta name=»twitter:description» content=»Эксперты из Wizard.Sape в очередной раз провели наглядный эксперимент на тему: «Влияние ссылок на позиции сайта»»>

        <meta name=»twitter:image» content=»https://www.seowizard.ru/templates/site/website2020/images/bq1.webp»>

Пояснения к тегам:

twitter:card — тип карточки, который здесь можно опустить, поскольку summary идет по умолчанию.

twitter:creator — ссылка на аккаунт автора.

twitter:title — заголовок, не более 70 символов.

twitter:description — описание, не более 200 символов.

twitter:image — ссылка на изображение, обязательно абсолютная.

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

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

Для Яндекса. Проконтролировать правильность микроразметки поможет Вебмастер: https://webmaster.yandex.ru/tools/microtest/. Нужно ввести в поле для проверки URL страницы или часть кода. Через несколько секунд сервис подсветит красным цветом все ошибки, плюс можно будет увидеть их текстовое описание. 

Для Google. У ПС есть официальный валидатор: https://search.google.com/structured-data/testing-tool. Заполните все поля формы, запустите тест — и увидите результаты. В левой части экрана будет фрагмент исследуемого кода, а в правой — отчет, который покажет ошибки. 

В заключение

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

Есть несколько форматов микроразметки. Для подавляющего большинства сайтов подходит Schema.org. При этом для Яндекса нужно использовать синтаксис Microdata, а для Google — JSON-LD.

Необязательно тестировать микроразметку «наживую» в поисковой выдаче. У ПС есть валидаторы, которыми можно воспользоваться. 

 * Запрещена в РФ, признана экстремисткой организацией

Источник