Estrutura de cabeçalhos SEO

Como funciona esta verificação

O Scanaris conta as etiquetas <h1> do HTML da tua página. O resultado correto é exatamente uma. Se não houver nenhuma, abre um achado de severidade média: nem a Google nem um leitor de ecrã sabem qual é o tema principal. Se houver duas ou mais, abre um de severidade baixa com a contagem: vários títulos principais diluem de que trata a página. Só se olha para o HTML servido, sem executar JavaScript, e só para a página analisada.

Porque importa

O <h1> é o título da página, a primeira coisa que um leitor de ecrã anuncia e um dos sinais mais claros que a Google tem para perceber o tema. Uma página sem h1 é como um artigo sem título: o motor de busca tem de o deduzir do resto. Vários h1 não são um erro de HTML, mas repartem esse sinal: se a tua página de produto tem o nome do produto, o slogan e "Opiniões" todos como h1, nenhum dos três é o tema. E é a base do resto da hierarquia: os h2 dividem o conteúdo em secções, os h3 subdividem, e é assim que navega quem usa teclado ou leitor de ecrã e como os assistentes de IA partem o teu texto para o citar.

Porque acontece

O caso mais comum de zero h1 é o design: o texto grande do hero é um div com classes de tamanho, ou um p, porque quem o maquetou pensou no aspeto e não na estrutura. Em aplicações de página única, o h1 é pintado pelo JavaScript e não está no HTML inicial. O caso de vários h1 costuma vir de componentes: cada cartão, cada secção ou cada widget traz o seu próprio h1, ou o logótipo está envolvido num "para o SEO", que é um conselho de 2008.

Como corrigir

• Um h1 por página com o tema principal, visível e perto do início do conteúdo. Na home, o que fazes; num artigo, o seu título; num produto, o seu nome.
• O logótipo não é um h1. É uma ligação para a home com o nome da marca como texto ou como alt.
• O resto em h2 e h3, sem saltar níveis: um h3 vai dentro de uma secção com h2. Se uma etiqueta só te interessa pelo tamanho, usa uma classe de CSS, não um nível de cabeçalho.
• Em componentes, aceita o nível como prop (<Heading :level="2">) em vez de o fixar lá dentro, para que o mesmo cartão seja h2 numa página e h3 noutra.
• Em SPA, renderiza no servidor pelo menos a estrutura da página ou usa pré-renderização; senão, a Google vê uma página vazia antes de executar o teu JavaScript.

Confirma que está corrigido

curl -s https://teudominio.com | grep -oiE '<h[1-6][^>]*>[^<]{0,80}' | sed 's/<\(h[1-6]\)[^>]*>/\1: /'

Deve sair uma única linha a começar por h1:, seguida da hierarquia de h2 e h3 por ordem lógica. Se não sair nada, o conteúdo é pintado pelo JavaScript e a Google também não o vê à primeira.

Perguntas frequentes

O HTML5 permite um h1 por secção. Porque é marcado?

A especificação permitia-o com o algoritmo de "outline" por secções, mas nenhum browser nem leitor de ecrã o implementou alguma vez, e a especificação retirou-o em 2022. Na prática, um h1 por página continua a ser a recomendação da Google e das diretrizes de acessibilidade.

O meu h1 está oculto com CSS para o design ficar limpo.

Um h1 oculto com display: none não é lido nem pela Google nem pelos leitores de ecrã. Se precisas que não se veja mas se leia, usa uma classe de texto visualmente oculto (sr-only); mas pensa se o título principal da página devia mesmo estar escondido.

Os outros níveis são revistos?

Esta verificação conta só os h1. Os cabeçalhos vazios deteta-os acessibilidade, e o título do separador, que não é o mesmo que o h1 embora costumem parecer-se, é revisto por metadados SEO.