Adding JSON-LD with JavaScript

Question

I am trying to implement structure data using JSON-LD. What I am doing is dynamically get content using jQuery and making JSON format and appending inside the head element.

<script id="dynamicJSONLD"></script>

$(document).ready(function(){
var product_name = $(.product-pg .product-name).text();
data = {
               "@context": "https://schema.org",
               "@type": "Product",
               "url": "https://www.example.com/productone",
               "name": product_name  
            };

//creating the script element and storing the JSON-LD

var script = document.createElement('script');
script.type = "application/ld+json";
script.innerHTML = JSON.stringify(data);
document.getElementsByTagName('head')[0].appendChild(script);

//OR

//storing the JSON-LD using ID
$("#dynamicJSONLD").html(JSON.stringify(data));
});

Do both ways (creating the script element and storing the JSON-LD / storing the JSON-LD using ID) work? Which is the best implementation way? Also, does Google crawl dynamically added JSON-LD like above, using JavaScript?

About your last question: Does Schema.org markup work if markup is dynamically built with JavaScript? — unor
– unor, Commented Jul 17, 2018 at 9:36

Torxed · Accepted Answer · 2021-02-26 21:18:11Z

7

Yes, Google can crawl dynamically added JSON-LD, as explained in this Google article on the topic:

Google can read JSON-LD data when it is dynamically injected into the page's contents, such as by JavaScript code or embedded widgets in your content management system.

Both methods will definitely work, but if you're going to store the JSON-LD using ID you'll need to add the required type attribute to the script:

<script id="dynamicJSONLD" type="application/ld+json"></script>

Once you finish adding your markup, make sure to test it with Google's Structured Data Testing Tool!

edited Feb 26, 2021 at 21:18

Torxed

23.6k15 gold badges91 silver badges135 bronze badges

answered Apr 4, 2019 at 20:34

Noah Jeffrey

1191 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alvaro · Accepted Answer · 2020-01-19 06:23:13Z

0

I use

var Client = require("node-rest-client").Client;
var client = new Client();
var args = {
    headers: { "Accept": "application/ld+json, */*;q=0.5" }
 };

client.get(url+query,args, function (data, response) {
    ......
}

answered Jan 19, 2020 at 6:23

Alvaro

6516 silver badges4 bronze badges

Collectives™ on Stack Overflow

Adding JSON-LD with JavaScript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related