Динамическая микроразметка Schema.org

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

Если у вас есть большой сайт с тысячами страниц, и вы хотите добавить динамическую разметку ко всем из них, вы попали по адресу! Давайте рассмотрим, как их можно адаптировать для каждой страницы вашего сайта без необходимости ручного добавления. И как динамически настраивать их для каждой страницы, избегая трудоемкого ручного процесса. Попрощайтесь со старым методом и поздоровайтесь с оптимизированным и эффективным процессом, который не только экономит ваше время, но и повышает SEO-потенциал вашего сайта.

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

Решение состоит в том, чтобы добавить микроразметку к любому количеству страниц с помощью всего одного фрагмента динамического кода.

Эта статья покажет вам, как создавать динамическую микроразметку schema.org и автоматизировать этот процесс.

Установите необходимые инструменты

Начнем с того, что установим необходимые инструменты.

Создайте учетную запись в Менеджере тегов Google. После создания учетной записи необходимо установить предоставленный код GTM на все страницы вашего сайта.

Selector Gadget — это расширение Chrome с открытым исходным кодом, которое упрощает создание и обнаружение селекторов CSS на сложных сайтах.

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

Определите типы мироразметки, которые вы хотите реализовать, и их необходимые свойства

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

• Определите свой тип контента. Это могут быть статьи, продукты, рецепты, события и т. д.
• Проверьте Schema.org: найдите тип мироразметки, который лучше всего соответствует вашему контенту. Например, если вы продаете книги, вы можете использовать схему «Book».

• Просмотрите обязательные и рекомендуемые свойства: например, для схемы «Book» требуются, такие как «имя» (название книги), «автор», «пример работы» (конкретное издание книги), и рекомендуются такие свойства, как «isbn». , 'numberOfPages' и т. д. Вот список наиболее важных типов мироразметки и их обязательные и рекомендуемые свойства.

Определив тип схемы, который вы хотите реализовать на вашем сайте, следующим шагом будет создание соответствующего шаблона мироразметки.

Создайте шаблон мироразметки

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

• Проверьте шаблон на наличие ошибок. Используйте валидатор, чтобы убедиться, что в вашем шаблоне нет ошибок.
• Проверьте шаблон на наличие обязательных и рекомендуемых свойств. Используйте инструмент проверки структурированных данных Google, чтобы убедиться, что ваш шаблон соответствует обязательным и рекомендуемым свойствам для расширенных результатов избранных фрагментов.

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

В этом примере шаблон микроразметки определяет хлебные крошки (BreadcrumbList) с использованием формата JSON-LD. Он включает в себя следующие свойства: name и @id.

Пример кода JSON_LD для BreadcrumbList

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement":
 [
  {
   "@type": "ListItem",
   "position": 1,
   "item":
   {
    "@id": "https://example.com/dresses",
    "name": "Dresses"
    }
  },
  {
   "@type": "ListItem",
  "position": 2,
  "item":
   {
     "@id": "https://example.com/dresses/real",
     "name": "Real Dresses"
   }
  }
 ]
}
</script>

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

Определите динамический контент

Чтобы определить свойства, которые вы хотели бы заменить динамически, определите элементы, которые изменяются для каждого элемента. В этом примере, если вы создаете шаблон для хлебных крошек (схема BreadcrumbList), такие свойства, как «@id» и «name», скорее всего, будут разными для каждого элемента и поэтому должны заменяться динамически.

Теперь, когда динамическое содержимое определено, мы должны превратить эти значения в переменные.

Преобразование значений в переменные

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

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

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement":
 [
  {
   "@type": "ListItem",
   "position": 1,
   "item":
   {
    "@id": "{{first_bread_crumb_url}}",
    "name": "{{first_bread_crumb}}"
    }
  },
  {
   "@type": "ListItem",
  "position": 2,
  "item":
   {
     "@id": "{{second_bread_crumb_url}}",
     "name": "{{second_bread_crumb}}"
   }
  }
 ]
}
</script>

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

Более того, эти переменные определяются пользователем, что означает, что я буду создавать их с помощью Менеджера тегов Google. Но перед этим мы должны определить селекторы CSS с помощью инструмента SelectorGadget.

Получите селекторы CSS для целевых элементов

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

• Нажмите на элемент страницы, которому должен соответствовать ваш селектор (он станет зеленым). Затем SelectorGadget сгенерирует селектор CSS для этого элемента в нижней части экрана и выделит (желтым цветом) все, что соответствует селектору. В этом случае плагин подсветит все три элемента.
• Теперь, чтобы выбрать только один элемент, щелкните другой выделенный элемент, чтобы удалить его из селектора (красный), или щелкните невыделенный элемент, чтобы добавить его в селектор. Через этот процесс выбора и отклонения SelectorGadget поможет вам найти идеальный селектор CSS для ваших нужд. В нашем случае цель состоит в том, чтобы выделить только один элемент.
• Как только вы выделите один элемент, вы можете скопировать выбранный код css из нижней части страницы.
• Повторите тот же процесс для второго и третьего элемента.

Создайте переменные в GTM

Теперь давайте создадим переменные, которые будут вставлять информацию в наш код микроразметки с помощью Менеджера тегов Google. Для BreadCrumbList мы стремимся создать пару переменных, включая имя элемента хлебных крошек и URL-адрес.

Чтобы создать переменную имени

• Откройте Менеджер тегов Google.
• Нажмите «Переменные».
• Прокрутите вниз до пользовательской переменной и нажмите «Создать».

• Нажмите на конфигурацию переменной и выберите «Элемент DOM».

• В элементе DOM выберите «Селектор CSS» в меню «Метод выбора».
• Скопируйте полученный код в селектор элементов.
• Назовите эту переменную «first_bread_crumb» и нажмите «Сохранить».

• Повторите те же действия для второй переменной.

Чтобы создать переменную url-адреса

• В пользовательской переменной нажмите «Создать».
• Нажмите на конфигурацию переменной и выберите URL.

• Нажмите «Дополнительные настройки»
• В меню «Источник URL» выберите «first_bread_crumb».
• Назовите эту переменную «first_bread_crumb_url» и нажмите «Сохранить».

• Повторите те же действия для второго URL-адреса. Теперь, когда переменные созданы, мы должны развернуть код.

Разверните свой код JSON-LD с помощью Менеджера тегов Google

Менеджер тегов Google (GTM) может быть отличным инструментом для реализации динамической микроразметки, особенно для нетехнических пользователей, которым может быть можно напрямую редактировать код сайта.

Развертывание кода схемы с помощью Менеджера тегов Google — простой процесс.

• Войдите в Менеджер тегов Google
• Нажмите «Теги» на левой боковой панели, затем нажмите «Создать», чтобы создать новый тег.

• Нажмите «Конфигурация тега» и выберите «Пользовательский HTML» в качестве типа тега. В текстовом поле HTML вставьте код разметки схемы JSON-LD.

• Настройте триггер: теперь вам нужно определить, когда этот тег должен срабатывать.
• Нажмите «Запуск» под конфигурацией тега.

Сохраните тег: нажмите «Сохранить», чтобы завершить создание тега.

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

Протестируйте свою реализацию

Тестирование тега перед его развертыванием в Менеджере тегов Google (GTM) — важный шаг для обеспечения его правильной работы и предотвращения возможных ошибок или проблем.

• Нажмите «Предварительный просмотр» в правом верхнем углу.
• Введите URL-адрес, который вы хотите протестировать, и нажмите «Подключиться».
• Убедитесь, что Tag Assistant подключился.
• Выберите «Window Loaded» или «Container Loaded» в меню слева.

• Нажмите на вкладку «Variables» (с выбранным «Window Loaded»), чтобы убедиться, что ваши переменные работают должным образом.

• Вернитесь на страницу, открытую через GTM, и нажмите «Готово».

Теперь, когда все работает как положено, давайте запустим и отправим изменения.

Отправьте свои изменения

Убедившись, что все работает должным образом, нажмите «Отправить», чтобы опубликовать изменения. Это заставит микроразметку работать на вашем сайте.

Заключение

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