Микроразметка сайта (семантическая разметка) — это разметка веб-сайта специальными тегами и атрибутами в HTML-коде для структурирования информации.
Атрибуты — это слова, которые определяют характеристики элемента и размещаются внутри открывающего тега этого элемента.
Зачем нужна микроразметка? По двум причинам.
Во-первых, объяснить браузеру, какой контент на сайте: где цена, контакты, отзывы, информация об организации и другое. Это использование понятных веб-обозревателю «слов», которые объясняют ему содержание сайта. Так поисковый робот сможет проще и быстрее считать информацию. А это значит, что пользователи получат релевантную информацию, а владельцы сайта — лояльных и целевых посетителей.
Во-вторых, использование микроразметки удобно пользователю. В поисковой выдаче кроме ссылки мы видим фрагмент контента — сниппет. С его помощью можно кратко и ёмко передать основное содержимое сайта. И если сниппет привлекательный для пользователя, это повышает кликабельность ссылки.
И да, напрямую микроразметка не влияет на ранжирование сайта. Но поисковые системы реагируют на поведенческие факторы, а кликабельность — очень важный показатель заинтересованности пользователей. Поэтому структурные данные веб-страницы — хороший бонус к SEO-продвижению.
Например, сниппет сайта с фильмами, где использовали микроразметку, содержит рейтинг, количество голосов, актёрский состав, режиссёра, год, жанр. Такое оформление больше нравится пользователю, нежели обычный текст под ссылкой, так как содержит чёткую и нужную ему информацию. Вы можете сами выбрать, какую информацию размещать в сниппете.
Чтобы полностью понять, что такое микроразметка сайта, нужно понять, что она в себя включает. Микроразметка — это дополнение HTML-кода. Она состоит из конкретных тегов и атрибутов, которые прописаны в словаре. Как внедрить эти элементы в код, определяет синтаксис. Одна и та же разметка может быть написана различными синтаксисами. Именно словари и синтаксисы определяют основные виды микроразметки сайта.
Словари микроразметки
Для «общения» с браузером создано множество словарей. Но есть два самых популярных. Давайте разбираться.
1. Schema.org
Это самый популярный и распространённый словарь микроразметки.
На это есть причины:
- постоянно расширяется, обновляется и совершенствуется;
- его понимают все известные поисковые системы: Google, Yahoo, Microsoft.
Над улучшением словаря постоянно работает руководящая команда, состоящая из веб-мастеров, которые представляют самые популярные веб-обозреватели. Они проводят публичные обсуждения всех изменений, расширений и дополнений.
Словарь состоит из 823 типов (их ещё называют сущностями) и 1529 свойств этих типов.
Вот некоторые их примеры (слева — сущность, справа — свойства):
- Product (товары) — название товара, рейтинг, цена, описание.
- Event (событие) — тема, месторасположение, длительность, кто выступает.
- Recipe (рецепты) — калорийность, ингредиенты, инструкция, время приготовления.
- Movie (фильмы) — актёры, режиссёр, жанр, страна, рейтинг.
- Organization (организация) — адрес, основатель, телефон, логотип.
2. Open Graph
Изначально словарь был придуман для Facebook, но потом был подхвачен Twitter, LinkedIn и другими. Это метатеги, которые нужно внедрить в код веб-сайта, чтобы при постинге в социальных сетях превью на ресурс выглядело эстетично и чётко передавало суть контента. Использование микроразметки Open Graph делает ссылки понятными и расширенными. Они будут содержать картинку, заголовок и чёткое описание.
Вот основные теги:
og:url — ссылка на источник;
og:type — тип контента: кино «movie», статья «article»…
og:title — заголовок репоста;
og:description — описание;
og:image — изображение;
Синтаксис микроразметки
Синтаксис — это способ использовать словарь. Он определяет, с помощью каких тегов и как будут указываться типы и их свойства. Если проще, то синтаксис указывает, как сочетать между собой различные теги и атрибуты, чтобы браузер их понимал. В одном синтаксисе можно комбинировать различные словари.
Сейчас есть три основных синтаксиса.
1. Microdata (или микроданные)
Этот синтаксис часто используют вместе со словарём Schema.org. Для Microdata используют код HTML, в который внедряют дополнительные атрибуты.
3 основных атрибута микроданных:
1. itemscope — сначала указываем объект, который будем использовать. В открывающий тег помещаем слово «itemscope», так поисковик будет понимать, что элемент, находящийся в теге, имеет дополнительную информацию о своём статусе;
2. itemtype — указываем тип объекта (или сущность), который будем размечать. Например, «Товар»;
3. itemprop — свойства этого объекта. Например, название, описание, цена и валюта.
Как это выглядит в коде:
<div itemscope itemtype="https://schema.org/Product"> — указали тип
<div itemprop="name">название товара</div> — свойство «Название»
<div itemprop="description">текст описания</div> — свойство «Описание»
<div itemprop="price">500</div> — свойство «Цена»
<div itemprop="priceCurrency" content="UAH">грн</div> — свойство «Валюта»
</div>2. RDFa
Данные тоже размещаются в HTML-коде. Этот синтаксис сложный в реализации, поэтому его используют очень редко. Чаще всего — со словарём Open Graph.
3. JSON-LD
Самый молодой из трёх, но очень актуальный синтаксис, который рекомендует Google. Он более простой, понятный и компактный, чем предыдущие.
2 способа добавить микроразметку на сайт
Как мы говорили выше, разметить страницу можно вручную в HTML-коде. Для этого нужно чётко понимать особенности разных синтаксисов: где, с чем и когда их применять. Мельчайшая ошибка может негативно повлиять на всю микроразметку сайта. Лучше обратиться за помощью в веб-студию, где опытные программисты сделают всё правильно. Технически это та же работа, что и остальной код страницы, поэтому микроразметку обычно закладывают сразу — это часть того, что охватывает вёрстка сайта, а не отдельная доработка после запуска.
Есть способ попроще — с помощью онлайн-генераторов. Там нужно в конкретные поля вставить нужную информацию. С генераторами работать очень просто: благодаря множеству подсказок можно легко ориентироваться в интерфейсе.
Онлайн-генераторы для синтаксиса Microdata:
- The Ultimate Microdata Generator,
- Schema Markup Generator,
- Local Business Schema Generator.
Генераторы микроразметки для JSON-LD:
- JSON-LD Schema Generator For SEO — Joe Hall,
- Schema Markup Generator (JSON-LD).
Как проверить микроразметку на сайте
С помощью валидатора Google (инструмент «Проверка расширенных результатов»). В отведённое поле вставляете URL-адрес либо часть кода, который хотите проверить. В отчёте вы увидите перечень ошибок, которые нужно исправить. Google очень тщательно проверяет микроразметку, поэтому замечает даже малейшие ошибки.
Валидатор Schema.org (validator.schema.org) работает подобным образом и проверяет разметку шире — не только те типы, которые Google использует для расширенных результатов. После теста ошибки будут подсвечиваться в коде, и появится дополнительный текст, указывающий на неточности.
Итак, SEO-микроразметка — хороший способ повысить кликабельность ссылки и прибыль сайта. Благодаря микроразметке в выдаче ваш сайт выглядит красиво, и пользователи обращают на него внимание, а поисковые машины лучше понимают ваш контент. Это значит, что семантическая разметка способствует продвижению сайта, хотя её нет в списке факторов ранжирования.