How do I add structured data using JSON-LD on dynamic pages that need to wait for content to load?
I'm developing a website and I want to add structured data to detailed pages. The problem is that I need to request the data before knowing what to add to the JSON-LD script.
I am using Parse as a backend. I also tried to look around for tutorials on how to achieve that but it seems not possible to add JSON-LD dynamically.
I really hope someone can help me with that! :)
EDIT:
The response with the data I need to put in the JSON-LD comes after the DOM is ready. What is it the pattern in this situations?
I have a list of items and when clicking on one of them I have to open a detail page which I have to load first, but after content is loaded I want to provide structured data through JSON-LD.
I'm at the beginning and I'm finding hard times solving this.
EDIT 2:
This is my actual implementation:
In the HTML:
<body>
// my html page code
...
<script type="text/javascript">
loadDetailPageContent();
</script>
</body>
In the JS:
function loadDetailPageContent() {
// Calling the method here is too early because I don't have info
//writeData();
createDetailPage();
}
function createDetailPage() {
var recipe = Parse.Object.extend("Recipe");
var query = new Parse.Query(recipe);
query.equalTo("objectId", myId);
query.first({
success: function(result) {
// Calling the method here would be perfect
writeData();
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
}
function writeData() {
var script = document.createElement('script');
script.type = 'application/ld+json';
script.text = JSON.stringify({
"@context": "http://schema.org",
"@type": "Recipe",
"name": "My recipe name"
});
document.querySelector('head').appendChild(el);
}
As you can see the method writeData() is called in two places. If I call it immediately at the beginning, there is no problem and with the use of the Google Structured Data testing tool, I am able to track the structured data I need. The problem with that is that at that point I don't have the information to create the structured data because I need to wait for the response from Parse.
When I am calling the method in the success callback, then the testing tool is not able to retrieve the data anymore :(
Answer
http://jsfiddle.net/c725wcn9/2/embedded
You will need to inspect the DOM to check this works. Jquery is needed.
$(document).ready(function(){
var el = document.createElement('script');
el.type = 'application/ld+json';
el.text = JSON.stringify({ "@context": "http://schema.org", "@type": "Recipe", "name": "My recipe name" });
document.querySelector('head').appendChild(el);
});
Your code included the variable name script but appended the variable el to the <head> instead. Also removed are the new line characters from the JSON string which was checked with JSON-LD playground .