Search Control

Створення структурованих даних за допомогою JavaScript

В даний час для відображення великого обсягу динамічного контенту використовується JavaScript. Створюючи структуровані дані на сайті за допомогою JavaScript, необхідно враховувати ряд нюансів. У цьому посібнику наведені тематичні рекомендації та описані стратегії додавання даних таким чином. Детальніше про принципи роботи структурованих даних… Створювати структуровані дані за допомогою JavaScript можна по-різному. Найчастіше для цього використовують: Google Менеджер тегів — це платформа, яка дозволяє керувати тегами на сайті, не змінюючи код. Щоб створити структуровані дані за допомогою Google Менеджера тегів, виконайте наступні дії:
  1. Встановіть і налаштуйте Google Менеджер тегів на своєму сайті.
  2. Додайте в контейнер новий спеціальний тег HTML.
  3. Вставте підтримуваний блок структурованих даних у тег.
  4. Встановіть контейнер, дотримуючись інструкцій з розділу Встановити Google Менеджер тегів у меню адміністратора контейнера.
  5. Щоб додати тег на сайт, розмістіть контейнер в інтерфейсі Google Менеджера тегів.
  6. Пройдіть тестування.
Щоб інформацію на сторінці можна було використовувати як частину структурованих даних, в 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, який буде або генерувати всі необхідні структуровані дані, або додавати додаткову інформацію до структурованих даних, які обробляються на стороні сервера. У будь-якому випадку 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.

ІНші записи