Como adicionar meta tags no Nuxt.js

O Nuxt.js é uma estrutura poderosa para criar aplicativos Vue.js renderizados no lado do servidor. Além de fornecer uma base sólida para a criação de aplicativos complexos, o Nuxt.js também facilita a adição de metatags às suas páginas.

Descubra como incluir metatags em seu aplicativo Nuxt para melhorar o SEO do seu site e a visibilidade nas redes sociais.

Meta tags são trechos de código que fornecem informações sobre uma página da web. Essas tags estão presentes no código-fonte HTML, assim como o conteúdo da sua página, mas não são visíveis na própria página.

Meta tags podem fornecer informações como o título da página, descrição e palavras-chave. Eles também são usados ​​para fornecer informações para compartilhamento de mídia social e otimização de mecanismo de pesquisa.

Antes de começar a adicionar metatags, crie um novo aplicativo Nuxt.js. Para isso, certifique-se de ter

Node.js instalado no seu dispositivo. Em seguida, abra seu terminal e execute o seguinte comando:

npx create-nuxt-app meu-aplicativo

Isso criará um novo aplicativo Nuxt.js em um diretório chamado meu-aplicativo. Siga as instruções para configurar seu aplicativo conforme necessário.

Uma maneira de adicionar meta tags ao seu aplicativo Nuxt.js é adicioná-las globalmente. Para fazer isso, adicione uma tag de título e duas meta tags: uma para o conjunto de caracteres e outra para a viewport. Abra o seu nuxt.config.js arquivo e adicione uma propriedade head ao módulo.exportações objeto:

módulo.exportações = {
 cabeça: {
 título: 'Meu aplicativo',
 meta: [
 { conjunto de caracteres: 'utf-8' },
 { nome: 'janela de exibição', contente: 'largura=largura do dispositivo, escala inicial=1' }
 ]
 }
}

Adicionando Meta Tags em Páginas Únicas

Às vezes, você pode querer adicionar metatags apenas a páginas específicas em seu aplicativo. Para fazer isso, você pode adicionar uma propriedade head à definição do componente da página: