title: Including JSON-LD in React component
body: <p>I am currently creating a blog website and want to describe my blog posts using JSON-LD. As I am using React, blog posts are loaded dynamically using react router and content to display is fetched from server when a user clicks a specific blog post link. </p>
  
  <p>Inside the blog post component e.g the component rendered when a user visits <code>/post/1</code> my initial idea is to include the JSON-LD within the returned component markup. e.g, somewhere within the render function have:</p>
  
  <pre><code>   &lt;script type="application/ld+json"&gt;
        {
          {
            "@context": "http://schema.org",
            "@type": "NewsArticle",
            "mainEntityOfPage": {
              "@type": "WebPage",
              "@id": "https://google.com/article"
            },
            "headline": "Article headline",
            "image": [
              "https://example.com/photos/1x1/photo.jpg",
              "https://example.com/photos/4x3/photo.jpg",
              "https://example.com/photos/16x9/photo.jpg"
            ],
            "datePublished": "2015-02-05T08:00:00+08:00",
            "dateModified": "2015-02-05T09:20:00+08:00",
            "author": {
              "@type": "Person",
              "name": "John Doe"
            },
            "publisher": {
              "@type": "Organization",
              "name": "Google",
              "logo": {
                "@type": "ImageObject",
                "url": "https://google.com/logo.jpg"
              }
            },
            "description": "A most wonderful article"
          }
        }
        &lt;/script&gt;
  </code></pre>
  
  <p>My question is, what is the best practice for this? Can search engines pick this up or should I be injecting this into the head section? Can they pick that up? If not, how are you meant to use JSON-LD appropriately in a single page application?</p>
  
  <p>Thanks!</p>