Use the https://github.com/nickfrosty/nuxt-seo
SEO / HTML Meta Tags Module for Nuxt.js
- Easy to use
- Canonical tag automatically generated
- Implementation of Open Graph Protocol (ogp)
- Compatible with npm package: debug
Module available through the npm registry. It can be installed using the npm
or yarn
command line tool.
# Yarn (Recomend)
yarn add nuxt-seo
# NPM
npm install nuxt-seo --save
- Add
nuxt-seo
tomodules
section of yournuxt.config.js
{
modules: [
'nuxt-seo'
],
seo: {
// Module options
baseUrl: 'https://myWebSite',
name: '<name of site>',
title: '<title default>',
templateTitle: '%name% - %title%',
description: '<description default>',
canonical: 'auto',
isForcedTrailingSlash: false
//...
}
}
- Default:
utf-8
- Type: String
- Default: ``
- Type: String
- Default:
false
- Type: String
- Default:
TITLE
- Type: String
- Default:
false
- Type: String
- Default:
[]
- Type: Array[...keywords] || String
- Default:
en
- Type: String
- Default:
English
- Type: String
The auto
this will automatically generate according to the route, or put the route manually
- Default:
auto
- Type: String
Canonical force URL end with trailing slash
- Default:
true
- Type: Boolean
- Default:
false
- Type: URL String
- Default:
false
- Type: Array[name, email || site] || String
- Types: ogp.me/#types
- Default:
false
- Type: URL String
charset
, lang
, language
, copyright
, name
, subtitle
, author
, replyTo
, description
, keywords
, url
, noindex.ids.0
, noindex.ids.1
, noindex.ids
, noindex.value.0
, noindex.value.1
, noindex.value
, noindex
, robots.ids.0
, robots.ids.1
, robots.ids
, robots
, openGraph.name
, openGraph.title
, openGraph.description
, openGraph.locale
, openGraph.url
, openGraph.type
, openGraph.profile.firstName
, openGraph.profile.lastName
, openGraph.profile.username
, openGraph.profile.gender
, openGraph.profile
, openGraph.article.publishedTime
, openGraph.article.modifiedTime
, openGraph.article.expirationTime
, openGraph.article.author.multi
, openGraph.article.author
, openGraph.article.section
, openGraph.article.tag.multi
, openGraph.article.tag
, openGraph.article.authors.multi
, openGraph.article.authors
, openGraph.article.tags.multi
, openGraph.article.tags
, openGraph.article
, openGraph.image.multi
, openGraph.image.url
, openGraph.image.width
, openGraph.image.height
, openGraph.image.alt
, openGraph.image
, openGraph.book.author.multi
, openGraph.book.author
, openGraph.book.isbn
, openGraph.book.releaseDate
, openGraph.book.tag.multi
, openGraph.book.tag
, openGraph.book.authors.multi
, openGraph.book.authors
, openGraph.book.tags.multi
, openGraph.book.tags
, openGraph.book
, openGraph.price.currency
, openGraph.price.amount
, openGraph.price
, openGraph.images.multi
, openGraph.images.url
, openGraph.images.width
, openGraph.images.height
, openGraph.images.alt
, openGraph.images
, openGraph
, facebook.appId
, facebook.pageId
, facebook
, twitter.title
, twitter.description
, twitter.card
, twitter.type
, twitter.site
, twitter.creator
, twitter
, article.publishedTime
, article.modifiedTime
, article.expirationTime
, article.author.multi
, article.author
, article.section
, article.tag.multi
, article.tag
, article.authors.multi
, article.authors
, article.tags.multi
, article.tags
, article
, book.author.multi
, book.author
, book.isbn
, book.releaseDate
, book.tag.multi
, book.tag
, book.authors.multi
, book.authors
,
book.tags.multi
, book.tags
, book
, image.multi
, image.url
, image.width
, image.height
, image.alt
, image
, images.multi
, images.url
, images.width
, images.height
, images.alt
, images
, og.name
, og.title
, og.description
, og.locale
, og.url
, og.type
, og.profile.firstName
, og.profile.lastName
, og.profile.username
, og.profile.gender
, og.profile
, og.article.publishedTime
, og.article.modifiedTime
, og.article.expirationTime
, og.article.author.multi
, og.article.author
, og.article.section
, og.article.tag.multi
, og.article.tag
, og.article.authors.multi
, og.article.authors
, og.article.tags.multi
, og.article.tags
, og.article
, og.image.multi
, og.image.url
, og.image.width
, og.image.height
, og.image.alt
, og.image
, og.book.author.multi
, og.book.author
, og.book.isbn
, og.book.releaseDate
, og.book.tag.multi
, og.book.tag
, og.book.authors.multi
, og.book.authors
, og.book.tags.multi
, og.book.tags
, og.book
, og.price.currency
, og.price.amount
, og.price
, og.images.multi
, og.images.url
, og.images.width
, og.images.height
, og.images.alt
, og.images
, og
, fb.appId
, fb.pageId
, fb
head: function({ $seo }) { $seo(options) }
head: function() { this.$seo(options) }
<template>
<h1>Hello World</h1>
</template>
<script>
export default {
head: function() {
return this.$seo({
name: 'Name app',
title: 'Home Page',
templateTitle: '%name% - %title%',
description: 'Hello World Page'
})
}
}
</script>
NOTE: Do not use in Server-Side Rendering (SSR) mode. In SSR you should use the Nuxt Head Context.
asyncData: function({ seo }) { seo(options) }
asyncData: function({ $seo }) { $seo(options) }
asyncData: function() { this.seo(options) }
asyncData: function() { this.$seo(options) }
<template>
<h1>Hello World</h1>
</template>
<script>
export default {
asyncData: function(ctx) {
ctx.seo({
name: 'Name app',
title: 'Home Page',
templateTitle: '%name% - %title%',
description: 'Hello World Page'
})
}
}
</script>
To run the test suite, first install the dependencies, then run test
:
# Using Yarn
yarn test
ava: Node.js test runner that lets you develop with confidence.
Author: sindresorhus, novemberborn, vdemedesLicense: MIT
Version: ^3.13.0
got: Human-friendly and powerful HTTP request library for Node.js
Author: sindresorhus, szmarczakLicense: MIT
Version: ^11.8.0
nuxt: A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)
Author: atinux, pi0, clarkdoLicense: MIT
Version: ^2.14.7
vue: Reactive, component-oriented view layer for modern web interfaces.
Author: Evan YouLicense: MIT
Version: ^2.6.12
xo: JavaScript/TypeScript linter with great defaults
Author: Sindre SorhusLicense: MIT
Version: ^0.34.2
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue. List of all contributors.