Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ao criar aplicações React, especialmente com Vite, a gestão de meta tags para SEO costuma ser um desafio. A maioria das soluções envolve bibliotecas, mas é possível fazer tudo de forma nativa, usando a API DOM.
Bibliotecas como React Helmet facilitam a manipulação de tags, mas adicionam dependências e aumentam o tamanho do bundle. Para projetos leves ou com requisitos específicos, manipular o DOM diretamente pode ser uma alternativa.
document.title e implementar uma função que substitua uma variável pelo nome da página.document.querySelector e document.createElement.function updateMetaTags({ title, description, ogTitle, robots, canonicalUrl }) {
// Título
document.title = title ? `${title} | Meu Site` : 'Meu Site'. // Meta description
setOrUpdateMeta('name', 'description', description). // Open Graph
setOrUpdateMeta('property', 'og:title', ogTitle || title). // Robots
setOrUpdateMeta('name', 'robots', robots). // Canonical
setOrUpdateLink('rel', 'canonical', canonicalUrl). }
function setOrUpdateMeta(attrName, attrValue, content) {
let meta = document.querySelector(`meta[${attrName}='${attrValue}']`). if (!meta) {
meta = document.createElement('meta'). meta.setAttribute(attrName, attrValue). document.head.appendChild(meta). }
if (content) {
meta.setAttribute('content', content). }
}
function setOrUpdateLink(attrName, attrValue, href) {
let link = document.querySelector(`link[${attrName}='${attrValue}']`). if (!link) {
link = document.createElement('link'). link.setAttribute(attrName, attrValue). document.head.appendChild(link). }
if (href) {
link.setAttribute('href', href). }
}
Vamos trocar experiências e dicas sobre esse tema importante para SEO em React!
Carregando comentários...