useSeoMeta
O composable useSeoMeta permite que você defina as meta tags de SEO do seu site como um objeto plano com suporte completo a TypeScript.
Isso ajuda a evitar erros comuns, como usar name em vez de property, bem como erros de digitação - com mais de 100 meta tags totalmente tipadas.
Esta é a maneira recomendada de adicionar meta tags ao seu site, pois é segura contra XSS e possui suporte completo a TypeScript.
Uso
useSeoMeta({
title: 'Meu Site Incrível',
ogTitle: 'Meu Site Incrível',
description: 'Este é meu site incrível, deixe-me contar tudo sobre ele.',
ogDescription: 'Este é meu site incrível, deixe-me contar tudo sobre ele.',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})Ao inserir tags que são reativas, você deve usar a sintaxe de getter computado (() => valor):
const title = ref('Meu título')
useSeoMeta({
title,
description: () => `Esta é uma descrição para a página ${title.value}`
})Parâmetros
Existem mais de 100 parâmetros. Veja a lista completa de parâmetros no código fonte.
Veja também getting-started > seo-metaDesempenho
Na maioria dos casos, as meta tags de SEO não precisam ser reativas, pois os robôs dos motores de busca geralmente escaneiam o carregamento inicial da página.
Para um melhor desempenho, você pode envolver suas chamadas useSeoMeta em uma condição apenas no servidor quando as meta tags não precisarem ser reativas:
if (import.meta.server) {
// Essas meta tags serão adicionadas apenas durante a renderização no lado do servidor
useSeoMeta({
robots: 'index, follow',
description: 'Descrição estática que não precisa de reatividade',
ogImage: 'https://example.com/image.png',
// outras meta tags estáticas...
})
}
const dynamicTitle = ref('Meu título')
// Use meta tags reativas fora da condição apenas quando necessário
useSeoMeta({
title: () => dynamicTitle.value,
ogTitle: () => dynamicTitle.value,
})Anteriormente, era usado o composable useServerSeoMeta, mas ele foi descontinuado em favor desta abordagem.
※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/api/composables/use-seo-meta