Como otimizar SEO em React usando apenas API DOM nativa

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.

Por que evitar bibliotecas?

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.

Como fazer?

• Para definir um título padrão com um template, podemos usar document.title e implementar uma função que substitua uma variável pelo nome da página.
• Para meta tags, podemos criar ou atualizar elementos usando document.querySelector e document.createElement.
• Para cada página, podemos criar uma função que sobrescreva as tags necessárias, como description, Open Graph, Twitter Cards, robots, canonical, etc.

Exemplos práticos

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). }
}

Perguntas para a comunidade

• Quais estratégias vocês usam para gerenciar meta tags em React sem bibliotecas?
• Como garantir que essa abordagem seja eficiente em aplicações com várias rotas e conteúdo dinâmico?
• Existe alguma limitação que devemos considerar ao manipular o DOM diretamente?

Vamos trocar experiências e dicas sobre esse tema importante para SEO em React!