title: Script tags in React JSON-LD Schema
body: <p><strong>Summary</strong></p>
  
  <p>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?</p>
  
  <p><strong>The Question</strong></p>
  
  <p>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.</p>
  
  <p><strong>Example:</strong>
  Let's say I have an eCommerce category with a lot of products on the page.  Each product is contained in a <code>&lt;div&gt;</code>.  Within each product div I'm providing a schema.org tag.  </p>
  
  <pre><code>&lt;div className="product-1-example"&gt;
      &lt;script type="application/ld+json"&gt;{"@context":"http://schema.org/", "@type":"Product","name":"3rd thing"}&lt;/script&gt;
  &lt;/div&gt;
  &lt;div className="product-2-example"&gt;
      &lt;script type="application/ld+json"&gt;{"@context":"http://schema.org/", "@type":"Product","name":"3rd thing"}&lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's a screenshot if the example above doesn't help of how the code is outputting:
  <a href="https://i.stack.imgur.com/jTXeB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jTXeB.png" alt="enter image description here"></a></p>
  
  <p>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?  </p>