SEO e Metadados
Melhore o SEO do seu aplicativo Nuxt aproveitando configurações de cabeçalho poderosas, composables e componentes.
A gestão de tags de cabeçalho no Nuxt é realizada pelo Unhead. Ele fornece configurações adequadas por padrão e oferece alguns composables poderosos, além de várias opções de configuração para gerenciar o cabeçalho e as metatags de SEO do aplicativo.
Configuração do Nuxt
Você pode personalizar estaticamente o cabeçalho de todo o aplicativo configurando a propriedade app.head no nuxt.config.ts.
Este método não permite fornecer dados reativos. Recomendamos o uso de useHead() dentro do app.vue.
É uma boa prática definir aqui tags que não mudam, como o título padrão do site, idioma e favicon.
export default defineNuxtConfig({
app: {
head: {
title: 'Nuxt', // título padrão de fallback
htmlAttrs: {
lang: 'en',
},
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
]
}
}
})
Você também pode fornecer opcionalmente as chaves listadas abaixo em Tipos.
Tags Padrão
O Nuxt fornece as seguintes tags por padrão, garantindo que seu site funcione sem problemas desde o início.
viewport:width=device-width, initial-scale=1charset:utf-8
Geralmente, não é necessário sobrescrever esses padrões, mas é possível atualizá-los usando atalhos com chave.
export default defineNuxtConfig({
app: {
head: {
// atualize os padrões do Nuxt
charset: 'utf-16',
viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
}
}
})
useHead
A função composable useHead suporta entradas reativas e permite gerenciar programaticamente as tags de cabeçalho.
useHead({
title: 'My App',
meta: [
{ name: 'description', content: 'My amazing site.' }
],
bodyAttrs: {
class: 'test'
},
script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})Recomendamos verificar os composables useHead e useHeadSafe.
useSeoMeta
O composable useSeoMeta permite definir as metatags de SEO do site como um objeto com segurança total de tipos.
Isso ajuda a evitar erros de digitação e erros comuns, como usar name em vez de property.
useSeoMeta({
title: 'My Amazing Site',
ogTitle: 'My Amazing Site',
description: 'This is my amazing site, let me tell you all about it.',
ogDescription: 'This is my amazing site, let me tell you all about it.',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})Componentes
Embora o uso de useHead seja recomendado em todos os casos, pode haver situações em que seja preferível definir tags de cabeçalho usando componentes dentro de um template.
Para esse propósito, o Nuxt fornece os seguintes componentes: <Title>, <Base>, <NoScript>, <Style>, <Meta>, <Link>, <Body>, <Html> e <Head>. Preste atenção à capitalização desses componentes, garantindo que não sejam usadas tags HTML nativas inválidas.
<Head> e <Body> podem aceitar metatags aninhadas (por estética), mas isso não afeta onde as metatags aninhadas são renderizadas no HTML final.
<script setup lang="ts">
const title = ref('Hello World')
</script>
<template>
<div>
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="title" />
<Style>
body { background-color: green; }
</Style>
</Head>
<h1>{{ title }}</h1>
</div>
</template>
Sugerimos envolver seus componentes com o componente <Head> ou <Html>. As tags serão removidas de forma intuitiva.
Tipos
Abaixo estão listados os tipos não reativos para useHead, app.head e componentes.
interface MetaObject {
title?: string
titleTemplate?: string | ((title?: string) => string)
templateParams?: Record<string, string | Record<string, string>>
base?: Base
link?: Link[]
meta?: Meta[]
style?: Style[]
script?: Script[]
noscript?: Noscript[];
htmlAttrs?: HtmlAttributes;
bodyAttrs?: BodyAttributes;
}
Para tipos detalhados, consulte @unhead/vue.
Funcionalidades
Reatividade
A reatividade é suportada em todas as propriedades, permitindo isso ao fornecer valores computados, getters ou objetos reativos.
const description = ref('My amazing site.')
useHead({
meta: [
{ name: 'description', content: description }
],
})Template de Título
Você pode fornecer um template dinâmico para personalizar o título do site usando a opção titleTemplate. Por exemplo, você pode adicionar o nome do site ao título de todas as páginas.
titleTemplate pode ser uma string onde %s é substituído pelo título ou uma função.
Se desejar usar uma função (para controle total), não pode configurá-la no nuxt.config. Em vez disso, é recomendado configurá-la dentro do arquivo app.vue para uso em todas as páginas.
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
}
})Agora, se você definir o título como My Page em uma página diferente do site usando useHead, o título na aba do navegador será exibido como 'My Page - Site Title'. Também é possível passar null para definir o padrão como 'Site Title'.
Parâmetros de Template
Além do padrão %s, você pode usar templateParams para fornecer placeholders adicionais ao titleTemplate, permitindo uma geração de título mais dinâmica.
useHead({
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} %separator %siteName` : '%siteName';
},
templateParams: {
siteName: 'Site Title',
separator: '-'
}
})Tags de Corpo
Você pode adicionar tags ao final da tag <body> usando a opção tagPosition: 'bodyClose' em tags aplicáveis.
Por exemplo:
useHead({
script: [
{
src: 'https://third-party-script.com',
// opções válidas são: 'head' | 'bodyClose' | 'bodyOpen'
tagPosition: 'bodyClose'
}
]
})Exemplos
Usando definePageMeta
Dentro do diretório pages/, você pode usar definePageMeta junto com useHead para definir metadados com base na rota atual.
Por exemplo, você pode primeiro definir o título da página atual (isso é extraído por macro em tempo de build, então não pode ser definido dinamicamente):
definePageMeta({
title: 'Some Page'
})Então, no arquivo de layout, você pode usar os metadados da rota definidos anteriormente:
const route = useRoute()
useHead({
meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
})Título Dinâmico
Nos exemplos a seguir, o titleTemplate é configurado como uma string contendo o placeholder %s ou como uma function. Isso permite definir dinamicamente o título da página para cada rota no aplicativo Nuxt:
useHead({
// como uma string,
// onde `%s` é substituído pelo título
titleTemplate: '%s - Site Title',
})useHead({
// ou como uma função
titleTemplate: (productCategory) => {
return productCategory
? `${productCategory} - Site Title`
: 'Site Title'
}
})O nuxt.config também é usado para definir o título da página. No entanto, o nuxt.config não permite definir dinamicamente o título da página. Portanto, é recomendado usar titleTemplate dentro do arquivo app.vue para adicionar títulos dinâmicos e aplicá-los a todas as rotas do aplicativo Nuxt.
CSS Externo
Nos exemplos a seguir, mostramos como habilitar o Google Fonts usando a propriedade link do composable useHead ou o componente <Link>.
useHead({
link: [
{
rel: 'preconnect',
href: 'https://fonts.googleapis.com'
},
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
crossorigin: ''
}
]
})※Esta página é uma tradução não oficial da documentação oficial do Nuxt.js.
A página correspondente na documentação oficial está aqui:
https://nuxt.com/docs/3.x/getting-started/seo-meta