JSON-LD with a splash of gridsome

Greg, The JavaScript Whisperer - Aug 10 '20 - - Dev Community

JSON-LD and Gridsome

JSON-LD

Linked Data empowers people that publish and use information on the Web. It is a way to create a network of standards-based, machine-readable data across Web sites. It allows an application to start at one piece of Linked Data, and follow embedded links to other pieces of Linked Data that are hosted on different sites across the Web.

Here's googles introduction to the JSON-LD and Structured data. What's interesting to note here is how structured data effects search results.

rich data example

You can test a webpage for rich results here
Not all sites / content will qualify.

a JSON-LD should be wrapped in a script tag like so

<script type="application/ld+json">
...
</script>
Enter fullscreen mode Exit fullscreen mode

You can use this tool to shape your data easily online

That's all for JSON-LD below I'll quickly cover how to make use of it with Gridsome, should you be using that. It was a bit tricky to figure out how to write a dynamic then statically generated inline script.

metaInfo() {
const  script = [
{ 
  innerHTML:  this.generateScheme(), 
  type: "application/ld+json" }
]
Enter fullscreen mode Exit fullscreen mode
   const url = "https://gregbenner.life"
   generateScheme() {
          return JSON.stringify({
            "@context": "http://schema.org",
            "@type": "BlogPosting",
            mainEntityOfPage: {
              "@type": "WebPage",
              "@id": `${url}${this.$page.post.path}`
            },
            headline: this.$page.post.title,
            image: {
              "@type": "ImageObject",
              url: `${url}${this.$page.post.cover_image.src}`
            },
            datePublished: this.$page.post.date,
            dateModified: this.$page.post.date,
            description: this.$page.post.description,
            author: {
              "@type": "Person",
              name: "Greg Benner"
            },
            publisher: {
              "@type": "Organization",
              name: "Greg",
              logo: {
                "@type": "ImageObject",
                url:
                  "/assets/static/author.fdsdfsdfsdffds.jpg"
              }
            }
          });
        }
Enter fullscreen mode Exit fullscreen mode

You now have improved SEO and search results hurrah!

Hopefully this was helpful

Comments appreciated here https://twitter.com/cactusanddove/status/1274116607971930112

. . . . . . . . . . . . . . . . . . . . . . . . . . .