Микроразметка сайта: зачем нужна, виды, как сделать и проверить

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

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

Виды микроразметки

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

Среди наиболее популярных словарей можно выделить Schema.Org и OpenGraph. Давайте разберем, как они функционируют на примерах.

Schema.org. Допустим, вы размещаете рецепт на своем сайте. Вы назвали блюдо, перечислили ингредиенты, укажите время приготовления и привели пошаговые инструкции. Однако для поисковых систем это просто набор текста.

Микроразметка Schema org позволяет "объяснить" поисковикам, что именно содержится в тексте. Вы можете пометить название блюда тегом "name", список ингредиентов тегом "recipeIngredient", время приготовления тегом "cookTime" и т.д. Таким образом, микроразметка позволит Google или Яндексу "понять", что это рецепт, и отобразить его в особом формате.

Микроразметка OpenGraph действует аналогичным образом, но ориентирована на социальные сети. Предположим, вы опубликовали пост и хотите поделиться им на Facebook. Вставив ссылку в поле для сообщения, под постом сразу отобразится красивое превью: с изображением, заголовком и кратким описанием. Все благодаря OpenGraph. Добавив соответствующие теги OpenGraph в HTML-код, вы сможете указать, какое изображение использовать для превью, какой текст будет заголовком и что будет в описании.

Изначально этот словарь был создан специально для использования на платформе FB, однако теперь его применяют и на других платформах. В нем содержится меньше тегов, чем в OpenGraph, но этого достаточно для создания привлекательного репоста. Важно правильно использовать словари, за что отвечает синтаксис. Он помогает определить, как, куда и какие теги вставлять в код. Наиболее распространенным форматом является JSON-LD. JSON-LD - это способ кодирования связанных данных с использованием JSON. JSON-LD микроразметка позволяет не только указать, что определенный текст, например, является названием вашего ресторана, но также добавить дополнительную семантику, такую как то, что этот ресторан является итальянским рестораном в Москве.

Какие данные можно разметить с помощью Schema.org

В наборе Schema.org представлено множество различных микроразметок, включающих информацию о товарах и услугах, компаниях и организациях, событиях, личностях, рецептах, статьях, блогах и других элементах. Кроме того, этот набор регулярно пополняется новыми тегами. Благодаря этим микроразметкам можно детально описать практически любой объект или явление. Наиболее распространенные из них мы рассмотрим на примере.

• микроразметка «хлебных крошек»,

• микроразметка адреса и организации,

• микроразметка меню,

• микроразметка карточки товаров,

• микроразметка product и страниц услуг,

• микроразметка статей,

• микроразметка отзывов,

• микроразметка рейтинга,

• микроразметка поиска сайта,

• микроразметка видео,

• микроразметка картинок и фото,

• микроразметка блока вопросов и ответов.

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

«Хлебные крошки»

На веб-сайте доступны навигационные инструменты, которые помогают пользователям определить свое местонахождение на сайте. Например, на сайте интернет-магазина они отображают путь, как «Главная > Женская одежда > Платья > Вечерние платья». Это указывает на то, что пользователь просматривает страницу с вечерними платьями в категории платьев, женской одежды и главной странице.

Адрес и организация

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

Меню

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

Карточка товара

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

Страница услуг

Допустим, у вас есть фирма под названием "Плюс Ремонта ПК", занимающаяся ремонтом компьютеров. Вы хотите применить микроразметку, чтобы помочь поисковым системам понять, что ваша компания предоставляет данную услугу. Ниже перечислены основные свойства:

• `@type`: Определяет тип элемента.

• `name`: Название вашей услуги.

• `serviceType`: Тип вашей услуги. Например, если ваша услуга — это ремонт компьютеров, то serviceType может быть "Ремонт ПК".

• `provider`: Кто предоставляет услугу.

• `description`: Описание вашей услуги.

• `areaServed`: Географический район, где предоставляется услуга.

• `availableAtOrFrom`: Место, где конкретно может быть предоставлена услуга.

• `priceRange`: Диапазон цен для услуги.

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

Статьи

Микроразметка статьи так же, как и остальные теги, даёт возможность поисковику быстро разобраться, что есть в статье. В Schema.org для статей обычно используется тип "Article" или его подтипы, такие как "NewsArticle", "BlogPosting" и т.д.

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

• `@type`: В данном случае будет "Article" или подтип "BlogPosting" или "NewsArticle".

• `headline`: Заголовок статьи.

• `image`: Ссылка на основное изображение статьи.

• `author`: Автор статьи. Здесь можно использовать схему «Person».

• `datePublished`: Дата публикации статьи.

• `dateModified`: Дата последнего обновления статьи.

• `publisher`: Издатель статьи. Здесь можно использовать схему «Микроразметка Organization».

• `description`: Краткое описание статьи.

Отзывы

Наиболее распространенный тип для отзывов — «Review» в Schema.org.

Рейтинг

Микроразметка рейтинга используется для представления рейтинговой информации на веб-сайтах в формате, который могут понять поисковые системы. Обычно для рейтинга используется тип "Rating" в Schema.org.

Поиск сайта

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

Видео

С микроразметкой видео ролик будет лучше отображаться в результатах поиска.

Что указывать в качестве основной информации:

• `name`: Название видео.

• `description`: Описание.

• `thumbnailUrl`: Ссылка на миниатюру видео.

• `uploadDate`: Дата и время загрузки (в формате ISO 8601).

• `duration`: Продолжительность (в формате ISO 8601).

• `contentUrl`: Ссылка на само видео.

Картинки и фото

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

Блок вопросов и ответов

Рерайт: Микроразметка блока вопросов и ответов предназначена для организации информации в формате "FAQ" на вашем веб-ресурсе, чтобы обеспечить ее удобную интерпретацию поисковыми системами.

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

Валидация микроразметки - это проверка ее на соответствие определенным стандартам и требованиям. Есть несколько инструментов, которые позволяют провести такую проверку:

• Яндекс Вебмастер.

• Google Search Console.

• Валидатор Schema.org.

Для применения данных инструментов вам нужно всего лишь скопировать URL сайта или вставить HTML-код в соответствующее поле и начать процесс анализа. С помощью инструмента будет произведена оценка кода и сформирован отчет о возможных проблемах или областях для улучшений. Такой подход поможет убедиться в эффективной работе микроразметки и ее соответствии стандартам Schema.org, Google и Яндекса.