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

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

Россия +7 (495) 139-20-33
Шрифт:
5 41185
Подпишитесь на нас в 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
Накрутка поведенческих факторов: дорого, сложно, но можно. Если очень хочется
Oleg_bobr2012
1
комментарий
0
читателей
Полный профиль
Oleg_bobr2012 - Мда...Может Анне сразу в Яндекс написать кейсы по накрутке ПФ. Я бы такого сотрудника гнал вон.
28 способов повысить конверсию интернет-магазина
Татьяна
1
комментарий
0
читателей
Полный профиль
Татьяна - Очень действенные рекомендации представлены в статье! Всё четко расписано и легко внедряемо в работу интернет-магазинов.Удобство и наглядность+различные бонусы и скидки-именно то, что и цепляет покупателя.
7 актуальных сервисов для анализа сайта: сравнительная характеристика
Jenimeon
1
комментарий
0
читателей
Полный профиль
Jenimeon - SimilarWeb один из моих фаворитов, частенько им пользуюсь. Ценник не малый, но функционал хороший. Be1 тоже годный.
Какие сайты лидировали в поиске Яндекса и Google в 2023 году
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Если что по рейтингу вы не правы, есть ядро по которому производиться оценка и вы можете по нему самостоятельно все посмотреть. Единственный объективный рейтинг по SEO. Других не знаю Ну я вам скажу что это не так и в предыдущие года сайт моего клиента попадал в рейтинг, при чем несколько раз. И я прекрасно знал еще до объявления результатов кто лидер - рейтинг прозрачный, есть фразы по которым набираются баллы. В этом году наш сайт не попал в рейтинг например и это было понятно, что не попадет (по статистике позиций)
Как онлайн-магазинам получать максимум трафика с помощью Поиска по товарам Яндекса
Гость из Тюмени
1
комментарий
0
читателей
Полный профиль
Гость из Тюмени - Производим пиломатериалы под заказ, от 1 до 14 дней. Яндекс постоянно банит наш яндекс фид по причине отсутствия товара на складе во время своих тайных проверок. Не возможно донести до модератора, что мы работаем под заказ, поэтому товара нет на складе, т.е. пришёл заказ - мы изготовили.
Создали ресурс для металлургов, который позволяет следить за аналитикой рынка и осуществлять продажи
Наталья Сталь
3
комментария
0
читателей
Полный профиль
Наталья Сталь -
5 способов увидеть сайт глазами поисковика: анализируем скрытый контент и cloaking
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Сейчас клоаку прячут, так что под нее можно глянуть только с гуггловских ip. Сейчас только гуггл сервисами можно глянуть
Простые SEO-работы, которые могут увеличить прибыль компании. Часть 1
roma.lisov
1
комментарий
0
читателей
Полный профиль
roma.lisov - Воспользовался советом по проверке и настройке картинок на сайте – реально дельный совет. Вот вроде и просто, казалось бы, а мне в голову раньше не пришло. А такие нюансы, конечно, нужно знать)
Как мы увеличили поисковый трафик на 30% с помощью ChatGPT
Светлана Светлана
23
комментария
0
читателей
Полный профиль
Светлана Светлана - Я сама работаю в маркетинге и недавно решила еще дополнительно пройти курсы по интернет маркетингу astobr.com/services/povyshenie-kvalifikatsii/menedzhment-upravlenie/internet-marketing/ , как по мне эти знания которые я получила, очень помогают мне в работе
Простые SEO-работы, которые могут увеличить прибыль компании. Часть 2
dayitrix
1
комментарий
0
читателей
Полный профиль
dayitrix - Ну да, для начала важно хотя бы необходимый минимум работ провести, настроить все как положено. А уже потом в более далекие дебри SEO-оптимизации лезть. А то многие ни с того начинают и потом удивляются, почему результата нет.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
386
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
120
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
59

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