Search code examples
reactjsseoschema.orgjson-ldstructured-data

Script tags in React JSON-LD Schema

Summary

I'm implementing Schema.org JSON-LD structured Data into a React application that's very content heavy. I've got it all set up properly, but I'm questioning whether the way I set it up is best practice or acceptable?

The Question

I have tags minified throughout the body of my code within each element. I question this approach because it seems inefficient to have script tags all throughout the body rather than trying to consolidate them in the head tag under 1 big script tag with all the JSON-LD.

Example: Let's say I have an eCommerce category with a lot of products on the page. Each product is contained in a <div>. Within each product div I'm providing a schema.org tag. 

<div className="product-1-example">
    <script type="application/ld+json">{"@context":"http://schema.org/", "@type":"Product","name":"3rd thing"}</script>
</div>
<div className="product-2-example">
    <script type="application/ld+json">{"@context":"http://schema.org/", "@type":"Product","name":"3rd thing"}</script>
</div>

Here's a screenshot if the example above doesn't help of how the code is outputting: enter image description here

Is this an OK approach? It just seems bizarre to me to have script tags like this all over the place? The problem I'm having as well is that because of my component structure, I can't really bundle up 1 nice tag at the top with all the consolidated structured data (i.e. grouping all the product JSON-LD data into 1). I could maybe build a script tag at the top with most of the data, and then fill out the rest with microdata?

Solution

  • The only way to really know is to test with the systems you want to read your markup.

    There is no reason doing it that way is wrong. And I presume its done that way as its added at the point the system is processing those entities. Maybe neater to have each add their own script at the top instead of inline if possible.

    I personally prefer to keep entities in their own scripts. If there is a bug in one, it will not stop the others from being parsed. You can have entities cross reference to each other by their ids.

    Try not to mix with microdata. You can't cross reference ids between the two.

    You probably also need to think about your entity structure. Typically you only want one main top level entity that represents what the page is about. Some other top level entities are fine as they are considered WebPage related, e.g. BreadcrumbList. But you don;t want to send mixed messages. e.g. if you mark up 10 products, which is the one the page is about? If you mark up a Product and Article. is the page an Article or about a Product?