The Google Developers site has a new guide on how to create structured data using JavaScript. This was announced by Twitter search Martin Splitt.

Generally, the guide describes three methods for dynamically adding structured data to a site using JS:

· Google Tag Manager (Google Tag Manager, GTM);
· Custom JavaScript
· Server side rendering.

Google tag manager
Using this method involves six steps:

· Setting up and installing Google Tag Manager on the site.
· Adding a custom HTML tag to the container.
· Inserting the desired block of structured data into the content of the tag.
· Installing the container.
· Publishing the container in the GTM interface to add a tag to the site.
· Checking how the implementation was realized.

Custom javascript
Using this method involves three steps:

· Finding the type of structured data you are interested in.
· Changing the HTML code of your site to include a JavaScript fragment, as in the example below (refer to the documentation of the CMS/hosting provider or seek developers’ assistance).

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);
});


Verify your implementation with the Rich Result Test.
Server side rendering

When using server-side rendering, you can add the desired structured data to the visualized output. Please refer to your platform documentation to learn how to generate JSON-LD markup for the type of structured data.
All recommendations can be found there. The new manual is currently available in English only.