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

| options | type | description | | ------------------ | :-----: | ------------------------------------------------------: | | title | string | any thing you want to set to meta | | description | string | any thing you want to set to meta | | defaultDescription | string | default description to you each page | | url | string | current page url or other you want to share with others | | defaultUrl | string | default image when your page not present images | | image | string | current page share image url | | defaultImage | string | default current page share image url | | locale | string | current page locale, this option just present in og | | siteName | string | you web app name, this option just present in og | | twitterUser | string | you can share page to twitter with creator user | | ignoreTwitter | boolean | disable twitter seo metadata | | ignoreOG | boolean | disable OG seo metadata |