Quando falamos de SEO técnico, a diferença entre botões e links não representa design, mas de semântica, rastreabilidade e acessibilidade. Usar o elemento errado no contexto errado pode quebrar a navegação interna aos olhos do Google e limitar o potencial de ranqueamento de páginas importantes.
O que é um link para o Google?
🔗 Regra de ouro: Para o Google, link é tudo que está dentro de uma tag
<a> com atributo href apontando para uma URL. É esse padrão
que o Googlebot segue para descobrir páginas e distribuir relevância.
Por isso:
- <a href=”/categoria/produtos”>Ver produtos</a> é um link rastreável, mesmo que estilizado como botão com CSS.
- <a onclick=”window.open(‘/categoria/produtos’)”>Ver produtos</a> sem href é um problema: o Lighthouse e outras ferramentas vão acusar “links não rastreáveis” porque o crawler não considera JavaScript onclick como destino confiável.
Do ponto de vista de SEO técnico, a navegação principal, menus, breadcrumbs, paginação e CTAs que levam a outras páginas devem ser construídos com <a href=””>, nunca com substitutos “criativos” baseados apenas em eventos de clique.
<a href="/categoria/produtos">Ver produtos</a>
<a onclick="window.open('/categoria/produtos')">Ver produtos</a>
Por que o botão não representa um link
O botão nativo da web é representado por <button> (ou alguns tipos de <input>, como type=”submit”). Ele existe para disparar ações dentro da mesma página: enviar formulários, abrir modais, alternar estados de interface, executar funções em JavaScript.
O Googlebot não interage com botões como um usuário humano. Isso significa que:
- Um <button onclick=”location.href=’/planos'”>Ver planos</button> funciona para o usuário, mas não é um link confiável para o crawler.
- Um botão que carrega conteúdo adicional por AJAX só será “visto” se o HTML final com as URLs estiver presente no DOM renderizado sem depender de clique.
💬 “Botões não são links e não têm URLs inerentes; portanto, não são usados para rastreamento.” — John Mueller, Google
Se a sua arquitetura depende de botões para conectar seções importantes do site, há uma boa chance de o Googlebot estar vendo um site “mais pequeno” do que o usuário enxerga.
Erros comuns que prejudicam o SEO
Em auditorias técnicas, alguns padrões aparecem com frequência:
É <a href> estilizado — cenário ideal, sem problema.
<button> com redirecionamento via JS, sem href real.
javascript:void(0) no lugar da URL real.
- Links disfarçados de botão: visualmente parecem botões, mas por trás são <a href=”…”>. Isso, em geral, é o cenário ideal: semântica correta, estilo customizado.
- Botões usados como se fossem links: elementos <button> programados para redirecionar o usuário via JavaScript, sem um <a href=””> real envolvido. Do ponto de vista de SEO e de ferramentas como o Lighthouse, isso significa caminhos de navegação que o crawler não segue.
- Anchors sem href ou com javascript:void(0): visualmente são links, mas o atributo href aponta para nada útil, e toda a lógica depende de onclick. Isso costuma disparar alertas de “links não rastreáveis” e prejudicar tanto SEO quanto acessibilidade.
Além da perda de rastreabilidade, a mistura de semântica (usar botão para navegar, link para acionar ações) confunde leitores de tela, navegação por teclado e métricas de engajamento reais, o que indiretamente afeta SEO.
Práticas técnicas para links e botões
Para manter seu HTML alinhado às recomendações de SEO do Google e às diretrizes de acessibilidade, alguns princípios são diretos:
- Tudo que muda a URL ou leva a outra página deve ser um <a href=”URL”>, mesmo que seja estilizado como “botão de ação”.
- Tudo que executa uma ação na mesma página (enviar formulário, abrir filtro, expandir um bloco) deve ser um <button>.
- Evite lógica de navegação baseada apenas em onclick, especialmente em elementos sem href. Se precisar de comportamento avançado, mantenha o link estático no HTML e deixe o JavaScript apenas melhorar a experiência.
- Teste suas páginas com ferramentas como Lighthouse: avisos de “links não rastreáveis” normalmente indicam anchors sem href válido ou uso indevido de eventos JavaScript em links que deveriam ser simples.
| Situação | Elemento correto |
|---|---|
| Levar para outra página/URL | <a href="URL"> |
| Menu, breadcrumb, paginação | <a href="URL"> |
| Enviar formulário | <button> |
| Abrir modal ou expandir bloco | <button> |
Quando você respeita essa divisão clara, a arquitetura de links fica previsível para o Googlebot, a cobertura de indexação melhora e o Page Experience tende a ser mais sólido, principalmente em cenários de navegação mobile mais complexos.
SEO técnico é detalhe repetido
No dia a dia, a escolha entre <a> e <button> parece apenas uma questão de estilo de front-end. Mas, em escala, essas decisões estruturam como o Google enxerga a malha interna do seu site e quais páginas recebem mais sinais, crawl budget e relevância.
Se você quer aprofundar esse tipo de ajuste técnico que não aparece no layout, mas faz diferença direta em rastreabilidade, indexação e experiência, esse tema faz parte do módulo de Page Experience e arquitetura de links do curso Dominando o SEO Técnico na Prática.
✅ Checklist de links e botões
- ☑️ Tudo que muda a URL usa <a href=”URL”>
- ☑️ Ações na mesma página usam <button>
- ☑️ Nenhum link depende só de onclick sem href
- ☑️ Testado no Lighthouse sem alertas de “links não rastreáveis”
Sua arquitetura de links está correta?
Aprofunde esse e outros ajustes de Page Experience no curso Dominando o SEO Técnico na Prática.
Quero acessar o curso
