Это хорошая идея добавлять файл json+ld в тело с помощью javascript?

Содержание

Вопрос или проблема
Ответ или решение
1. Правильное использование JSON-LD
2. Потенциальные проблемы с индексированием
3. Возможности оптимизации
Заключение

Вопрос или проблема

Я пытаюсь добавить структурированные данные на свою страницу товара в Shopify в файл json+ld

Но когда дело касается отзывов, я использую stamped.io, и чтобы получить массив всех отзывов, мне нужно было получить данные из их API stamped, и вот как я это сделал

<script>
 let url = "https://stamped.io/api/widget/reviews?sId={{storeHash}}&apiKey={{apiKeyPublic}}&productId={{product.id}}"

 fetch(URL)
  .then(response => response.json())
  .then(result => {
      console.log(result.data)
   })
.catch(error => console.log('error', error));
</script>

Теперь мне нужно использовать этот result.data внутри скрипта JSON-LD, но поскольку JavaScript работает на стороне клиента, а Liquid — на стороне сервера, я не могу присвоить значение внутри переменной Liquid. В основном, я не могу сделать это

{% assign data = result.data %}

Я нашел единственный способ, чтобы это работало: создать переменную JavaScript с объектом json-ld внутри нее, а затем добавить ее в тело с помощью функции appendChild(). Вот так:

fetch('https://api.stamped.io/v2/...') 
.then(response => response.json())
.then(result => {
const reviews = result.data;

const jsonLd = {
  ...props,
  "review": reviews.map(review => ({
    "@type": "Review",
    "author": review.author,
    "datePublished": review.date,
    "reviewBody": review.text,
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": review.rating
    }
  }))
};


const scriptTag = document.createElement('script');
scriptTag.type="application/ld+json";
scriptTag.text = JSON.stringify(jsonLd);
document.head.appendChild(scriptTag);
})

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

В идеале, как лучше всего решить эту проблему?

Ответ или решение

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

1. Правильное использование JSON-LD

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

2. Потенциальные проблемы с индексированием

Некоторые из главных опасений, связанных с использованием JavaScript для добавления структурированных данных:

Задержка загрузки: Если ваши данные отображаются слишком поздно, это может снизить вероятность их индексирования поисковыми системами. Google рекомендует, чтобы структурированные данные были доступны как можно быстрее после загрузки страницы.
Проблемы со сканированием: Google не всегда сканирует страницу, выполняя JavaScript. Это может создать риск, что данные JSON-LD могут быть упущены, если сканирование происходит до завершения работы JavaScript.

3. Возможности оптимизации

Вот несколько рекомендаций для того, чтобы улучшить шансы вашего JSON-LD к индексированию:

Серверный рендеринг данных: По возможности, старайтесь генерировать данные на стороне сервера. Это обеспечит, что данные доступны сразу при загрузке страницы. Убедитесь, что получение данных через API происходит на шаге формирования HTML.
Предварительная загрузка данных: Если вы можете извлечь и кэшировать данные о отзывах (например, путем их сохранения в базу данных), это позволит вам добавлять их напрямую в страницы без необходимости выполнения fetch-запросов во время рендеринга. Это также повысит устойчивость и скорость загрузки страницы.
Использование структурированных данных в <script>: Если вы решаете остаться на подходе с динамическим добавлением объектов JSON-LD через JavaScript, убедитесь, что ваш скрипт выполняется в самом начале или загрузке окна (например, в обработчиках событий, таких как DOMContentLoaded), чтобы минимизировать задержку.

Заключение

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

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