Awesome Open Source
Awesome Open Source

Nuxt SEO

Travis Downloads Node Version XO code style

SEO / HTML Meta Tags Module for Nuxt.js

Features

  • Easy to use
  • Canonical tag automatically generated
  • Implementation of Open Graph Protocol (ogp)
  • Compatible with npm package: debug

Installation

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

Documentation

Setup

  • Add nuxt-seo to modules section of your nuxt.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
		//...
	}
}

Module options

charset

  • Default: utf-8
  • Type: String

baseUrl

  • Default: ``
  • Type: String

name

  • Default: false
  • Type: String

title

  • Default: TITLE
  • Type: String

description

  • Default: false
  • Type: String

keywords

  • Default: []
  • Type: Array[...keywords] || String

lang

  • Default: en
  • Type: String

language

  • Default: English
  • Type: String

canonical

The auto this will automatically generate according to the route, or put the route manually

  • Default: auto
  • Type: String

isForcedTrailingSlash

Canonical force URL end with trailing slash

  • Default: true
  • Type: Boolean

image

  • Default: false
  • Type: URL String

author

  • Default: false
  • Type: Array[name, email || site] || String

openGraph[type]

url

  • Default: false
  • Type: URL String

{...all}

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

Nuxt Head Context

  • 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>

Nuxt AsyncData Context

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>

Tests

To run the test suite, first install the dependencies, then run test:

# Using Yarn
yarn test

Dependency

debug: small debugging utility Author: TJ Holowaychuk License: MIT Version: ^4.2.0

Dev Dependencies

ava: Node.js test runner that lets you develop with confidence. Author: sindresorhus, novemberborn, vdemedes License: MIT Version: ^3.13.0
got: Human-friendly and powerful HTTP request library for Node.js Author: sindresorhus, szmarczak License: MIT Version: ^11.8.0
nuxt: A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js) Author: atinux, pi0, clarkdo License: MIT Version: ^2.14.7
vue: Reactive, component-oriented view layer for modern web interfaces. Author: Evan You License: MIT Version: ^2.6.12
xo: JavaScript/TypeScript linter with great defaults Author: Sindre Sorhus License: MIT Version: ^0.34.2

Contributors

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue. List of all contributors.

License

MIT © Tiago Danin


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,997
vue (4,391
hacktoberfest (4,278
vuejs (1,139
nuxt (233
seo (137
nuxtjs (135
social-media (81
nuxt-module (76
meta (37