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

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

Россия +7 (495) 139-20-33
Шрифт:
5 36143

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

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

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

Микроразметка — специальные элементы, которые указывают поисковому роботу Яндекса или 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 — решать вам. Разницы во внешнем виде не будет, только в ваших усилиях, месте вывода и материале для изучения.

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

(Голосов: 7, Рейтинг: 4.43)
Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
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
      +
      Ответить
  • Сергей
    16
    комментариев
    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
Алгоритм продвижения сайта через Pinterest
Виктор Гаврюков
27
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - В самом вверху есть ссылка на мою группу в ВК, там где автор материала. Через группу и свяжитесь со мной_)
Как забрать 5 мест в выдаче из 10. Кейс-эксперимент
Виктор Гаврюков
27
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - такое можно делать и с ВЧ_)
Ссылочный апдейт Google: что изменится для SEO-специалистов в рунете
Тимур
6
комментариев
0
читателей
Полный профиль
Тимур - Понял, спасибо за информацию.
3 основные ошибки, которые допускают владельцы сайтов при продвижении
Виктор Гаврюков
27
комментариев
1
читатель
Полный профиль
Виктор Гаврюков - Не обращай внимания_) Если у тебя хороший ресурс, то ты будешь первоисточником, и все кто своровал, автоматически начнут на тебя ссылаться, точнее, так гугл будет считать_)
Как продвинуть сайт по коммерческим запросам в ТОП-10 с помощью ресурса Reddit
Denis Zar
2
комментария
0
читателей
Полный профиль
Denis Zar - пользовались услугами по продвижению на реддит от reddit-marketing.pro?
Как мы увеличили трафик из Яндекса более чем в 3 раза за неделю на сайте клиники. Кейс
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - У большинства сайтов произошел рост в Гугле в декабре и в марте Яндекса. Ваши шаманства тут не причём :)
Как доработка структуры вывела сайт в ТОП-10 Google и увеличила трафик в 2 раза. Кейс Связной Трэвел
Дмитрий
3
комментария
0
читателей
Полный профиль
Дмитрий - Вероятнее всего было обновление Google и позиции были снижены в связи с низкой скоростью загрузки страниц (так как доработке ведутся не только по SEO, но и в целом по функционалу сайта, появляются новые скрипты). В этот период в Google Search Console увеличилось количество страниц с низкой скоростью загрузки. Мы выявили несколько проблем, которые снижают скорость загрузки страниц и выдали рекомендации по их устранению. Пока данные рекомендации находятся в работе. Также был проведен анализ EAT факторов и проверка сайта на соответствие требованиям Google к YMYL сайта, выданы рекомендации по доработке данных факторов (ждем внедрения наших рекомендаций, поделимся потом результатами).
SEO для интернет-магазина зоотоваров: как привести заказы на миллион рублей в месяц. Кейс
Евгений Носенков
1
комментарий
0
читателей
Полный профиль
Евгений Носенков - >>Резюмируя свое мнение: кейс пуст, так как нет связи с конечными целями бизнеса. Если вы внимательно прочтете весь кейс, то увидите, что мы как раз считаем ключевые метрики для бизнеса, такие как CPO из органики, например. И 77 рублей за заказ со средним чеком 2000 рублей, с учетом всей расходной части (себестоимость, хранение, доставка и тд) — это более, чем рентабельно. Плюс весь оффлайн (кто посмотрел на сайте, но пришел ножками в любую из 60-ти точек) не учитывается в данном кейсе. "У меня был проект и не окупался", "В Беларуси кто-то там банкротится" — серьезный фундамент для аналитики по отрасли, ничего не скажешь. >>сейчас тут в ЗОО рентабельны чат боты и воронки А у тоннелей продаж как дела, норм с рентабельностью?)
90% специалистов выделяют бюджет на ссылки. Sape и SEOnews публикуют исследование рынка SEO
Fase Bosty
1
комментарий
0
читателей
Полный профиль
Fase Bosty - Часть рекламного бюджета тоже на ссылки трачу. Благо, что от них есть польза, поведенческие факторы повышаются. Вот только я не на биржах их покупаю, а использую сервис zenlink, ибо у них размещение ручное и на тематических площадках.
Как поступить в ситуации, когда конкурент рекламируется по вашим брендовым запросам. Кейс
Гость
47
комментариев
0
читателей
Полный профиль
Гость - поржал с Тинькофф банк и точка)))
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
114
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
92
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
62
Комментариев
60
Комментариев
59

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