Saltar para o conteúdo

Como usar efetivamente o mapa do site para navegar em uma loja online

Estamos procurando um par de tênis para criança, digitamos o nome na barra de pesquisa, e a loja retorna zero resultados porque…

Femme utilisant un plan de site sur un écran d'ordinateur dans un bureau à domicile organisé
Leitura: 5 min

Estamos procurando um par de tênis para crianças, digitamos o nome na barra de pesquisa e a loja retorna zero resultados porque o produto está classificado como “calçados esportivos”. Esse tipo de situação leva a sair do site. O mapa do site, essa página frequentemente relegada ao rodapé, resolve exatamente esse problema: ele exibe a árvore completa das categorias e subcategorias na forma de links clicáveis.

Em uma loja online, é um atalho direto para a seção que o menu principal nem sempre mostra.

Mapa do site HTML e sitemap XML: duas ferramentas, duas funções

A confusão entre esses dois elementos é comum. O mapa do site HTML é uma página web clássica, legível por qualquer visitante, que lista as seções principais de uma loja com links ativos. O sitemap XML, por sua vez, é um arquivo técnico destinado aos motores de busca para indexar as páginas.

Para um comprador, somente o mapa HTML tem uma utilidade concreta. Ele apresenta as categorias de produtos, as páginas de ajuda, as condições de entrega, às vezes as marcas disponíveis. Ao navegar pelo mapa do site da Moon Kidsstore, vemos, por exemplo, todas as seções infantis organizadas por tipo de produto, o que evita ter que procurar em um mega menu no celular.

O Google confirma: o mapa HTML serve às pessoas, o XML serve aos robôs. Para uma loja com várias centenas de referências, manter os dois é uma boa prática, mas do lado do usuário, é o primeiro que conta.

Homem consultando o mapa do site de uma loja online em um laptop em um café

Encontrar um produto sem passar pelo menu principal

Os menus suspensos de uma loja online raramente exibem todas as subcategorias. Um site que vende roupas para crianças pode agrupar “casacos”, “jaquetas” e “impermeáveis” sob um único título “roupas de inverno” no menu, enquanto o mapa do site os lista separadamente.

O mapa do site atua como um índice de livraria. Consultamos quando a navegação clássica não leva a lugar algum, quando a barra de pesquisa interna dá resultados muito amplos ou quando chegamos ao site sem uma ideia clara da árvore.

Quando usar o mapa do site em vez da pesquisa

  • Quando a barra de pesquisa não gerencia sinônimos (você digita “tênis” mas o catálogo diz “sneakers”) e o mapa lista as categorias com seus verdadeiros títulos
  • Quando se quer explorar uma seção inteira sem aplicar filtros, por exemplo, percorrer todas as marcas disponíveis de uma só vez
  • No celular, onde menus de vários níveis se tornam difíceis de manipular e uma página plana com links é mais rápida de escanear

O mapa do site não substitui os filtros de produtos nem o motor de busca. Ele os complementa, oferecendo uma visão geral que essas ferramentas não proporcionam.

Acessibilidade e mapa do site: uma obrigação que muda o jogo

O critério WCAG 2.1 AA 2.4.5 impõe a oferta de vários meios para encontrar uma página em um site. Navegação, pesquisa, mapa do site: é necessário ter pelo menos duas dessas três vias. O mapa do site atende diretamente a essa exigência de acessibilidade.

Desde 28 de junho de 2025, a Lei Europeia de Acessibilidade (diretiva europeia 2019/882) se aplica aos serviços de comércio eletrônico relevantes. As lojas online devem, portanto, garantir que suas páginas, incluindo o mapa do site, sejam utilizáveis pelo teclado e compatíveis com tecnologias assistivas, como leitores de tela.

O que isso implica para o mapa do site de uma loja

Um mapa do site composto apenas por imagens clicáveis sem texto alternativo torna-se inutilizável para uma pessoa com deficiência visual. Os links devem ser explícitos: “Vestidos menina 2-6 anos” em vez de “Clique aqui”. A norma WCAG 2.2 adiciona um critério (2.4.11) sobre elementos fixos que ocultam o foco do teclado, o que pode ser problemático se uma faixa promocional cobrir os links do mapa.

Um mapa do site acessível beneficia todos os visitantes, não apenas os usuários de tecnologias assistivas. Links bem nomeados também ajudam pessoas apressadas ou pouco familiarizadas com a interface.

Jovem mulher navegando no mapa do site de uma loja online através de um tablet em uma sala moderna

Ler um mapa de site e-commerce: os pontos de referência concretos

Nem todos os mapas de site são iguais. Alguns listam centenas de páginas sem uma lógica visível. Outros agrupam os links por categorias com uma hierarquia clara. Aqui está como tirar proveito de um mapa bem construído.

  • Identifique primeiro as categorias de primeiro nível (roupas, calçados, acessórios), que correspondem às seções principais da loja
  • Identifique as subcategorias que especificam a idade, o tamanho ou o tipo de produto, pois elas levam a páginas filtradas mais direcionadas do que a categoria mãe
  • Procure as páginas utilitárias frequentemente ocultas no menu: guia de tamanhos, política de devolução, programa de fidelidade
  • Verifique se o mapa inclui as páginas de marcas, que permitem acessar diretamente todo o catálogo de um fabricante sem passar pelos filtros

Em lojas que atualizam regularmente seu mapa, também encontramos as coleções sazonais ou as promoções em andamento. É um meio rápido de identificar seções temporárias ausentes do menu permanente.

A estrutura varia de loja para loja, dependendo do número de referências e da lógica de classificação escolhida pelo comerciante. Um site com uma dezena de categorias terá um mapa legível em poucos segundos, enquanto um catálogo de vários milhares de produtos exigirá um mapa organizado em seções recolhíveis ou paginadas.

O mapa do site continua sendo uma ferramenta subutilizada pela maioria dos compradores online. Geralmente, é encontrado no rodapé, às vezes sob o título “Todas as nossas categorias” ou “Índice do site”. Adotar o hábito de consultá-lo economiza tempo assim que o menu ou a pesquisa não satisfazem. Para as lojas, também é um sinal de transparência: exibir claramente sua árvore é mostrar que cada página é acessível sem rodeios.

Como usar efetivamente o mapa do site para navegar em uma loja online