JSON-LD with a splash of gridsome

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.

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>

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" }
]

   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"
              }
            }
          });
        }

You now have improved SEO and search results hurrah!

Hopefully this was helpful

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