Tags âncora reais versus links apenas em JavaScript: por que o Google precisa de

Um proprietário de loja Shopify instalou um aplicativo de mega-menu premium no ano passado. O aplicativo tinha ótimas avaliações, animações bonitas e uma interface limpa. As vendas permaneceram estagnadas. Três meses depois, o Google Search Console mostrou uma queda de 40% nas páginas rastreadas. O problema não era o design do menu — era que os links do menu existiam apenas em JavaScript. O rastreador do Google viu uma página inicial sem links para páginas de categorias. As categorias ficaram órfãs.

Este é o erro de SEO de navegação mais comum que vejo: um menu que parece perfeito para os usuários mas é invisível para os mecanismos de busca. A solução não é complexa, mas exige entender a diferença entre links HTML reais e padrões de navegação apenas em JavaScript — e saber como auditar seu próprio site para identificar o problema antes que custe seu tráfego.

O que o rastreador do Google realmente vê

Quando o Google rastreia uma página, faz uma requisição HTTP ao seu servidor e recebe HTML como resposta. O rastreador analisa esse HTML procurando por links — especificamente, tags <a> com atributos href. Cada URL encontrada é adicionada à fila de rastreamento.

Este é o primeiro passe. O rastreador do Google consegue executar JavaScript (usa uma versão do Chrome sob o capô), mas a renderização JavaScript acontece depois, em um segundo passe, e não é garantida para cada página. O Google prioriza o primeiro rastreamento HTML porque é rápido e confiável. Páginas que dependem totalmente de JavaScript para navegação estão em desvantagem.

Aqui está o que o Google procura:

<a href="/collections/summer-shoes">Summer Shoes</a>

Este é um link real. O atributo href contém uma URL. O rastreador do Google extrai /collections/summer-shoes e a adiciona à fila de rastreamento. Esta página será rastreada e indexada.

Aqui está o que o Google ignora ou perde durante o primeiro passe:

<div onclick="window.location='/collections/summer-shoes'">Summer Shoes</div>
<a href="javascript:void(0)" onclick="navigate('/collections/summer-shoes')">Summer Shoes</a>
<button data-url="/collections/summer-shoes">Summer Shoes</button>

Nenhuma destas é uma tag âncora com atributo href real. As URLs existem no código (em manipuladores onclick ou atributos data), mas o rastreador do primeiro passe do Google não executa JavaScript nem analisa atributos data ao descobrir links. Estes links são invisíveis durante o rastreamento inicial.

O Google pode eventualmente descobrir essas páginas por outros meios (sitemaps, backlinks externos, renderização JavaScript), mas elas não receberão a prioridade de rastreamento ou a transmissão de autoridade que vem de serem vinculadas no HTML da navegação principal.

View Source: o teste definitivo

Você não precisa de ferramentas especiais para verificar se sua navegação é rastreável. Cada navegador tem uma função “View Source” que mostra o HTML bruto enviado pelo servidor antes de qualquer JavaScript executar. Isto é exatamente o que o rastreador do primeiro passe do Google vê.

Como verificar

1. Abra a página inicial de sua loja no Chrome, Firefox ou Safari.
2. Clique com o botão direito em qualquer lugar da página e selecione “View Page Source” (ou pressione Ctrl+U no Windows, Cmd+Option+U no Mac).
3. Uma nova aba abre mostrando o HTML bruto.
4. Pressione Ctrl+F (Cmd+F no Mac) e procure pela URL de uma de suas páginas de categoria principal — por exemplo, /collections/women.

Se encontrar a URL dentro de uma tag âncora assim:

<a href="/collections/women">Women's Clothing</a>

Sua navegação é rastreável. O Google pode seguir esse link.

Se a URL não aparecer no View Source ou aparecer apenas em uma tag <script> ou em um atributo data assim:

<div class="menu-item" data-url="/collections/women">Women's Clothing</div>

Sua navegação não é rastreável no primeiro passe. O rastreamento HTML inicial do Google vai perder.

Mobile versus desktop

Muitas lojas usam implementações de navegação diferentes para mobile e desktop. A versão desktop pode usar tags âncora semânticas de HTML enquanto a versão mobile usa menus hamburger apenas em JavaScript. Como o Google usa indexação mobile-first (a versão mobile é a versão principal que o Google rastreia), você precisa verificar o HTML mobile separadamente.

No Chrome:

1. Abra o DevTools (F12 ou clique com botão direito → Inspect).
2. Clique no ícone da barra de ferramentas de dispositivo (ou pressione Ctrl+Shift+M / Cmd+Shift+M).
3. Selecione um dispositivo mobile na dropdown (iPhone SE, por exemplo).
4. Recarregue a página.
5. Clique com o botão direito e View Source novamente.

Procure suas URLs de categoria no HTML mobile. Se não aparecerem, o rastreador mobile do Google não está vendo seus links de navegação.

Padrões comuns que falham no teste View Source

Padrão 1: Mega menus gerados por JavaScript

Muitos aplicativos de menu modernos funcionam assim:

1. O servidor envia HTML mínimo — apenas um botão de acionamento de menu.
2. Quando o usuário passa o mouse ou clica, JavaScript busca dados do menu de uma API ou analisa um objeto JSON.
3. JavaScript constrói o DOM completo (incluindo todas as tags <a>) e a injeta na página.

Exemplo de HTML enviado pelo servidor:

<button id="mega-menu-trigger">Shop</button>
<div id="mega-menu-container"></div>
<script>
  const menuData = {
    "women": {"label": "Women", "url": "/collections/women"},
    "men": {"label": "Men", "url": "/collections/men"}
  };
  // JavaScript constrói e injeta links quando o usuário interage
</script>

View Source mostra o botão e o container vazio. Os links não existem ainda. O rastreamento do primeiro passe do Google não vê links para páginas de categorias.

Padrão 2: Roteamento de aplicativo de página única

Lojas construídas com React, Vue ou outros frameworks SPA frequentemente usam roteamento do lado do cliente. O menu pode parecer assim no código do framework:

<Link to="/collections/summer-shoes">Summer Shoes</Link>

Se isto é rastreável depende de como o framework renderiza e se o aplicativo usa renderização no servidor. Se o aplicativo é um SPA puramente do lado do cliente (o servidor envia um shell index.html único e JavaScript renderiza tudo), View Source mostra um shell vazio sem links de navegação:

<!DOCTYPE html>
<html>
<head><title>Store</title></head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

Todo conteúdo, incluindo navegação, é renderizado por JavaScript. O rastreamento do primeiro passe do Google não vê nada.

Padrão 3: Manipuladores onclick sem href

Alguns menus usam tags âncora mas colocam a lógica de navegação em manipuladores onclick e usam javascript:void(0) como o href:

<a href="javascript:void(0)" onclick="goToCategory('women')">Women</a>

Isto parece um link para os usuários e até se comporta como um link quando clicado, mas javascript:void(0) não é uma URL real. O rastreador do Google extrai javascript:void(0) do atributo href e descarta porque não é uma URL rastreável. O destino real (/collections/women) está enterrado na função JavaScript goToCategory(), que o rastreador não executa durante a análise HTML do primeiro passe.

Padrão 4: Divs e botões com atributos data

Desenvolvedores às vezes constroem navegação usando elementos não-semânticos:

<div class="nav-item" data-url="/collections/women" onclick="navigate(this.dataset.url)">
  Women
</div>

Isto funciona para os usuários (JavaScript lê o atributo data e navega quando clicado), mas não há tag <a> e nenhum atributo href. O rastreador do Google não procura por URLs em atributos data. O link é invisível.

Como corrigir links apenas em JavaScript

Solução 1: Renderizar links em HTML, aprimorar com JavaScript

A melhor abordagem: seu servidor (ou gerador de site estático) produz HTML completo com tags âncora reais. JavaScript adiciona interatividade por cima.

HTML renderizado no servidor:

<nav>
  <a href="/collections/women">Women</a>
  <a href="/collections/men">Men</a>
  <a href="/collections/kids">Kids</a>
</nav>

Este HTML é rastreável. O Google vê os links imediatamente.

Depois JavaScript a aprimora:

document.querySelectorAll('nav a').forEach(link => {
  link.addEventListener('click', (e) => {
    // Adiciona transições suaves, analytics, etc.
    // Deixa o navegador navegar normalmente (não preventDefault)
  });
});

A navegação funciona sem JavaScript (degradação elegante), funciona perfeitamente com JavaScript (aprimoramento progressivo) e é rastreável em ambos os casos.

Solução 2: Usar renderização no servidor para SPAs

Se sua loja é um aplicativo de página única construído com React, Vue ou similar, implemente renderização no servidor (SSR) ou geração de site estático (SSG).

Frameworks que facilitam isto:

• Next.js para React
• Nuxt para Vue
• SvelteKit para Svelte
• Gatsby para sites estáticos

Estes frameworks renderizam o HTML completo (incluindo navegação) no servidor. O carregamento inicial da página fornece HTML completo e rastreável. Então JavaScript hidrata a página e assume para navegação subsequente, dando a você a experiência SPA para usuários e HTML rastreável para mecanismos de busca.

Solução 3: Verificar as configurações de seu aplicativo de menu

Se estiver usando um aplicativo de menu Shopify, verifique as configurações do aplicativo para uma opção “SEO mode” ou “server-side rendering”. Muitos aplicativos oferecem isto como uma alternância. Quando ativado, o aplicativo renderiza links de navegação em Liquid (linguagem de templating do lado do servidor do Shopify) em vez de JavaScript.

Se seu aplicativo não oferece esta opção e você confirmou (via View Source) que sua navegação não é rastreável, considere mudar para um aplicativo que faça. O Navi+ AI Menu Builder renderiza todos os links em HTML por padrão — os links estão no payload HTML inicial, e JavaScript apenas lida com interação e animação.

Solução 4: Aprimoramento progressivo para menus hamburger

Menus hamburger mobile frequentemente escondem navegação até o usuário tocar no ícone. O menu ainda pode ser rastreável desde que os links existam no HTML:

<nav class="mobile-menu" aria-hidden="true">
  <a href="/collections/women">Women</a>
  <a href="/collections/men">Men</a>
</nav>

CSS esconde o menu por padrão:

.mobile-menu {
  display: none;
}
.mobile-menu.is-open {
  display: block;
}

JavaScript alterna a classe quando o hamburger é tocado:

hamburgerButton.addEventListener('click', () => {
  mobileMenu.classList.toggle('is-open');
});

Os links existem no HTML (View Source os mostra), então o Google pode rastreá-los mesmo que estejam escondidos por CSS. Isto é aceitável — o Google não penaliza conteúdo oculto enquanto não for enganoso (você não está escondendo spam recheado de palavras-chave).

O que não funciona: construir o DOM do menu mobile com JavaScript apenas quando o hamburger é tocado:

hamburgerButton.addEventListener('click', () => {
  const menu = document.createElement('nav');
  menu.innerHTML = '<a href="/pt/collections/women">Women</a>...';
  document.body.appendChild(menu);
});

Este menu não existe no HTML até o usuário interagir. O rastreador do Google não toca em ícones hamburger. Os links são invisíveis.

Testando sua solução

Depois de atualizar sua navegação, verifique que agora é rastreável:

1. Teste View Source: Recarregue sua página inicial e View Source. Procure por URLs de categorias. Confirme que aparecem em tags âncora.
2. Teste com JavaScript desativado: No Chrome DevTools, desative JavaScript (Settings → Debugger → Disable JavaScript). Recarregue sua página inicial. Confirme que links de navegação são visíveis e clicáveis. Clicar em um link deve navegar para a página de categoria (a página parecerá quebrada sem JavaScript, mas a navegação deve funcionar).
3. Google Search Console: Espere alguns dias, depois verifique o relatório Coverage (Pages → Indexed). Se páginas de categorias previamente órfãs começarem a aparecer como indexadas, sua solução funcionou.

Verificar desktop e mobileExecute o teste View Source em ambas as versões desktop e mobile de seu site. Se sua navegação mobile usa uma implementação diferente (menu hamburger, aplicativo diferente, estrutura simplificada), teste separadamente. A indexação mobile-first do Google significa que a versão mobile é o que importa para rankings.

Por que isto importa mais do que você pensa

Navegação não é apenas um dos muitos links internos em seu site — é o conjunto mais proeminente e consistente de links que o Google vê. A navegação principal aparece em cada página. Está no cabeçalho, perto do topo do documento HTML, onde o Google espera encontrar links importantes. Quando o Google rastreia sua página inicial, a navegação é o primeiro conjunto de links que ele encontra.

Se esses links não forem rastreáveis, o Google não apenas perde algumas páginas. Ele perde o sinal primário para entender a arquitetura do seu site. Páginas de categorias ficam órfãs. Produtos vinculados apenas dessas páginas de categorias ficam órfãs um nível mais fundo. Toda a estrutura do site colapsa da perspectiva do Google.

E porque a navegação é tão consistente (mesmo menu em cada página), o impacto se compõe. Se sua navegação de página inicial é apenas JavaScript, cada página em seu site tem o mesmo problema. O Google rastreia 100 páginas e encontra zero links de navegação em todas as 100 páginas. Isto não é um problema menor de SEO — é uma falha fundamental de rastreabilidade.

O teste View Source leva 30 segundos. Se suas URLs de categoria não aparecerem no HTML bruto, você encontrou a correção de SEO mais importante que pode fazer. Tudo mais — otimização de palavras-chave, backlinks, melhorias técnicas — se baseia na suposição de que o Google pode rastrear suas páginas. Sem navegação rastreável, essa suposição é falsa.