Menu
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 :(
622
In the value object representation, the value of @type is @json . JSON literals represent values which are valid JSON [ RFC8259 ]. See the The rdf:JSON Datatype section in JSON-LD 1.1 for a normative description. JSON-LD document. A JSON-LD document is a serialization of an RDF dataset.
With JSON-LD, a JavaScript object is inserted into the HTML of your page to define data, whereas microdata uses HTML tags and attributes to define data. In its structured data guidelines, Google states that it recommends JSON-LD over microdata for web content.
Structured data markup is a machine-readable representation of your product data directly on your site. The markup that's added to your HTML helps Google and other search engines understand and process your content reliably.
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 .
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
