Usage

This nuxt-seo module allows you to set page specific SEO settings in three ways:

• global defaults
• the Nuxt head method
• or using asyncData

Global defaults

Your site's "global defaults" are set via the nuxt.config.js file. Those options will be written into every page's head data automatically.

For more information on the recommended global defaults, see Configuration

head method

The most common way to set page specific SEO settings is though the Nuxt head() method. Here, you will have access to $seo from the global context.

• head() { return this.$seo(options) }
• head({ $seo }) { return $seo(options) }

<template>
  <h1>Hello World</h1>
</template>

<script>
  export default {
    head({ $seo }) {
      return $seo({
        title: 'Home Page',
        description: 'Hello World Page',
        keywords: 'hello, world, home',
      })
    }
  }
</script>

While accessing $seo in the Nuxt head() function, you will have access to the context object ncluding all props, data, and computed values. Even any prefetched/prerendered data from asyncData.

asyncData method

You may also set page specific SEO settings via asyncData.

• asyncData({ seo }) { seo(options) }
• asyncData({ $seo }) { $seo(options) }
• asyncData() { this.seo(options) }
• asyncData() { this.$seo(options) }

<template>
    <h1>Hello World</h1>
</template>

<script>
    export default {
        asyncData({ $seo }) {
            $seo({
                title: 'Home Page',
                templateTitle: '%name% - %title%',
                description: 'Hello World Page'
            })
        }
    }
</script>