проекты агентство
обсудить проект
eng
обсудить проект
15 лет — 15 экопривычек
Пожалуйста, переведите устройство в вертикальный режим

Микроразметка для «Яндекс» и Google: как настроить и проверить

7 июня 2019
30 мин. 38022
image
image
Алексей Семёнов редактор
Микроразметка для «Яндекс» и Google: как настроить и проверить
Люди и роботы видят содержимое сайтов по-разному: первые воспринимают текстовый и визуальный контент непосредственно, а вторые считывают информацию из кода страницы. Чтобы содержимое стало понятнее роботам, были придуманы специальные теги, система которых получила название «микроразметка».

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

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

Преимущества

Микроразметка не влияет напрямую на ранжирование сайтов. После ее внедрения ваши позиции в поиске не изменятся. Однако с помощью микроразметки вы можете улучшить оформление сниппета вашего сайта в поисковой выдаче. Это положительно отразится на показателе кликабельности (CTR) — в результате вырастет трафик. Если при этом у вас полезный и удобный сайт, то улучшатся поведенческие показатели, что тоже приведет к росту.

Примеры

Без разметки:
Источник
Пример микроразметки
С разметкой:
Источник
Пример микроразметки
Пример из выдачи — на 1-м месте сайт с микроразметкой
Пример микроразметки

Принципы работы

Микроразметка — общий термин для десятка способов добавления семантических данных: Open Graph, Schema.org, JSON-LD, FOAF, Dublin Core, Data Vocabulary, Good Relations. Часть из них — словари микроразметки, а другая — синтаксис. Отдельно выделяют стандарт «микроформаты» — они объединяют в себе сразу словари и синтаксисы.

Словарь — язык разметки, набор классов и их свойств, с помощью которых определяется содержимое страницы. К примеру, словарь определяет, каким термином будет обозначаться название — «name», «title» или «n». Синтаксис — то, как будет применяться язык, способ использования словаря. Синтаксис определяет, какими тегами и как будут указываться сущности и их свойства в коде.

Однако в практическом применении интересны лишь самые популярные форматы: Schema.org, Open Graph, JSON-LD и микроформаты.

Schema.org

Это набор классов, которые описывают различные сущности и их свойства. На данный момент насчитывается несколько сотен таких классов. Стандарт постоянно улучшают — добавляются новые свойства. Описание доступно на официальном сайте в разделе «Документация».

Любая разметка Schema.org проводится в два этапа:
01
Описание определенного типа оборачивают в контейнер, в котором указывается схема разметки:

<div itemscope itemtype="http://schema.org/Organization" >
...
</div>
02
Размечают отдельные свойства сущности с указанием на конкретное свойство схемы:

<span itemprop="streetAddress">Нижегородская,6</span>
Документ без разметки

<div>
  <span>Uplab</span>
  Контакты:
  <div>
    Адрес: Нижегородская, 6 стр.2,
    428018,
    Чебоксары,
  </div>
  Телефон: +7 499 955–50–30 
  Электронная почта: info@uplab.ru
</div>
Документ с разметкой Schema.org

<div itemscope itemtype="http://schema.org/Organization">
  <span itemprop="name">Uplab</span>
  Контакты:
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    Адрес:
    <span itemprop="streetAddress">Адрес: Нижегородская, 6 стр.2</span>
    <span itemprop="postalCode"> 428018</span>
    <span itemprop="addressLocality">Чебоксары</span>,
  </div>
  Телефон:<span itemprop="telephone">+7 499 955–50–30 </span>,
  Электронная почта: <span itemprop="email">info@uplab.ru</span>
</div>
Инструкция по микроразметке от «Яндекс» — «Введение в schema.org».

Open Graph

Этот стандарт был разработан Facebook для того, чтобы контролировать превью, которое создается при публикации ссылки на сайт в соцсетях. Open Graph используют Facebook, «Вконтакте», Twitter, LinkedIn, Pinterest и «Яндекс.Видео».
Пример работы микроразметки в соцсетях
Пример использования
Предположим, вы хотите, чтобы в сниппете отображалась определенная информация. Для этого в HTML-коде страницы, внутри элемента head, укажите заголовок страницы и название сайта в свойствах og: title и og: site_name.

<head>
    <meta property="og:title" content="Файлы / Обновленный русификатор для Far Cry 4 / PlayGround.ru" />
</head>
Источник
Пример использования Open Graph

JSON-LD

Формат для описания контента с помощью объектов словаря связанных данных (Linked Data, сокращенно LD). Причем, это синтаксис, то есть способ описания, а словарь может использоваться любой, например, Schema.org. Основное достоинство формата — информация, оформленная с его помощью, становится машиночитаемой. Чтобы данные стали доступны для автоматической обработки, их помещают в тег <script>.

В этом формате данные представляются в наборе ключ-значение. JSON-LD предусматривает зарезервированные ключи, с помощью которых можно определить контекст описания или связать объекты. Для примера: «@context» определяет словарь объектов, а «@type» — тип сущности. Полный список зарезервированных ключей можно узнать в официальной документации JSON-LD.
Пример

<script type="application/ld+json">
{  
  "@context": "http://schema.org",  
  "@type": "FlightReservation",  
  "reservationId": "RXJ34P"
}
</script>
Здесь представлены 3 ключа:
«reservationId» — соответствует свойству reservationId типа FlightReservation, содержит номер бронирования билета.
•
«@type» (зарезервированный) — указывает на тип FlightReservation, в котором можно указать данные о бронировании авиабилета.
•
«@context» (зарезервированный) — показывает, что использован словарь Schema.org.
•
Более подробное описание использования формата на примере бронирования авиабилетов доступно в материале о письмах с информацией.

Микроформаты

Микроформаты — форматы семантической разметки (X)HTML-страниц, благодаря которым роботы могут обрабатывать контент. Формат дополняет существующую HTML-разметку специальными блоками, с помощью которых роботы могут распознать смысловое значение отдельных отрывков текста.

К примеру, можно указать, что строка — это адрес организации:

<div class="adr"> Чебоксары, ул. Нижегородская, 6, стр.2 </div>
На примере HTML-элементу <div> был добавлен атрибут class, в котором прописано имя свойства «adr», предусмотренного микроформатом. В результате робот интерпретирует содержимое элемента как значение этого свойства.

Существует множество видов микроформатов, каждый из которых решает свою задачу. Вот самые известные:
adr — почтовые адреса.
•
hCalendar — события.
•
hCard — организации и люди.
•
•
geo — географические координаты (широта и долгота).
•
hReview — отзывы (о товарах, услугах, событиях и тому подобном).
•
hProduct — товары.
•
nofollow — указание роботам не следовать по ссылке для предотвращения индексации.
•
hRecipe — кулинарные рецепты приготовления блюд.
Официальный сайт разработки микроформатов: microformats.org/wiki/.

Микроразметка в «Яндекс»

«Яндекс» использует различные типы данных для своих сервисов, например, в «Поиске», «Яндекс.Картинках», «Яндекс.Картах», «Яндекс.Видео» и других.

Справка от Яндекс

•
•
Вопросы-ответы по микроформатам в «Яндекс.Помощь»
Вопросы-ответы по семантической разметке в «Яндекс.Помощь»

Микроразметка в Google

В Google микроразметка обозначена как «Структурированные данные». Поисковик рекомендует JSON-LD, но также поддерживает «Микроданные» и RDFa. Компания активно развивает поддержку микроразметки, внедряются новые описания. Весной 2019 года система представила еще 2 новых формата: «How-to» — пошаговые инструкции и «FAQ» — ответы на часто задаваемые вопросы. Отчеты по новым типам микроразметки уже доступны в Google Search Console. Ниже рассмотрим виды расширенных результатов, которые доступны в Google.

Справка от Google

•
•
•
Создание, тестирование и публикация структурированных данных
Руководство по структурированию данных
Рекомендации по использованию структурированных данных

Создание и проверка микроразметки

Создать микроразметку можно несколькими способами: вручную, с помощью мастера от Google, в специальных генераторах или внедрить на сайт специализированные плагины, которые будут сразу размечать контент. А для проверки результата можно использовать сервис от Google или валидатор от «Яндекс».

Мастер разметки структурированных данных

Мастер разметки структурированных данных от Google
Мастер разметки структурированных данных

Генераторы

Чтобы не размечать данные вручную, можно воспользоваться специальными генераторами. Заполните необходимые данные. Скопируйте сгенерированный код и вставьте его на страницу между тегами <head> и </head>.
Генератор на все форматы
Web Code Tools
Web Code Tools
Это лучший вариант для генерации микроразметки на данный момент. Поддерживает все популярные форматы и даже парочку малоизвестных.
Генератор схем JSON-LD
Генератор схем JSON-LD
Генератор схем JSON-LD
Генератор hCard
Генератор hCard
Генератор hCard

Плагины для CMS

Если не хотите пользоваться генераторами, то можно установить плагин, который будет производить семантическую разметку автоматически.
Joomla! — расширения Phoca Open Graph и Easy Open Graph.
•
WordPress — для генерации разметки Open Graph: Open Graph или WP Facebook Open Graph protocol, для Schema.org: Schema & Structured Data for WP & AMP, Markup (JSON-LD) structured in schema.org. Больше плагинов можно найти через поиск.
•
•
Drupal — модуль Open Graph meta tags и Schema.org Metatag для JSON LD.
•
«1С-Битрикс» — платное расширения Social Media Optimizer, поддерживает разметку Open Graph и Twitter Cards или «Микроразметка Schema.org», еще «Микроразметка в один клик».
•
Magento — расширение Social Share – Open Graph.
•
OpenCart — SEO: Микроразметка для Opencart 2.x или SEO Микроразметка Opencart 3.0.

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

Для проверки полученного результата лучше всего пользоваться инструментами поисковых систем.
Валидатор от «Яндекс»
Валидатор от «Яндекс»
Проверка от Google
Проверка структурированных данных от Google
Проверка структурированных данных от Google
Лучший выбор для семантической разметки — синтаксис JSON LD. Во-первых, он позволяет использовать различные словари микроразметки, а во-вторых, его одинаково хорошо воспринимают Google и «Яндекс». А например, schema.org не всегда читается Google. Если вы работаете с соцсетями, то вам обязательно стоит использовать Open Graph. Также довольно универсальны микроформаты и микроданные.

Оформить и проверить микроразметку совсем не сложно — в этом вам помогут бесплатные инструменты от поисковых систем и онлайн-сервисы.

Читайте по теме

Все, что нужно SEO-специалисту. Обзор инструментов
Как составить семантическое ядро для интернет-магазина
•
•
#SEO-продвижение сайтов #SEO на этапе разработки сайта #SEO-продвижение
вернуться к списку статей
Оцените статью

Читайте по теме

30 мин.

674427

Как создавать и использовать лендинги: разбор с примерами

25 мин.

257073

Юнит-экономика: как оценить успешность бизнеса

30 мин.

344000

Дорожная карта: подробное объяснение с примерами и шаблонами

Расскажите
о вашем проекте