Git Product home page Git Product logo

nuxt-seo's Introduction

Nuxt SEO

⚠️⚠️ Discontinued project ⚠️⚠️

Use the https://github.com/nickfrosty/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

nuxt-seo's People

Contributors

abernh avatar dependabot[bot] avatar diegchav avatar renovate-bot avatar sebubu avatar tiagodanin avatar ziaenezhad avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

nuxt-seo's Issues

Breaks font

As long as i define

head () { this.$seo({ canonical: /my/custom/url }) },

in my vue template, my custom google font dissappears... Having just a regular classic nuxt app

Cannot read property '$meta' of undefined

I am getting this error Cannot read property '$meta' of undefined. I am using nuxtjs 2.8.*

if (Vue.prototype.$meta) { if (Vue.prototype.$nuxt && Vue.prototype.$nuxt.$options && Vue.prototype.$nuxt.$options.head) { Vue.prototype.$nuxt.$options.head = ctx.app.head; } }

The End

I will be discontinuing this library.

Reason:

  • Breaking change version constant in Nuxt
  • Migrated my project to Next.js
  • Next.js has better seo control
  • No time to maintain this project

Cannot read property '$options' of undefined

Hello. I'm getting this error when i've created a fresh nuxt js project with latest version of library
Cannot read property '$options' of undefined.

async asyncData({ $axios,seo }) {
try {
const home = await $axios.$get('/home');
seo({
name: 'Atlas',
title: 'Home Page',
templateTitle: '%name% - %title%',
description: 'Hello World Page'
})
return {
home: home.responseData,
};
} catch (e) {
console.log(e)
}
},

when i was using '^1.3.1' version above code was working fine, now in newest version if i use above code, only seo details will be set, and i won't get my axios data to return home but i also get above cannot read property '$options' of undefined in console.
if i use head context i'll only get cannot read property '$options' of undefined which app nuxt app gonna crush. this happen for other ways you mentioned in your examples.

api is also working fine, i tested above code with earlier version and it's worked. how to fix this?

Make canonical URL trailing slash optional

Is your feature request related to a problem? Please describe.
Version 1.4.x introduces canonical URL, but it forces trailing slash at the back of the URL making the upgrade a breaking change. This should not be enforced.

Describe the solution you'd like
Make trailing slash enforcement optional.

Additional context

  • Nuxt-SEO version 1.4.x.

P.S. Thank you @TiagoDanin for maintaining this module, it has saved us a lot of time making meta tags work in Nuxt! :)

Duplicated canonical URL tags are produced

Describe the bug

Two canonical tags are produced

To Reproduce

  1. Setup Nuxt and Nuxt page. Our guess is this is related to Nuxt full static mode

nuxt.config.js

export default {
  mode: "universal",
  target: "static"

pages/foo.vue

export default {
  head() {
    return this.$seo({
      title: "London",
    });
  }
}
  1. Go to foo page

Expected behavior
No duplicated canonical URL tag should be produced in the DOM.

<html>
  <head>
    <link data-n-head="ssr" rel="canonical" href="https://upmo.com/foo">
...

Actual behavior
Duplicated canonical URL tags are produced in the DOM.

<html>
  <head>
    <link data-n-head="ssr" rel="canonical" href="https://upmo.com/">
    <link data-n-head="ssr" rel="canonical" href="https://upmo.com/foo">
...

Additional context

When we change the following code inside module.js

this.options.head.link = createCanonical(options, '/').concat(this.options.head.link || [])

To become:

this.options.head.link = this.options.head.link || []

It seems to have fixed the issue, but we're not sure what implication it will make.

P.S. Paired with @hsks

title Tag Question

Hi

is the <title> no relevant anymore due the use of meta title in terms of seo? Currently I have the problem that google can't differ between my sites in a static output since the title is always the same.

  <head>
<meta data-n-head="1" data-hid="title" key="title" property="title" name="title" content="<title default>">
  </head>

When I run nuxt generate I get the following output:

<!doctype html>
<html>
  <head>
    <meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" lang="en"><meta data-n-head="1" language="English"><meta data-n-head="1" data-hid="name" key="name" property="name" name="name" content="<name of site>"><meta data-n-head="1" data-hid="title" key="title" property="title" name="title" content="<title default>"><meta data-n-head="1" data-hid="description" key="description" property="description" name="description" content="<description default>"><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/_nuxt/05bb0d28f8b7db5c6d56.js" as="script"><link rel="preload" href="/_nuxt/b513b4ca97eeecc473c4.js" as="script"><link rel="preload" href="/_nuxt/d1a88ad09f6573911290.js" as="script">
  </head>
  <body>
    <div id="__nuxt"><style>#nuxt-loading{visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #fff;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div>
  <script type="text/javascript" src="/_nuxt/05bb0d28f8b7db5c6d56.js"></script><script type="text/javascript" src="/_nuxt/b513b4ca97eeecc473c4.js"></script><script type="text/javascript" src="/_nuxt/d1a88ad09f6573911290.js"></script></body>
</html>

Duplicate lang, language, charset meta tags when `target:static`

When using with target:static multiple meta tags are duplicated in my generated html files.
E.g. lang, charset, language, viewport, ... all meta tags, that modules.js are handled during generate() as "without content"

Investigating the issue I found, that this is a "problem" with vue-meta.
when vue-meta is refreshing the metas it removes duplicates only based on the given hid
If there is no hid set, then it is possible, that a single meta value is added multiple times.

Proposed fix

Adding hid based on meta.id when generating the metas so that vue-metas filtering works as expected.

//modules.js:241
  const generate = (metas, optionsGenerate, id = '', index = false) => {
      ...

      if (meta.value && meta.multi && Array.isArray(meta.value)) {
        ...
      } else if (typeof meta.value === 'object' && !Array.isArray(meta.value)) {
        ...
      } else if (meta.content) {
        ...
      } else if (meta.id) {
        if (meta.ids) {
          meta.ids.map(id => {
            ...

            outputMeta.push({
              hid: id, // -------------------> add hid
              [id]: meta.value
            })
          })
        } else {
          ...     

          outputMeta.push({
            hid: meta.id, //  -------------------> add hid
            [meta.id]: meta.value
          })
        }
      }
    })
  }

I'll prepare a PR

<title> not set

Problem

Due to a programming error in the code, the <title> tag is not changed.

Solution

I created a Pull Request with the fix #69.

Best regards
Severin

No favicon

Hi. With this module Nuxt doesn't recognize favicon that I'm set in "" in nuxt.config.js. And there is no module options to set favicon. Any suggestions?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.