1

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.

Inside the blog post component e.g the component rendered when a user visits /post/1 my initial idea is to include the JSON-LD within the returned component markup. e.g, somewhere within the render function have:

   <script type="application/ld+json">
      {
        {
          "@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"
        }
      }
      </script>

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?

Thanks!

Eladian
  • 958
  • 10
  • 29
  • I don’t know React, so I’m not sure what the core of the question is really about, but maybe this helps: [JSON-LD in `head` or `body`?](https://stackoverflow.com/q/28687653/1591669) ··· [support of JSON-LD added client-side?](https://stackoverflow.com/q/29064209/1591669) – unor Jul 15 '18 at 11:03
  • 1
    I'm essentially asking if dynamically inserting JSON-LD into the DOM after page load is valid and whether or search engines can retrieve and use this information. Essentially the same as ajax request -> create json-ld script -> add to document body – Eladian Jul 15 '18 at 12:34
  • Thanks for the links I will check them out! – Eladian Jul 15 '18 at 12:35
  • @Eladian injection is valid BUT the indexers will not see it. therefore, it's counterproductive. – Jay Gray Jul 15 '18 at 16:32
  • @Eladian - I have the same question and wondering if you had any conclusion on your question? – PBandJ Oct 12 '18 at 16:57

1 Answers1

0

Since this hasnt been answered yet, I believe JSONLD can be inserted anywhere in the DOM and it will still be indexed. Looks like its answered in this stackoverflow question

Bailey
  • 33
  • 7