Создание структурированных данных с помощью JavaScript

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

Создавать структурированные данные с помощью JavaScript можно по-разному. Чаще всего для этого используют:

• Google Менеджер тегов;
• собственный код JavaScript.

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

Google Менеджер тегов – это платформа, которая позволяет управлять тегами на сайте, не изменяя код. Чтобы создать структурированные данные с помощью Google Менеджера тегов, выполните следующие действия:

1. Установите и настройте Google Менеджер тегов на своем сайте.
2. Добавьте в контейнер новый специальный тег HTML.
3. Вставьте поддерживаемый блок структурированных данных в тег.
4. Установите контейнер, следуя инструкциям из раздела Установить Google Менеджер тегов в меню администратора контейнера.
5. Чтобы добавить тег на сайт, разместите контейнер в интерфейсе Google Менеджера тегов.
6. Выполните тестирование.

Как работать с переменными в Google Менеджере тегов

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

Например, чтобы динамически создать блок JSON-LD для рецепта, где заголовок страницы служит названием рецепта, подготовьте пользовательскую переменную recipe_name:

function() { return document.title; }

Затем переменную {{recipe_name}} можно использовать в HTML-коде специального тега.

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

Ниже приведен пример специального HTML-тега.

<script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Recipe",
    "name": "{{recipe_name}}",
    "image": [ "{{recipe_image}}" ],
    "author": {
      "@type": "Person",
      "name": "{{recipe_author}}"
    }
  }
</script>

Как создать структурированные данные с помощью специального кода JavaScript

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

Процедура создания структурированных данных при помощи JavaScript (с примером):

1. Найдите нужный тип структурированных данных.
2. Включите в HTML-код сайта фрагмент кода JavaScript, как показано в примере ниже (при необходимости изучите документацию CMS/хостинга или обратитесь к специалистам).
   

   fetch('https://api.example.com/recipes/123')
   .then(response => response.text())
   .then(structuredDataText => {
     const script = document.createElement('script');
     script.setAttribute('type', 'application/ld+json');
     script.textContent = structuredDataText;
     document.head.appendChild(script);
   });

3. Выполните проверку с помощью специального инструмента.

Как использовать отрисовку на стороне сервера

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

Как выполнить проверку

Убедитесь, что роботы Google могут найти и просканировать ваши структурированные данные. Для этого выполните проверку следующим образом:

1. Откройте инструмент проверки расширенных результатов.
2. Введите URL, который вы хотите проверить.
3. Нажмите Проверить страницу.

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

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