“Acima da dobra” é a parte que aparece na tela antes de a pessoa rolar; “abaixo da dobra” é o conteúdo que ela encontra depois. A expressão nasceu na imprensa, mas, em sites, a dobra não é uma linha fixa: muda conforme o dispositivo, a janela, o zoom, a orientação e os elementos do navegador.
A decisão útil não é tentar colocar toda a página no primeiro quadro. É deixar claro, logo no início, onde a pessoa chegou, o que pode fazer ali e por que vale continuar. O conteúdo abaixo da dobra deve aprofundar a resposta, sustentar a oferta e oferecer próximos passos coerentes.
Acima e abaixo da dobra: o que cada área significa
A área inicial é o primeiro trecho visível sem rolagem em uma determinada configuração de tela. Ela costuma apresentar título, contexto, proposta ou resposta principal e, quando faz sentido, uma ação. A área abaixo da dobra reúne a continuação: explicações, evidências, detalhes, condições, perguntas frequentes e alternativas.
Não existe uma altura universal em pixels que sirva para todos. Um bloco que fica inteiro em um monitor pode ocupar várias telas no celular. Por isso, “above the fold” descreve uma condição de visualização, não uma seção permanente do HTML nem uma medida que a equipe controla para todos os visitantes.
Priorize a primeira tela sem transformar tudo em banner
- Identifique a pergunta ou tarefa que trouxe a pessoa à página e mostre cedo que ela está no lugar certo.
- Use um título específico e uma introdução que explique o benefício, o escopo ou a resposta sem rodeios.
- Apresente uma ação principal quando ela combinar com a intenção; deixe alternativas menos urgentes em segundo plano.
- Mantenha visíveis as condições que mudam uma decisão, como preço, disponibilidade, região, prazo ou limites da oferta, quando forem pertinentes.
- Evite empilhar avisos, pop-ups, botões e elementos promocionais que empurrem o conteúdo principal para baixo.
Um botão no primeiro quadro não corrige uma proposta confusa. Se a decisão exige comparação, contexto ou confiança, a pessoa pode precisar ler mais antes de agir. A hierarquia deve ajudar a entender e escolher, sem pressionar nem esconder informação relevante.
Construa uma continuação que mereça a rolagem
Depois da abertura, responda às dúvidas que realmente ajudam a avaliar a página. Em uma página de serviço, isso pode incluir etapas, critérios, responsabilidades, exemplos verificáveis e perguntas frequentes. Em uma página de produto, pode incluir especificações, compatibilidade, disponibilidade, entrega e política de troca. O conteúdo deve seguir a tarefa, não preencher espaço.
- Ordene as seções conforme as dúvidas e decisões da jornada, da compreensão inicial aos detalhes.
- Use subtítulos descritivos para que a pessoa consiga localizar uma informação durante a rolagem.
- Coloque provas perto da afirmação que ajudam a avaliar: dados, demonstrações, autoria ou condições claras.
- Repita uma chamada para ação somente quando ela fizer sentido depois de uma nova informação; não transforme cada seção em interrupção.
- Em telas menores, confira que menus fixos, banners e botões não cubram títulos, formulários ou conteúdo.
Adapte o conteúdo a desktop e celular
A dobra pode mudar bastante entre um celular na vertical, o mesmo aparelho na horizontal e uma janela de computador reduzida. Teste páginas em larguras comuns, amplie o zoom e navegue por teclado. Observe quebras de título, altura do cabeçalho, imagens, banners de consentimento e elementos fixos. Uma página responsiva reorganiza o conteúdo para a tela; não precisa simplesmente encolher a versão de desktop.
Defina a ordem visual com base na importância para a tarefa. Se uma evidência ou condição é necessária para tomar uma decisão, ela não deve ficar inacessível ou depender de uma interação pouco clara. A experiência completa precisa funcionar com rolagem e recursos de acessibilidade.
Como avaliar se as seções estão funcionando
Combine observação de tarefas com dados de uso. Peça a pessoas do público que encontrem uma informação ou concluam uma ação, registre onde hesitam e compare resultados entre dispositivos. Analytics pode mostrar eventos e etapas definidas pela empresa; mapas de rolagem podem sugerir onde uma amostra deixa de avançar. Nenhuma dessas medidas explica sozinha a causa do comportamento.
- Defina qual tarefa a página precisa apoiar antes de decidir quais eventos acompanhar.
- Compare dispositivo, origem e tipo de página sem misturar públicos com intenções diferentes.
- Interprete profundidade de rolagem como sinal de navegação, não como prova de atenção, compreensão ou conversão.
- Observe envios qualificados, compras concluídas ou outro resultado principal junto com abandono, erros e acessibilidade.
- Use testes qualitativos para descobrir por que uma seção não está ajudando; não conclua que a posição na dobra foi a causa apenas por correlação.
A dobra é um critério de SEO?
“Acima da dobra” não é uma métrica de ranking que a empresa possa otimizar isoladamente. O Google orienta os sites a oferecer uma experiência geral útil e considera vários aspectos; bons resultados de Core Web Vitals, por si só, não garantem posições. Para SEO, mantenha a resposta principal clara, o conteúdo acessível e a página adequada à intenção, em vez de esconder texto ou forçar tudo para o início.
Erros comuns ao organizar uma página
- Tratar uma medida de tela como referência fixa para todos os visitantes.
- Esconder a oferta, o preço ou uma limitação atrás de rolagem ou controles difíceis de encontrar.
- Colocar um CTA antes de explicar o que a pessoa precisa saber para decidir.
- Interpretar pouca rolagem como falta de interesse sem verificar se a tarefa já foi resolvida.
- Usar cliques em CTA ou mapas de calor como substitutos de resultados de negócio e pesquisa com usuários.
- Remover conteúdo útil de celular para reduzir a altura inicial.
Exemplo de aplicação
Uma página de serviço coloca uma animação grande no topo e esconde a oferta e a região atendida após várias rolagens. A equipe testa a tarefa em diferentes telas e prioriza título, benefício, escopo e próximo passo no primeiro trecho, mantendo detalhes e evidências acessíveis abaixo. Não usa uma altura fixa de dobra como regra universal, pois dispositivos, zoom e preferências mudam o que cada pessoa vê.
Checklist para revisar acima e abaixo da dobra
- A primeira tela identifica a página e a necessidade que ela atende.
- A ação principal está visível quando a intenção justifica uma ação imediata.
- Informações importantes para a decisão podem ser encontradas sem obstáculos.
- A rolagem revela uma sequência lógica de explicação, evidência e próximo passo.
- O conteúdo funciona em telas pequenas, com zoom e navegação por teclado.
- A medição distingue comportamento observado de causa e resultado comercial.
Perguntas frequentes
Todo conteúdo importante precisa ficar acima da dobra? Não. O conteúdo deve aparecer em uma ordem clara e continuar acessível. Informações diferentes cumprem funções diferentes ao longo da página.
A primeira tela é igual para todos os aparelhos? Não. A área visível depende da tela, da janela, da orientação, do zoom e da interface do navegador.
Mais pessoas precisam rolar para a página converter? Não necessariamente. Uma rolagem pode indicar interesse, mas também que a resposta não estava clara. Relacione o comportamento à tarefa e ao resultado definido.
Colocar um botão acima da dobra melhora o SEO? Não há uma regra que garanta esse efeito. Posicione ações para ajudar a pessoa, preserve a clareza do conteúdo e avalie a experiência completa.
A revisão deve começar pelo objetivo da página: descubra o que a pessoa precisa entender ou fazer e organize as informações para apoiar essa tarefa em qualquer tela.
Entenda a experiência da página nos resultados da Pesquisa Google — Google Search Central
Core Web Vitals e resultados da Pesquisa Google — Google Search Central
Site responsivo: o que revisar em celulares e telas menores — AtivaSEO
Como site e blog podem criar caminhos até o contato? — AtivaSEO