Building a SEO Friendly Blog: Adding Schemas and Open Graph Protocol in Nuxt

In this series' previous installment, I covered how to use markdown and front matter to create content-rich articles. In the final part of this series, I will show you how to help search engines understand your content by using schemas and Open Graph protocol.

As there is an infinite amount of types of content and many types of content may look similar, it can be challenging for search engines to understand what information your website is trying to convey. One way to help with this is to document the schema of your page's content. Schema.org demonstrates how to define structured data on your website, whether it be an article, recipe or another type of content. Standard schema formats include RDFa, Microdata, and JSON-LD.

We'll focus on JSON-LD as I find it's one of the quickest and easiest to understand ways to define a schema. If you remember from the last installment, we defined quite a bit of metadata in our article's front matter.

---
slug: dogs
title: 'Dogs are the Best Animal - Fight Me'
date: '2020-09-25'
tags: dogs,doggo,pupper,floofer,woofters
description: "Whether you call them dogs, doggos, puppers, floofers, or woofters, they are the best animal. I am willing to fight you over this if you say I'm wrong."
---

# Dogs are the Best Animal - Fight Me

Whether you call them dogs, doggos, puppers, floofers, or woofters, they are the best animal. I am willing to fight you over this if you say I'm wrong.

All doggos are a heckin' good fren. Anyone who disagrees is a monster.

We can use this metadata to populate our JSON-LD for an article. To start, we'll first need to install a plugin for Nuxt, nuxt-jsonld. Inside of your project's directory, run the command npm i nuxt-jsonld. We need to add a jsonld function to our _slug.vue page to use this plugin.

jsonld () {
  return {
    '@context': 'http://schema.org',
    '@type': 'Article',
    author: 'Jessie Barnett',
    headline: this.markdown.attributes.title,
    tags: this.markdown.attributes.tags,
    wordcount: this.markdown.html.split(' ').length,
    datePublished: this.markdown.attributes.date,
    description: this.markdown.attributes.description,
    proficiencyLevel: this.markdown.attributes.proficiencyLevel,
    dependencies: this.markdown.attributes.dependencies
  }
}

Since we defined the markdown object in asyncData, it is available in the template and other functions with the this scope. This means we can use our front matter metadata to describe our article with JSON-LD.

When you run the generate command, it will add a script of type application/ld+json to the HTML document's head tag with your JSON-LD that you created in the function.

Now that we've set up JSON-LD, let's move on to the Open Graph protocol. Open Graph protocol is primarily used by social media networks. Using Open Graph protocol can allow links to your article to be more easily found on social media and help those sites create more descriptive previews of your article by specifying a description, image, and more.

To add Open Graph protocol metatags to your article's page, we can use the head function provided by Nuxt to specify the page-specific configuration.

 head () {
  return {
    title: `${this.markdown.attributes.title}`,
    meta: [
      { hid: 'description', name: 'description', content: this.markdown.attributes.description },
      { property: 'og:title', content: `${this.markdown.attributes.title}` },
      { property: 'og:url', content: `https://your-domain.com${this.$route.fullPath}` },
      { property: 'og:description', content: this.markdown.attributes.description },
      { property: 'og:type', content: 'article' },
      { property: 'article:author', content: 'https://your-domain.com' },
      { property: 'article:publisher', content: 'https://your-domain.com' },
      { property: 'article:published_time', content: this.markdown.attributes.date },
      { property: 'article:tag', content: this.markdown.attributes.tags }
    ]
  }
}

Now that we've added JSON-LD and Open Graph protocol to our static site, our articles will be easy to index by search engines and find on social media sites. Now that you know how to make an SEO friendly blog, all that's left is to use your design skills to make a great looking site!

You can see the final version of the tutorial code on GitHub.

Originally published on jessie.codes