Como usar URLs rastreáveis em uma SPA em vez de fragmentos

O Google não recomenda fragmentos para representar páginas diferentes; a documentação sugere History API.

Antes de começar

Registre como a aplicação representa cada rota e se o servidor responde à URL direta.

Passo a passo

1. Faça cada vista ter um caminho real, por exemplo /produtos/caneca/. No cliente, use pushState e trate popstate; atualize o conteúdo e <title> para a rota, e configure o servidor para responder à rota direta com a aplicação (ou renderizar HTML próprio):

function navegar(path, titulo, render) {
  history.pushState({}, '', path);
  document.title = titulo;
  render();
}

window.addEventListener('popstate', () => carregarRota(location.pathname));

carregarRota deve decidir a tela a partir de location.pathname, inclusive no carregamento inicial. Os links devem ser <a href="/caminho/">, com navegação funcional sem depender de clicar previamente em outra tela.

2. Teste links copiados em janela nova, atualização e navegação sem sessão anterior.

Limites e cuidados

Uma mudança de URL do lado do cliente precisa manter conteúdo e metadados coerentes. Teste acesso direto, atualização, voltar/avançar e abrir link em nova aba; confirme status HTTP, conteúdo principal, title e canonical por rota. pushState por si só não cria HTML renderizado pelo servidor; assegure renderização acessível ao Google e às pessoas sem depender de estado transitório. Consulte orientações de JavaScript para a Pesquisa.

Continue na biblioteca

Fonte oficial: Corrigir problemas de JavaScript relacionados à Pesquisa — Google Search Central.