# Uma landing page boa começa pela hierarquia

> Organize a mensagem, os títulos e as chamadas para ação para que cada seção ajude a pessoa a entender a oferta e decidir o próximo passo.

Por Badsite. Publicado: 2026-09-26. Atualizado: 2026-09-26.

Fonte: https://badsite.dev/blog/landing-page-com-hierarquia-clara

## Comece pela pergunta de quem chegou

Quem abre uma landing page não conhece necessariamente o seu produto, o contexto da campanha ou o significado dos nomes que você usa internamente. A primeira tela precisa oferecer um ponto de entrada: o que é isso, para quem serve e por que continuar lendo. Uma frase espirituosa pode participar da composição, mas não deveria ser a única explicação da oferta.

Escreva a mensagem principal em linguagem direta antes de escolher a hero. Para uma ferramenta de agendamento, ‘Organize seus atendimentos em uma agenda compartilhada’ comunica mais do que ‘O futuro da produtividade chegou’. Depois acrescente personalidade à redação e ao visual sem remover a informação que permite reconhecer o produto.

## Dê uma tarefa a cada seção

Monte um roteiro curto com as perguntas que a página precisa responder. A ordem depende da oferta e de quanto o público já conhece sobre ela. Um produto novo pode exigir uma demonstração cedo; um serviço conhecido pode precisar apresentar condições e diferenciais antes. Não existe uma sequência universal que dispense esse julgamento.

Escreva uma frase ao lado de cada seção explicando sua função. Se você não consegue dizer o que ela acrescenta, provavelmente precisa ajustar ou remover esse trecho. Use informações verificáveis: uma demonstração real é mais útil que uma grade de números sem origem, e uma explicação honesta pode substituir depoimentos que ainda não existem.

- Apresentação: o que você oferece e para quem.
- Funcionamento: como a pessoa usa ou contrata a oferta.
- Detalhes: o que está incluído e quais são as condições.
- Decisão: qual ação vem agora e o que acontece depois dela.

## Faça o visual e o HTML contarem a mesma história

Destaque a mensagem principal pelo tamanho, pelo contraste e pelo espaço ao redor. Uma página em que todos os títulos gritam obriga a pessoa a descobrir sozinha o que importa. Reserve o maior peso visual para a oferta e crie diferenças claras entre título de seção, subtítulo e informação complementar.

Na estrutura do documento, use um H1 para o assunto principal desta página, H2 para suas grandes seções e H3 quando uma delas tiver subdivisões. Escolha o nível pelo papel do conteúdo, e ajuste o tamanho com CSS. O tutorial de títulos da W3C explica como uma hierarquia lógica ajuda a organizar a leitura e a navegação por tecnologias assistivas.

## Nomeie a ação que o botão realiza

‘Criar conta’, ‘Ver modelos’ e ‘Agendar conversa’ antecipam destinos diferentes. Escolha o rótulo que descreve o próximo passo e mantenha o mesmo nome quando repetir a ação. Se o formulário só inicia uma solicitação, não apresente o botão como se a compra ou o agendamento já estivesse garantido.

Você pode ter ações secundárias, desde que a diferença seja compreensível. Um botão preenchido pode carregar o caminho principal e um link simples oferecer mais detalhes. Evite acrescentar urgência, descontos ou disponibilidade limitada que não existam. A decisão fica mais fácil quando o conteúdo esclarece as condições, sem depender de pressão artificial.

## Revise com conteúdo real no celular

Na tela pequena, confira a ordem em que as informações aparecem. Uma imagem lateral pode acabar afastando uma explicação do botão que depende dela. Títulos precisam quebrar sem esconder palavras, e os controles devem continuar fáceis de identificar. Percorra a página também com o teclado e verifique se o foco segue a ordem de leitura.

Finalize lendo somente os títulos. Eles formam uma sequência que explica a oferta? Depois leia apenas os botões: está claro para onde cada um leva? Esse exercício não substitui observar pessoas usando a página, mas encontra problemas básicos antes de publicar. Uma hierarquia clara começa com decisões sobre o conteúdo e se confirma na experiência completa.

## Referências

- [W3C WAI: títulos e níveis de hierarquia](https://www.w3.org/WAI/tutorials/page-structure/headings/)
- [W3C WAI: estrutura de páginas](https://www.w3.org/WAI/tutorials/page-structure/)