How to Add Open Graph Meta Tags to Your Blog Post in NuxtJS

Table of Contents

Introduction

Alright, so you’ve finished your website using SPA technology and you are ready to tell the world! So you head to your social media account and as you are about to share the website, you noticed that Facebook ain’t picking up the page meta data. There is no thumbnail, no title, just plain boring box with the link to your website.

Yup I was in that situation, and let’s face it, until now, SPA is still not SEO-friendly. Luckily with the introduction server-side rendering, this has been solved.

Background

To tell Facebook about the details of your website, you must include Open Graph Meta tags. This is where Facebook gets the information it needs to display your website’s thumbnail in the Facebook Feed. To read more about Open Graph, read Facebook’s docs. Webmasters - Sharing - Documentation - Facebook for Developers

In a normal SPA website, this would be hard. Even if you defined these meta tags, there’s no guarantee that Facebook can fetch the data. It is because, Facebook’s scrapping tool is not yet designed to wait for dynamic changes from javascript frameworks.

To solve this problem, we can leverage the power of server-side rendering. Using nuxtjs, this is just a breeze.

What We Need

Well, to start with open graph, we need to at least have the following tag:

  • og:title
  • og:description
  • og:url
  • og:image
  • og:type

Install NuxtJS

Assuming that you already setup your local dev environment, install nuxt by running the code below. You can skip this if you already have an active nuxt website.

npx create-nuxt-app sample_blog

Just go along the process and select the appropriate settings for your website.

Setup Configuration

Nuxt provide a way to configure your meta tags. Open your nuxt.config.js, and add the following default meta tags to the head section.

Remember to set your BASE_URL environment variable in production.

...
head: {
  title: "Drip Coder - Let's brew awesome apps together",
  meta: [
    { charset: ‘utf-8’ },
    { name: ‘viewport’, content: ‘width=device-width, initial-scale=1’ },
    {
      hid: ‘description’,
      name: ‘description’,
      content: 'Awesome description for my awesome blog'
    },
    {
      hid: ‘og:type’,
      property: ‘og:type’,
      content: ‘website’
    },
    {
      hid: ‘og:url’,
      property: ‘og:url’,
      content: process.env.BASE_URL
    }
  ],
...

As you can notice, there is an additional field hid. The purpose of this field is to prevent any duplication of meta tags. NuxtJS use this field to identify meta content.

Add Meta Tags to Dynamic Pages

Let’s say you have a page for dynamic posts. Create a file under pages/posts/_id.vue .

Under the script block, you can use the function asyncData to prefetch any data you need before rendering the page. That means we can already set the post title, url and other meta tags before page render.

<script>
export default {
  name: 'Slug',
  async asyncData({$axios, params }) {
    const post = ($axios.get(`/api/posts/${params.id}`)).data
    return {
      post
    }
  },
}
</script>

Next let’s create a computed property that will return the title, description and url of the page.

computed: {
  title() {
    if (this.post) return this.post.title
    return 'My Default Awesome Blog Post Title'
  },
  description() {
    if (this.post) return this.post.excerpt
    return 'Default post description/caption/excerpt'
  },
  url() {
    return process.env.BASE_URL + this.$route.fullPath
  }
}

Next, to set the meta tags, we need to implement the head() function provided by nuxtjs. Under the hood, nuxtjs use the package vue-meta to manipulate meta tags.

...
head() {
  return {
    title: this.title,
    meta: [
      {
        hid: 'description',
        content: this.description,
        name: 'description'
      },
      {
        hid: 'og:title',
        content: this.title,
        property: 'og:title'
      },
      {
        hid: 'og:description',
        content: this.description,
        property: 'og:description'
      },
      {
        hid: 'og:url',
        content: this.url,
        property: 'og:url'
      }
    ]
  }
},
...

Conclusion

There you have it! I love how Nuxt makes things that seems so complicated very simple. With a few modifications, our blog is now ready to be shared in different Social Media Platforms. Go ahead and try it, your blog will look more professional and 10x.

Please let me know if you are having a problem. I may also create a mini-series in setting up a website from scratch. Let me know if you are interested. 😃