SEO in Nuxt.js with the Head Property

There are 3 ways to add a title and meta description to your Nuxt.js application which is extremely useful for Search Engine Optimisation.

1) Use the nuxt.config.js file to add global titles and meta descriptions so that they are available on all pages. This does of course give you the same title and description on every page but it covers you for when you forget to add meta to a particular page.

export default {
  head: {
    title: 'Seo in Nuxt.js',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'SEO in Nuxt.js with the Head Property for amazing Search Engine Optimisation'
      }
    ],
  },
}

2) Add the head method as an object to your script tag in your page. This is a great way of setting a unique title and description for each page.

<script>
export default {
  head: {
    title: 'Home page',
    meta: [
      { hid: 'description', name: 'description', content: 'Home page description' }
    ],
  }
}
</script>

3) Add the head method as a function to your script tag in your page. With this option you can not only add a unique title and description for your page but you also have access to your data and computed properties.

<template>
  <h1>{{ title }}</h1>
</template>
<script>
export default {
  data () {
    return {
      title: 'Amazing Seo with Nuxt.js',
      description: 'Nuxt.js gives you the most amazing SEO by just adding a title and meta description to your page.'
    }
  },
  head () {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: this.description }
      ]
    }
  }
}
</script>

Normally I set the nuxt.config.js with a global title and description and then in my pages I use the head as a function incase I end up using the the data for the title or meta description. This is extremely useful for when you are working with data from an api or dynamic pages where you don't know the title and meta description.

And as well as adding a title and description you can also add links to google fonts or external scripts either globally in the nuxt.config.js or locally in the page component if you prefer.

link: [      
       { 
         rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap' }
      ],
script: [
      {
        src: 'https://identity.netlify.com/v1/netlify-identity-widget.js',
        defer: true
      }
    ]

Nuxt.js uses vue-meta so checkout the docs for all available metaInfo properties

Comments

[Daniel Bächtold]

Hi Debbie,
Thanks for this article. I tried head() and then thought ih would be very helpful to be able to use the current title (or something else) in the app's title bar (in the main layout).
Is that possible or totally the wrong way?
Thanks!
Dan

[Debbie O'Brien]

Hey Dan, not sure I fully understand what you want to do. Feel free to send me an example or a screenshot.

[Daniel Bächtold]

OK thanks!
I have a PWA which always shows a title bar. This is some of the code in layout.php:

<v-app-bar>
  <v-toolbar-title>{{ title }}</v-toolbar-title>
  ...
</v-app-bar>

I'd like the {{ title }} to be whatever has been set with head().

[Alexander Lichter]

Hey Dan 👋🏻

AFAIK you can't retrieve the document's title from vue-meta directly :/

[yudhiezk]

Hi Debbie, I have a question.
When I try to implement meta tags, title for instance, it only works on the main index.vue file, but if i put it inside pages, like pages/trade/index.vue, if I view page source, the title tag doesn't exists. Can you enlighten me on this. I'm still new to nuxt

[Debbie O'Brien]

hey, it should work. if in nuxt config it will work on all pages. if in layout those that use that layout and if in page those that use that page. Maybe this video might help: youtu.be/H8wAjjsffo4