×
Россия +7 (495) 139-20-33

Микроразметка: от теории к практике

Россия +7 (495) 139-20-33
Шрифт:
5 42056
Подпишитесь на нас в Telegram

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

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

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

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

Сравните сами:

Разница сниппетов в поисковой выдаче с микроразметкой и без неё.png

Разница сниппетов в поисковой выдаче с микроразметкой и без нее

Разница при применении разметки OpenGraph для социальных сетей.png

Разница при применении разметки OpenGraph для социальных сетей

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

Как правило, чаще всего для разметки используется специальный стандарт Schema.org, который создан и поддерживается самыми популярными поисковиками — Google, Яндекс, Yahoo! и Bing.

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

Самыми распространенными видами микроразметки являются элементы, общие практически для любого сайта:

  • карточка организации;
  • блок Контакты на сайте;
  • хлебные крошки (навигационная цепочка);
  • товары и цены;
  • отзывы на товары или организацию.

Особняком идет разметка для социальных сетей OpenGraph (для Facebook, ВКонтакте и Google+) и ее «подраздел» Twitter Cards, сделанный специально для Twitter. Чаще всего такая разметка ставится на страницы товаров, статей и новостей — те виды контента, которым любят «делиться» и «рассказывать друзьям».

Способы микроразметки

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

Если перейти на сайт schema.org и пролистать страницу до конца таблиц, можно увидеть список примеров. У каждого из них есть несколько способов отображения — микроданные, RDFa и JSON-LD.

Микроданные

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

У микроданных есть список основных элементов:

  1. Атрибут itemscope, который показывает, что дальше передаются данные об объекте микроразметки.
  2. Атрибут itemtype, в котором указывается тип данного объекта ссылкой на него на сайте schema.org.
  3. Атрибут itemprop для определения конкретного свойства нашего объекта.

RDFa

RDFa (Resource Description Framework) — вид, очень похожий на микроданные, также имеет часть обязательных атрибутов:

  1. Атрибут typeof — аналог атрибута itemtype, но указывается не ссылкой, а названием самого типа.
  2. Атрибут property — аналог itemprop.

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

JSON-LD

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

Поисковая система Google рекомендует использовать формат JSON-LD:

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

При такой разметке информация об организаторе, месте и билетах попадает в Knowledge Graph.

Зеленой рамкой на изображении выделены данные, представленные в Knowledge Graph.jpg

Зеленой рамкой на изображении выделены данные, представленные в Knowledge Graph

Рассмотрим микроразметку разных категорий.

Микроразметка логотипа и социальных сетей

Один из самых простых и основных видов микроразметки.

Разметка логотипа

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

Разметка логотипа.JPG

Как размечать?

  1. Находим на странице свой логотип.
  2. Контейнеру для логотипа присваиваем атрибут itemscope, давая понять, что это отдельный объект микроразметки.
  3. Указываем через itemtype, что это данные об организации ссылкой на schema.org. Важно при этом разметить еще 2 элемента — картинку логотипа и ссылку на главную страницу, что делается свойствами itemprop=”url” и itemprop=”logo”.

Самый удобный способ микроразметки, который будет учитывать и логотип, и социальные сети, будет рекомендуемый Google — JSON-LD:

Разметка логотипа 2.JPG

Разметка социальных сетей

Для логотипа и социальных сетей удобно пользоваться именно JSON-LD, т.к.

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

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

Разметка номера телефона

Телефоны организации мы указываем в отдельном массиве contactPoint. Атрибут contactType указывает, к какому виду контактов относится данный телефон.

Полный список есть здесь, но основные виды контактов:

  • customer service (работа с клиентами);
  • technical support (техническая поддержка);
  • sales (отдел продаж).

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

Микроразметка контактов организации

Еще одна из самых популярных микроразметок — страница контактов. Подобная микроразметка через JSON-LD выглядит следующим образом:

Микроразметка контактов организации.JPG

Как мы видим, по сравнению с предыдущим примером у нас поменялся тип разметки: с Organization на @type LocalBusiness.

Обязательными атрибутами являются name и image, рекомендуемые — telephone, address и priceRange (атрибут, в котором указывается ценовой диапазон ваших услуг).

Более подробное описание полей можно найти здесь.

Что делать, если у вас несколько телефонов?

В LocalBusiness можно указать только один, основной телефон. Но дополнительные телефоны мы всегда можем указать в описании организации — схема Organization из пункта ранее.

Если же у вас несколько адресов, через запятую повторяем фигурные скобки после address (включая их содержимое), обрамив все адреса в квадратные скобки.

Микроразметка контактов организации 2.JPG

И опять-таки — главное не наставить лишних запятых, которые сломают нам микроразметку.

Микроразметка с помощью микроданных выглядела бы следующим образом:

Микроразметка контактов организации 3.JPG

В примере выделены элементы микроразметки. Как ее сделать?

  1. Как и всегда, присваиваем контейнеру тип объекта (в данном случае — Organization)
  2. У вложенных элементов выделяем название организации, ее телефон, email, адрес (который тоже является объектом, со своими атрибутами — улицей, страной, городом и т.д.). Если необходимо добавить в микроразметку элемент, которого не должно быть видно пользователю, можно воспользоваться тегом meta:
Микроразметка контактов организации 4.JPG

Микроразметка хлебных крошек

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

  1. Основному контейнеру мы добавляем атрибут itemscope, объявляя его объектом микроразметки, и указываем его тип через ссылку на schema.org атрибута itemtype.
  2. Отдельный элемент «крошка» мы размечаем через атрибут itemprop="itemListElement", указывая, что это элемент списка.
  3. Добавляем itemscope, так как это тоже объект, и указываем itemtype.
Микроразметка хлебных крошек 1.JPG

4. Ссылку на пункт крошек мы размечаем через атрибут itemprop=”url”, название пункта — itemprop="name", если есть картинка — itemprop="image", а специальное свойство position отвечает за порядковый номер в списке, нумерация начинается с 1.

Разметка хлебных крошек скриптом JSON-LD будет выглядеть следующим образом:

Микроразметка хлебных крошек 2.JPG

В данном примере @id — это уникальный url для данной страницы, name — название пункта меню, image — картинка, а position — позиция пункта в списке, нумерация также начинается с единицы.

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

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

Микроразметка товаров.JPG

Элемент с атрибутом itemprop=”name” — название товара, itemprop="image" — изображение, если картинок много, то можно добавить этот атрибут к каждой из них.

Соответственно, атрибут description — для описания товара, brand — бренд (производитель), sku или mpn — идентификаторы товара, его товарный код.

Внутри товара также есть 2 объекта со своими параметрами:

  1. aggregateRating, который отвечает за разметку отзывов;
  2. Offer, который включает в себя свойства торгового предложения:

  • цена;
  • валюта;
  • наличие товара на данный момент (чаще всего для этого используется два варианта: в наличии — link itemprop="availabilit" href="http://schema.org/InStock" и нет в наличии — link itemprop="availability" href="http://schema.org/OutOfStock");
  • состояние товара.

В виде JSON-LD скрипта разметка товара будет выглядеть следующим образом:

Микроразметка товаров 2.JPG

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

Для расшаривания страницы через социальные сети существует специальная разметка OpenGraph. Данный вид микроразметки был создан Facebook и позволяет управлять видом ссылки при публикации. Он чаще всего размещается вверху страницы внутри контейнера head.

Микроразметка OpenGraph.JPG

Данный вид микроразметки поддерживают такие сервисы, как Facebook, ВКонтакте, Google+, Twitter, LinkedIn, Pinterest и др. В сети Яндекс он используется для передачи данных в сервис Яндекс.Видео и для формирования заголовка сниппета.

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

  • og:locale — тег локализации. По умолчанию — en_EN, для российских сайтов используем русскую локаль ru_RU.
  • og:type — тип страницы. Чаще всего используется нейтральный article (статья). Для товара можно использовать тип product.
  • og:title — заголовок страницы, ее название. Чаще всего содержимое этого тега — содержимое тега title страницы.
  • og:description — соответственно, описание страницы. Оно небольшое, 1–2 предложения сопровождающего текста.
  • og:url — адрес страницы, на которую будет вести ссылка.
  • og:site_name — название вашего web-сайта.
  • og:image — картинка, которой будет сопровождаться описание страницы при перепосте. Картинок может быть несколько, тогда при автоматическом перепосте будет подставляться первая из них, но пользователям будет предоставляться выбор, какую из картинок они хотят разместить.

Подробнее с OpenGraph можно познакомиться на официальном сайте.

Для Twitter предусмотрен свой отдельный вид микроразметки, несколько отличающийся. Хоть Twitter поддерживает OpenGraph разметку, сниппеты с ней будут выглядеть не очень аккуратно. Поэтому существует 4 вида типовых страниц, которые понимает Twitter:

  1. Summary Card — базовый тип, позволяющий добавить название, ссылку, описание и картинку с минимальными размерами 144x144 пикселей (не поддерживается формат SVG).
  2. Summary Card with Large Image — практически повторение предыдущего, но уже с использованием большой картинки с минимальными размерами 300x157 пикселей. SVG так же не поддерживается, из анимированной GIF-картинки будет взят первый кадр. Поддерживаемые форматы JPG, PNG, WEBP и GIF.
  3. Player Card — эта разметка предназначена для видеоформатов. Действует только для защищенного протокола https.
  4. App Card — микроразметка для различных приложений. При расшаривании будет ссылка на страницу скачивания в соответствующем магазине, название, цена, рейтинг и т д.

Для сайта, как правило, интересны только первые два вида. Они отличаются свойством: twitter:card, в котором указывается тип страницы, и картинками с соответствующими измерениями.

Микроразметка для Twitter.JPG

При этом заголовок (twitter:title) не может быть более 70 символов, а описание ограничено количеством 200 символов.

Как проверить себя?

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

  1. Structured Data Testing Tool. Удобный и user-friendly сервис от Google. Для проверки можно вводить как url страницы, так и только микроразмеченный пример кода. Позволяет отследить на лету ошибки в своей микроразметке.
  2. Валидатор микроразметки Яндекса. Похожий инструмент, только от Яндекса, также позволяет проверить как отдельную страницу в интернете, так и просто пример кода.
  3. Валидатор разметки Open Graph от Facebook. Помогает увидеть, как будет выглядеть ваша страница при перепосте.

Вывод

Итак, микроразметка сайта — важный инструмент, позволяющий улучшить ваши позиции в поиске и вид вашей страницы в сниппетах и социальных сетях. Каким способом лучше пользоваться, классическими микроданными или молодым и набирающем популярность JSON-LD — решать вам. Разницы во внешнем виде не будет, только в ваших усилиях, месте вывода и материале для изучения.

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

Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Ольга
    1
    комментарий
    0
    читателей
    Ольга
    больше года назад
    Добрый день! Подскажите, если нужно установить микроразметку для товаров интернет-магазина, нужно создать и поставить на каждую страницу вручную код по образцу? Либо вставляется в виде образца в шаблон страницы товара (что тогда в нем пишется в нужных полях?)
    -
    0
    +
    Ответить
    • Anna Elsukova
      3
      комментария
      0
      читателей
      Anna Elsukova
      Ольга
      больше года назад
      Здравствуйте!
      Лучше всего в шаблон) Примеры кода здесь - docs.google.com/document/d/1SSsV1g6VM1n5p5mDbVeRBnp0Aypp9Ya8FSJpTkXdnfk/edit#heading=h.gbs705rxklvd

      Все значения, в общем-то, стандартные) brand - внутри значение бренда, name - название, image - url картинки, description - текст описания, mpn - можете указать индивидуальный код товара, price - цена, ratingValue - рейтинг товара, reviewCount - количество проголосовавших, availability - доступность к покупке &#...
      Здравствуйте!
      Лучше всего в шаблон) Примеры кода здесь - docs.google.com/document/d/1SSsV1g6VM1n5p5mDbVeRBnp0Aypp9Ya8FSJpTkXdnfk/edit#heading=h.gbs705rxklvd

      Все значения, в общем-то, стандартные) brand - внутри значение бренда, name - название, image - url картинки, description - текст описания, mpn - можете указать индивидуальный код товара, price - цена, ratingValue - рейтинг товара, reviewCount - количество проголосовавших, availability - доступность к покупке (если в наличии, то InStock, если ждет поступления или нет в наличии - OutOfStock). В общем случае, неизменные поля (относительно) - priceCurrency (скорее всего это Рубль для вас, и вряд ли это изменится в зависимости от товара), itemCondition (тут скорее всего все товары у вас новые, поэтому будет new).

      Как-то так)
      -
      0
      +
      Ответить
  • Сергей
    18
    комментариев
    0
    читателей
    Сергей
    больше года назад
    Зачем все примеры кода сделаны картинками?!

    Если вы действительно хотите сделать статью полезной, то нужно предоставить возможность читателям копировать ваши примеры кода и применять их на своем сайте.
    -
    0
    +
    Ответить
    • Anna Elsukova
      3
      комментария
      0
      читателей
      Anna Elsukova
      Сергей
      больше года назад
      Изначально были текстом, видимо, для вставки кода здесь не предусмотрен функционал.
      Именно поэтому ниже в комментарии я приложила все коды в отдельно собранном текстовом файле.
      -
      3
      +
      Ответить
  • Anna Elsukova
    3
    комментария
    0
    читателей
    Anna Elsukova
    больше года назад
    Примеры кода из статьи:

    docs.google.com/document/d/1SSsV1g6VM1n5p5mDbVeRBnp0Aypp9Ya8FSJpTkXdnfk/edit?usp=sharing
    -
    16
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Как мы увеличили число посетителей сайта на 89 000 человек и индекс качества на 30 единиц за 4 месяца
Никита Ширяев
4
комментария
0
читателей
Полный профиль
Никита Ширяев - Здравствуйте, 1. ТЗ на создание контента, это всего лишь одна из задач, которую мы делаем на проекте. 2. Получаемый текст обязательно проходит проверки на спам. 3. ТЗ на создание контента, это ориентир для авторов. 4. Как раз таки ТЗ помогает не переспамить в тексте, так как мы замеряем показатели ТОПа и ориентируемся на него. И опять приведу Вам скриншот, который подтверждает постоянный рост рейтинга домена. DR имеет сильную прогрессию.
Алексей Романенков (Rookee): как обеспечить проекту видимость в интернете и какими инструментами ее наращивать
Rookee
3
комментария
0
читателей
Полный профиль
Rookee - Добрый день. Взяли на заметку, спасибо. Чтобы не пропустить материал на тему репутационной стратегии от Алексея, следите за Rookee в соцсетях :)
Михаил Сливинский (Яндекс): об алгоритмах качества в поиске, сгенерированных текстах и накрутке ПФ
Анна Макарова
389
комментариев
0
читателей
Полный профиль
Анна Макарова - Владимир, спасибо за комментарий! Если вдруг Михаил сюда не придет, то мнением и мыслями можно напрямую поделиться в ТГ амбассадора. В этой новости оставляли контакт: www.seonews.ru/events/vebmasterskaya-2024-v-yandekse-poyavilsya-ambassador-internet-ploshchadok-v-poiske/
Матвей Северянин дает экспертный отзыв: 788 000 ₽ за месяц на продаже Telegram-каналов – реально
Александр
1
комментарий
0
читателей
Полный профиль
Александр - Согласен с Матвеем. Сам покупаю- продаю Тг каналы на бирже : t.me/birga_prodagi_tg_kanalov - Биржа продажи ТГ каналов | Альянс-А
Зачем вам доверие поисковиков, как его укреплять и привлекать клиентов на сайт
Rookee
3
комментария
0
читателей
Полный профиль
Rookee - Рекомендуем задуматься как можно скорее, потому что даже только что созданный сайт чаще всего нуждается в оптимизации. Битые ссылки, лишние редиректы, низкая скорость загрузки - от всего этого нужно избавляться, чтобы сайт успешно продвигался в поиске и удерживал внимание пользователей. Тарифы на оптимизацию бывают разные, в Rookee базовая техническая оптимизация стоит 13 090, а в рамках Комплексного продвижения может обойтись дешевле или дороже в зависимости от потребностей сайта.
Как вырастить трафик из блога в 9,7 раз за год. Кейс
Сергей Шабуров
1
комментарий
0
читателей
Полный профиль
Сергей Шабуров - Константин, здравствуйте! Лид-формы у нас прямо в статьях, так что трафик идет с самих статей.
Яндекс Маркет представил собственный бренд велосипедов Raskat
Анна Макарова
389
комментариев
0
читателей
Полный профиль
Анна Макарова - Для городского велосипеда 14-16 кг - вполне ок, можно сказать легкий. Почему нет? )) Понятно, что есть варианты и легче, но они уже скорее всего будут спортивного плана, где каждый грамм имеем значение.
В какой поисковой системе продвигать финансовый сайт: выводы исследования Sape
Sape
3
комментария
0
читателей
Полный профиль
Sape - Добрый день! Спасибо за вашу обратную связь. Да, действительно, метрика DA не обновляется последние три месяца из-за проблем с поставщиком данных. Мы уже работаем над этим, в ближайшее время исправим. На данный момент для отбора сайтов в системе доступны десятки других метрик, которые обновляются регулярно. Касательно цен — с ними всё в порядке. Если у вас есть вопросы относительно ценообразования, мы готовы на них ответить. Благодарим, что поделились мнением. Мы всегда рады конструктивному диалогу!
Как продвигать сайты на Tilda и стоит ли это делать
Екатерина
1
комментарий
0
читателей
Полный профиль
Екатерина - "таких как канонические URL" - настройки страницы --> SEO --> Продвинутые - Вуаля, присваиваем странице каноникал. "микроразметка Schema.org" - что мешает добавить ее кодом в блок "html-код"
Google AdSense окончательно прекращает работу в России: аккаунты россиян будут деактивированы
Галина Николаева
1
комментарий
0
читателей
Полный профиль
Галина Николаева - а что, разве кто-то еще получал деньги с AdSense? у меня уже 2 года как не работает, деньги там остались, как их вывести, хз
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
389
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
120
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!