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

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

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

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

Сопоставите сами:

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

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

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

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

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

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

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

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

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

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

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

Микроданные

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

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

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

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

  • Атрибут typeof — аналог атрибута itemtype, но указывается не ссылкой, а наименованием самого типа.
  • Атрибут property — аналог itemprop.
  • RDFa считается более мощным, но и более сложным инструментом. Если для ваших мишеней хватает микроданных, то рекомендуется остановиться на них, и не лезть в дебри RDFa.

    JSON-LD

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Основному контейнеру мы добавляем атрибут itemscope, объявляя его объектом микроразметки, и указываем его тип сквозь ссылку на schema.org атрибута itemtype.
  • Отдельный элемент «крошка» мы размечаем через атрибут itemprop=»itemListElement», указывая, что это элемент списка.
  • Добавляем itemscope, так как это тоже объект, и указываем itemtype.
  • 4. Ссылку на пункт крошек мы размечаем сквозь атрибут itemprop=”url”, название пункта — itemprop=»name», если есть картинка — itemprop=»image», а специальное свойство position отвечает за порядковый номер в списке, нумерация начинается с 1.

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

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

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

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

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

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

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

  • aggregateRating, который отвечает за разметку отзывов;
  • Offer, который включает в себя свойства торгового предложения:
    • стоимость;
    • валюта;
    • наличие товара на данный момент (чаще всего для этого используется два варианта: в наличии — и нет в присутствии — );
    • состояние товара.

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

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

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

    Данный вид микроразметки поддерживают такие сервисы, как 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:

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

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

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

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

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

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

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

    Источник: seonews.ru