DEV Community

Debbie O'Brien
Debbie O'Brien

Posted on

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'
      }
    ],
  },
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
      }
    ]
Enter fullscreen mode Exit fullscreen mode

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

Discussion (6)

Collapse
danbaechtold profile image
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

Collapse
debs_obrien profile image
Debbie O'Brien Author

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

Collapse
danbaechtold profile image
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().

Thread Thread
mannil profile image
Alexander Lichter

Hey Dan 👋🏻

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

Collapse
yudhiezk profile image
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

Collapse
debs_obrien profile image
Debbie O'Brien Author

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