Добавление семантической разметки с помощью диспетчера тегов Google

Рассказываем о JSON-LD.

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

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

Мы перевели и дополнили небольшую инструкцию по добавлению семантической разметки с помощью GTM.

Печальное прошлое — семантическая разметка

Внедрение структурированных данных с помощью семантической разметки может потребовать много времени и по итогу — разочаровать, так как у этого метода есть и плюсы, и минусы. До недавнего времени разметка была возможна лишь путем добавления атрибутов из Schema.org к имеющемуся коду HTML-страницы.

Schema.org — единая схема (словарь) семантической разметки в HTML5, которая поддерживается ведущими поисковыми системами (Яндекс, Google, Yahoo!, Bing и др.). Доступны 3 основных синтаксиса (формата): Microdata, RDFa и JSON-LD.

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

Добавление семантической разметки с помощью диспетчера тегов GoogleВот сколько кода нужно для разметки данных средствами HTML (и это лишь небольшой фрагмент)

Кроме того, встраиваемая разметка по своей природе привязана к слою представления данных — к элементам, отображаемым на сайте. Вы не могли описать с помощью разметки элементы данных, которые не находятся на странице (за исключением мета-тегов). И если два элемента информации не были расположены на странице рядом, было трудно, а то и вообще невозможно связать их вместе в одном атрибуте itemScope (который указывает роботу на наличие на странице микроразметки и задает область действия словаря в HTML-коде).

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

JSON-LD полностью поддерживается алгоритмами Google и Bing. Собственно говоря, Google рекомендует для аккаунтов Merchant Center добавлять структурированные данные через JSON-LD вместо встраивания в текст страницы. Яндекс пока не поддерживает этот формат, предпочитая Microdata (за исключением Яндекс.Почты) — хотя страницы с JSON-LD успешно проходят валидацию.

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

Статический JSON-LD

В этом разделе мы будем использовать довольно простой пользовательский сценарий, более сложные ситуации будут разобраны далее — в разделе о динамическом JSON-LD.

Имейте в виду, что даже самый навороченный пример — это лишь верхушка айсберга. Вряд ли существует такой уровень сложности, который бы не смогли поддержать структурированные данные, вставляемые с помощью диспетчера тегов Google.

Статический JSON-LD можно добавлять в тег <head> соответствующей страницы или вставлять с помощью плагина, однако самый простой (и гибкий) способ реализовать это — использовать диспетчер тегов Google (GTM).

Этап 1. Напишите JSON-LD

Если вы не знакомы с JSON-LD, вероятно, вам нужно что-нибудь прочитать о нем или получить краткую консультацию, чтобы освоить базовые понятия. Первоисточник для изучения — статья Google «Введение в структурированные данные» (Introduction to Structured Data), можно также почитать статью о JSON-LD в блоге PromoPult. Также на schema.org могут найтись примеры разметки JSON-LD.

Добавление семантической разметки с помощью диспетчера тегов GoogleПример JSON-LD для типа Event в schema.org

После начального тега script, который «говорит» браузеру: «Это скрипт JSON-LD», вы видите иерархию нашего скрипта:

  • Ключ @context указывает, к какому семантическому словарю объектов мы привязываем данные — в нашем случае это словарь schema.org.
  • Ключ @type указывает тип сущности в schema.org, на которую мы ссылаемся. Это эквивалент атрибута itemtype во встраиваемой разметке. В примере тип сущности — Event (то есть описываться некое событие).
  • С этого момента мы можем прямо указывать конкретные свойства — пары Атрибут (Property) / Значение (Value). Это эквивалент атрибута itemprop во встраиваемой разметке. В примере описан адрес места, его название, название события и оффер (цена и валюта).

Обратите внимание, когда мы ссылаемся на сущности, например, Place, необходимо вызывать этот @type отдельно и ставить эту сущность в свои собственные скобки, чтобы показать, какие вложенные атрибуты принадлежат упомянутой сущности.

Не забывайте отделять все атрибуты запятыми, кроме последнего перед закрывающей скобкой, в противном случае ваш код не будет интерпретирован должным образом (а охотиться за пропущенной запятой по всему коду — удовольствие ниже среднего)!

Когда ваш код будет написан, протестируйте его в Инструменте проверки структурированных данных Google, чтобы убедиться, что все на месте и у вас нет пропущенных необходимых свойств.

Этап 2. Создайте триггер

В диспетчере тегов Google нам нужно создать триггер, чтобы активировать тег разметки JSON-LD на той странице, на которой нужно, — в примере выше это должно произойти на целевой странице «Typhoon with Radiation City».

Создайте триггер:

  • Тип: Просмотр страницы (Page View).
  • Активировать: Некоторые просмотры страниц (Some page views).
  • Когда активировать этот триггер: адрес страницы равен URL вашей целевой страницы.

Добавление семантической разметки с помощью диспетчера тегов GoogleВот как должны выглядеть настройки триггера

Этап 3. Создайте тег

Теперь нужно создать тег, который будет активирован на целевой странице, и вставить структурированные данные JSON-LD.

Создайте тег:

  • Тип: Пользовательский HTML (Custom HTML).
  • HTML: вставьте созданный вами код JSON-LD, не забыв добавить открывающий и закрывающий теги script.
  • Активация триггера: используйте триггер из этапа 2.

Добавление семантической разметки с помощью диспетчера тегов GoogleВот как должны выглядеть настройки тега

Этап 4. Публикуйте и тестируйте

Опубликовав страницу с тегом, снова проверьте URL страницы в Инструменте проверки структурированных данных, чтобы убедиться, что Google может интерпретировать страницу и понимает ее.

Готово!

Динамический JSON-LD

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

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

Этап 1. Создайте переменные с помощью селектора CSS

Поскольку мы хотим, чтобы этот скрипт был динамическим, понадобится использовать переменные GTM — чтобы найти элементы данных, которые нам нужны, и присвоить им имена, которые скрипт может понять.

Создайте новую (заданную пользователем) переменную. В этом примере мы создаем переменную, чтобы сохранить название товара:

  • Дайте переменной запоминающееся название, например «dataPoint — Product Name». Вы снова будете обращаться к ней по этому названию.
  • Тип: Элемент DOM (Document Object Model).
  • Метод выбора: CSS-селектор.
  • Селектор элемента: уникальный CSS-селектор для элемента. В этом примере класс элемента — product-name, поэтому селектор будет .product-name.

Добавление семантической разметки с помощью диспетчера тегов Google

Повторите эту процедуру для всех свойств, которые вам потребуются, чтобы сделать свои структурированные данные валидными.

Этап 2. Сведите воедино в виде функции

К сожалению, мы не можем просто вставить свои переменные в код JSON-LD и поставить точку. Диспетчер тегов Google вставляет JavaScript, чтобы вернуть переменные, и такой JavaScript сделает наш код невалидным.

Поэтому мы должны «обернуть» JSON-LD в функцию, которая будет сперва вытаскивать наши переменные, затем объединять их в объект JavaScript и вставлять законченный тег script JSON-LD в тег <head> страницы.

В итоге скрипт в пользовательском HTML-теге (в GTM) должен выглядеть примерно следующим образом:

Добавление семантической разметки с помощью диспетчера тегов Google

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

JSON-LD разметка и АМР-страницы — пока нет

Увы, использовать GTM для ввода структурированных данных через JSON-LD на ускоренные мобильные страницы (АМР) нельзя. GTM-контейнеры для АМР-страниц, как и большинство сущностей для АМР, — это урезанные версии. Они не поддерживают пользовательские HTML-теги или пользовательские переменные JavaScript, потому что они могут слишком долго загружаться.

Если на вашем сайте есть АМР-страницы, придется вернуться к технологии встраиваемой разметки.

***

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

При этом разметка с JSON-LD полностью валидированная, дает расширенные описания в поисковой выдаче, поддерживается Bing и Google. Поэтому — грех не попробовать.

Полезные ссылки:

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

Маркер, или Хайлайтер для разметки буквально с помощью выделения на сайте.

Обход сайта гугл-ботом для ускорения индексации разметки.

⌃ ↩
Обучающий центр
интернет-маркетинга
Вы выбираете площадки для рекламы
Курсы по поисковому продвижению
8 практических занятий