Support Nuxt generate seo metadata easy.

yarn add nuxt-seo-meta

//or npm
npm add nuxt-seo-meta

You can global config seo metadata in nuxt.config.js

the global seoMeta options is default seo meta config. when $seoMeta called in nuxt page components

eg: if you don't want change page title only want to change description. you can use $seoMeta({description:'Page description''})

{
  // your configurations
  modules: [
    'nuxt-seo-meta',
  ], 
    
  // global set your site page title and descriptions
  seoMeta: {
    title: 'My site title',
    keywords: 'keyword1, keyword2, keyword3',
    description: 'My site description',
  }
}

Also you can set seo metadata in page file component like pages/index.vue, there has two ways to set seo metadata.

• at asyncData function

async asyncData({ $seoMeta }) {
  $seoMeta({
    title: "My awesome site",
    description: "awesome site description",
    url: "https://awesome.site",
    image: 'https://awesome.cdn/awesome.png'
  })
}

$seoMeta is a function that will automate generate seo metadata html tag for you page.

• at head function

head({$seoMeta}){
  const title = "My awesome site"
  return {
    title,
    meta: $seoMeta({
      title,
      description: "awesome site description",
      url: "https://awesome.site",
      image: 'https://awesome.cdn/awesome.png'
    }, false)
  }
},

it important to note that, if call $setMeta in head function, the second parameter must be false.

false told nuxt-seo-meta only return a metadata object not generate meta tags.

this is useful when you want to set meta tags in your page component and merge with more head data.

Demo screenshot $seoMeta function will return or generate meta tags for og, twitter