Marcadores de Meta e SEO

O Nuxt dá para você 3 maneiras diferentes de adicionar meta dados a sua aplicação:

Usando o nuxt.config.js globalmente
Usando o head como um objeto localmente
Localmente usando o head como uma função assim você tem acesso ao dados ou propriedades computadas.

Configuração Global

O Nuxt permite você definir todos marcadores de metas padrão para a sua aplicação dentro do ficheiro nuxt.config.js com o uso da propriedade head. Isto é muito útil para a adição dos marcadores de título e descrição com o fim de SEO ou configuração da janela de visualização ou adição do favicon.

nuxt.config.js

export default {
  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'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  }
}

Isto lhe dará o mesmo title e description em todas as páginas

Configuração Local

Você pode também adicionar títulos e meta para cada página pela configuração da propriedade head dentro da sua marcação de script em cada página:

pages/index.vue

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

Use o head como um objeto para definir o title e a description somente para a página inicial (home)

pages/index.vue

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

Use o head como uma função para definir um title e uma description somente para a página inicial (home). Ao usar uma função você tem acesso aos dados e propriedades computadas.

O Nuxt usa vue-meta para atualizar o head e atributos meta do documento da sua aplicação.

Para evitar qualquer duplicação sempre que usado em componentes filhos, dê um identificador único com a chave hid para a descrição de meta. Desta maneira vue-meta saberá que ele tem de sobrescrever o marcador padrão.

Aprenda mais sobre as opções disponíveis para head, na documentação do vue-meta .

Recursos Externos

Você pode incluir recursos externos tais como scripts e fontes ao adicionar eles globalmente ao nuxt.config.js ou localmente dentro do objeto ou função head.

Você também pode passar para cada recurso um body: true opcional para incluir os recursos antes do fechamento da tag </body> .

Configuração Global

nuxt.config.js

export default {
  head: {
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
      }
    ]
  }
}

Configuração Local

pages/index.vue

<template>
  <h1>About page with jQuery and Roboto font</h1>
</template>

<script>
  export default {
    head() {
      return {
        script: [
          {
            src:
              'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
          }
        ],
        link: [
          {
            rel: 'stylesheet',
            href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
          }
        ]
      }
    }
  }
</script>

<style scoped>
  h1 {
    font-family: Roboto, sans-serif;
  }
</style>