nuxt-seo-meta

nuxt-seo-meta

Support Nuxt generate SEO metadata easy

Install

yarn add nuxt-seo-meta

//or npm
npm add nuxt-seo-meta

Add a config to nuxt.config.js file.

{
  ... your options
  modules: [
    'nuxt-seo-meta',
  ],
  seoMeta: {
    title: 'SEO Meta Demo',
    description: 'SEO Description'
  }
}

use $seoMeta method in nuxtjs context, general we can use at aysncData hooks

async asyncData({ $seoMeta }) {
  $seoMeta({
    title: "PageTitle",
    description: "PageDescription",
    url: "PageUrl",
    image: 'SocialShareImage.png'
  })
}

use in head options in page component

head({$seoMeta}){
  return {
    meta: $seoMeta({title: 'title'...}, false)
  }
}

if you call $seoMeta in page head method you need assign the return value to meta options and pass the second args to false

the $seoMeta method support only return generate metadata if you pass false to the second argument.

the false options will not inject the metadata to html head tag, only will return the generate data to you

That all. you can inspect you page in Chrome developer tools

Here show the demo screenshot.

Options

Below options all effect html head meta tag