JSON-LD with a splash of gridsome

How to structure your data for rich results and better SEO.
Cover image

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>

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

16 people liked this postDanika PGregory CovfefePatrimonioDigitaleBleu 🧢Bartosz Podlewski 🍷Gift Egwuenu #BlackLivesMatterDevessierCarles MuiñoskbJamstaticEmmotanangularXavi Bonell 👨🏻‍💻⌁ 𝙠𝙧𝙚𝙤Eric ArringtonMohammad Mohammadi

2 people reposted this postkbGridsome