SEO

References

• @nuxtjs/robots
• NuxtJS 2 Meta Tags and SEO

The most important steps in optimization:

NuxtJS gives you 3 different ways to add meta data to your application:

1. Globally using the nuxt.config.js
2. Locally using the head as an object
3. Locally using the head as a function so that you have access to data and computed properties.

1. Globally using the nuxt.config.js

head: {
    title: 'my website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'my website description'
      }
    ],
}

2. Locally using the head as an object

We can add the titles and meta tags for each page as follows.

<script>
export default {
  head: {
    title: 'Home page',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'Home page description'
      }
    ],
  }
}
</script>

3. Locally using the head as a function so that you have access to data and computed properties.

<template>
  <h1>{{ title }}</h1>
</template>
<script>
  export default {
    data() {
      return {
        title: 'Home page'
      }
    },
    head() {
      return {
        title: this.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Home page description'
          }
        ]
      }
    }
  }
</script>

We can set the facebook, twitter meta tags as below per page or globally in nuxt.config.js

head() {
    return {
        meta: [
            {
                hid: "og:image",
                name: "og:image",
                content: "https://www.affiliumlabs.io/images/logo.png"
            },
            {
                hid: "og:image:alt",
                name: "og:image:alt",
                content: "Affilium Labs"
            }
        ]
    }
}

Important:

1. For NuxtJS 2, we need to install "@nuxtjs/robots" package for crowling. The link mentioned above as reference.

• Add the @nuxtjs/robots in the modules section of nuxt.config.js file
• Then add robots package options as below.

export default {
  modules: [
    '@nuxtjs/robots'
  ],
  robots: {
    UserAgent: '*',
    Allow: '/',
    Sitemap: 'https://www.affilium.io/sitemap.xml',
    Disallow: '/user', // It means that it will disallow "/user"
  }
}

2. When we use i18n, it is required to turn off the automatic language detection as follows.

• In nuxt.config.js file, Please add SEO: false, and detectBrowserLanguage: false,
• The following example will looks like....

i18n: {
    SEO: false,
    detectBrowserLanguage: false,
    locales: [
      {
        code: "fr",
        iso: "fr-FR",
        name: "French",
        file: "fr.js",
      },
    ],
    lazy: true,
    langDir: "locales/",
    vueI18n: {
      fallbackLocale: "fr",
    },
    defaultLocale: "fr",
  },