Отправить заявку на SEO-продвижение сайта от Ant-Team.ru

Заказать

Все о микроразметке: для чего она нужна, виды словарей и синтаксиса

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

Видеолекция

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

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

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

Рисунок 1. Мем: как поисковая система видит ваш сайт.

Кому и для чего нужна микроразметка на сайте?

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

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

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

*Сниппет — это небольшой фрагмент информации о странице, которую пользователь видит после того, как вбивает свой запрос в строку поиска.

Рисунок 2. Сниппет в поисковой выдаче.

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

Рисунок 3. Мем про микроразметку на сайте.

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

Микроразметка внедряется на страницы с помощью синтаксиса. Он содержит теги и атрибуты, которые описывают сущности* и их свойства. Например, сущность — продукт, его свойства — цвет.

Рисунок 4. Пример синтаксиса семантической разметки.

*В нашем блоге есть подробная статья о том, что такое сущности в SEO.

Словари микроразметки

Существует несколько словарей микроразметки. Рассмотрим подробнее каждый из них.

Микроразметка Open Graph

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

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

Рисунок 5. Как выглядит ссылка в соцсетях при внедрении Open Graph.

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

Рисунок 5. Как выглядит ссылка в мессенджерах.

Основные теги, которые используются для данной микроразметки:

  • og:title — заголовок статьи или страницы;
  • og:description – описание;
  • og:type — тип объекта;
  • og:url — канонический URL страницы, по которому доступен указанный объект;
  • og:image — изображение, которое необходимо подтянуть к публикации при репосте. 
Рисунок 6. Основные теги Open Graph.

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

Тег url — это канонический URL. Если пользователь захочет поделиться не

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

Тег image — это тег, в котором мы указываем путь к изображению. Но нужно понимать, что данное изображение не обязательно должно находиться именно на этой странице. Картинка может находиться в любой части сайта. Главное — указать к ней правильный путь.

Помимо основных, есть также дополнительные теги, которые можно использовать в данной микроразметке. Например, адреса

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

Вы можете создать автоматический код через генератор метатегов Open Graph. Для этого просто заполните поля информацией, скопируйте код и вставьте его на страницу.

Существуют различные сервисы, на которых можно проверить правильность написания кода до внедрения микроразметки, а также проверить наличие микроразметки на сайте. Например https://opengraphcheck.com.

Микроразметка Microformats

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

Особенность Microformats в том, что он заключает в себе не только словарь, но также синтаксис микроразметки. 

На сегодня поисковики поддерживают следующие микроформаты:

  • hCard — для  контактной информации;
  • hRecipe — для рецептов;
  • hReview — для отзывов;
  • hProduct — для товаров.

При работе с сайтами в рунете, необходимо учитывать, что Яндекс поддерживает только hCard и hRecipe.

Рисунок 7. Пример разметки hCard на странице.

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

Подробнее с ним ознакомиться вы можете на сайте Microformats.

Микроразметка Dublin Core

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

Рисунок 8. Мем про словарь Dublin Core.

В РФ с 2011 г. существует ГОСТ с описанием элементов метаданных Dublin Core. Следует отметить, что в ГОСТе не указано обязательное заполнение тех или иных полей, все они являются опциональными. Также там сказано, что порядок разметки никак не влияет на индексирование страниц. Важно понимать, что данная микроразметка никак не повлияет на ранжирование вашего сайта ни в Яндекс, ни в Google.

Микроразметка GoodRelations и Data Vocabulary

Микроразметка Good Relations была создана в 2008 г. компанией Google. Изначально планировалось, что она будет использоваться для описания товаров и услуг в интернет-торговле. Раньше при помощи этого словаря можно было указать специальные свойства для компаний, магазинов или отдельных продуктов.

Словарь Data Vocabulary – еще одна разработка Google. Из него появились так называемые “хлебные крошки”, которые показывают место страницы в иерархии сайта. 

Словари Good Relations и Data Vocabulary объединяет не только то, что оба они разработаны компанией Google, но и тот факт, что оба словаря впоследствии трансформировались в микроразметку Schema.org.

Микроразметка Schema.Org

Schema.Org — самый используемый на сегодня словарь микроразметки. Это некий стандарт семантической разметки данных в интернете.

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

Рисунок 9. Как выглядят страницы в выдаче с микроразметкой и без нее.

С помощью разметки Schema.Org можно получить расширенный сниппет и повысить релевантность страниц на вашем сайте.

В словаре Schema.Org существует огромное количество сущностей, и у каждой из них есть свои свойства. Например, у сущности Product есть такие свойства: название товара, бренд, модель, цвет, размер и т.д.

Рисунок 10. Сущности и свойства в микроразметке Schema.Org.

На рисунке 11 вы можете посмотреть, как выглядят страницы с внедренной микроразметкой Product и Recipe в поисковой выдаче.

Рисунок 11. Пример внедрения микроразметки Product и Recipe.

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

А такие сущности, как How to и FAQ (вопрос-ответ), помимо получения классного и структурированного сниппета, еще и позволяют нам занять нулевые позиции, то есть самые верхние места в поисковой выдаче (когда пользователь может получить ответ на свой вопрос в самой выдаче, не переходя на сайт).

Рисунок 12. Пример внедрения разметки с сущностями How to и FAQ.

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

Виды синтаксиса

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

  1. RDFa.
  2. Микроформаты.
  3. Микроданные.
  4. JSON-LD.

Синтаксис RDFa

RDFa (Resource Description Framework) может описать любую сущность человека или события. Он основан на атрибутах тегов html для указания названий объектов и их свойств:

  • typeof — тип объекта;
  • property — свойство объекта.

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

Рисунок 13. Пример синтаксиса RDFа.

Синтаксис Microdata

Microdata (Микроданные) — простой и структурированный способ разметки. У него также есть свой список обязательных элементов, которые необходимо размещать:

  • Атрибут itemscope — определяет область действия словаря в структуре данных.
  • Атрибут itemtype — показывает адрес словаря, который используется для создания микроразметки.
  • Атрибут itemprop — показывает конкретное свойство объекта.
Рисунок 14. Микроданные. 

Для генерирования кода микроданных существуют различные сервисы:

  • webcode.tools
  • Local Business Schema Generator
  • htmlstrip.com

Но нужно учитывать, что у каждого сервиса свой функционал. Например, сервис webcode.tools поддерживается только 14 сущностей, в то время как сервис htmlstrip.com поддерживает всего 3 сущности. 

Рисунок 15. Сервисы для генерации кода разметки.

Синтаксис JSON-LD

Наиболее удобный, простой и популярный на сегодняшний день синтаксис — это JSON-LD.

JSON-LD – это формат описания контента с помощью объектов словаря с набором взаимосвязанных данных. То есть в html-код добавляется скрипт, в котором прописываются необходимые свойства, связанные с сущностью. В частности, при помощи JSON-LD можно размечать информацию для графа знаний, а также отображать в SERP поиск по сайту.

Рисунок 16. Синтаксис JSON-LD.

Для JSON-LD вы также можете использовать генератор кода:

  • technicalseo.com – подойдет новичкам поскольку он очень простой в использовании. Работает с такими популярными сущностями, как Product, Article, FAQ Page, Breadcrumb, Event.
  • schemaapp.com — продвинутый генератор, который больше подойдет профессионалам. Поддерживает все сущности, которые есть в разметке Schema.org.
  • hallanalysis.com — работает с сущностями: Website, Local Business, Organization, Event, Person.

Важно! Для Яндекса подходят все виды синтаксиса, о которых мы говорили выше. Но у JSON-LD есть ограничения. Яндекс заявляет лишь о частичной поддержке данного синтаксиса, и с ним возникают определенные проблемы. Но если вы ориентируетесь на страны, где основной поисковой системой является Google, то смело используйте JSON-LD.

Рисунок 17. Мем про синтаксис JSON-LD.

Бонус! Мы подготовили короткий тест, который поможет вам структурировать и запомнить основную информацию из данной статьи.

P.s. Подписывайтесь на наш телеграм-канал t.me/seoantteam. Мы публикуем полезный контент по поисковой оптимизации сайтов как для новичков, так и для профессионалов, в формате статей и видеоуроков. Если вы начинающий специалист, посмотрите наше видео про подробный техаудит сайта из базового курса по SEO.