Nuxt 3 Release Candidate beta já está disponível! Descobre mais sobre isso v3.nuxtjs.org

Translated page Contents of this page might be outdated.

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.

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>
Edit this page on GitHub Updated at Sat, Sep 24, 2022