Building a SEO Friendly Blog: Adding Schemas and Open Graph Protocol in Nuxt
Tags: seo, nuxt, ogp, javascript
Published: 2020-10-08 18:21:30

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](https://schema.org/) demonstrates how to define structured data on your website, whether it be an [article](https://schema.org/Article), [recipe](https://schema.org/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.

```markdown
---
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](https://github.com/ymmooot/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.

```javascript
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](https://ogp.me/) 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.

```javascript
 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](https://github.com/jessie-codes/nuxt-seo-example).

_Originally published on [jessie.codes](https://jessie.codes/article/seo-blog-ogp-jsonld)_