Meta-marcadores e a Otimização dos Motores de Pesquisa

A Nuxt dá-nos 3 maneiras diferentes de adicionar meta-dados à nossa aplicação:

Globalmente, utilizando o ficheiro nuxt.config.js
Localmente, utilizando head como um objeto
Localmente, utilizando head como uma função para termos acesso aos dados e às propriedades computadas.

Definições Globais

A Nuxt permite-nos definir todos os meta-marcadores <meta> predefinidos para nossa aplicação dentro do ficheiro nuxt.config.js usando a propriedade head. Isto é muito útil para adicionar um marcador de título e descrição padrão para fins de otimização dos motores de pesquisa ou para definir a janela de visualização ou adicionar o ícone favorito:

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' }]
  }
}

Desta maneira, obteremos o mesmo título e descrição em todas as páginas.

Definições Locais

Também podemos adicionar títulos e meta-marcadores para cada página, definindo a propriedade head dentro do nosso marcador de programa 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>

Este exemplo utilizará head como um objeto para definir um título e uma descrição apenas para a página inicial.

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>

Este exemplo utilizará head como uma função para definir um título e uma descrição apenas para a página inicial. Ao utilizar uma função, temos acesso aos dados e propriedades computadas.

A Nuxt usa vue-meta para atualizar o head e os meta-atributos do documento da nossa aplicação.

Para evitar qualquer duplicação quando utilizada em componentes filhos, precisamos de atribuir um identificador único com a chave hid à meta-descrição. Desta maneira, a vue-meta saberá que tem que sobrescrever o marcador predefinido.

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

Recursos Externos

Podemos incluir recursos externos, como programas e fontes, adicionando-os globalmente ao nuxt.config.js ou localmente no objeto ou na função head.

Também podemos passar a cada recurso um body: true opcional para incluir o recurso antes do marcador de fechamento </body>.

Definições Globais

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'
      }
    ]
  }
}

Definições Locais

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>