O que é Above the Fold? Boas práticas e exemplos

Autor:Rachel Handley
14 min de leitura
mai 13, 2025
Colaborador: Zach Paruch

Traduzimos este artigo do inglês. Clique aqui para ler o artigo original. Se você notar algum problema com o conteúdo, não hesite em entrar em contato conosco pelo e-mail report-osteam@semrush.com.

O que significa 'Above the Fold'?

Above the Fold (ATF) é a parte de uma página da web que você pode ver sem rolar para baixo.

A dobra (fold) é a borda inferior dessa visualização inicial. Qualquer coisa abaixo daquela linha requer rolagem e é considerada “abaixo da dobra.”

ilustração acima da dobra

A linha exata da dobra varia conforme o dispositivo e as configurações do navegador. O tamanho da janela de visualização (também conhecido como viewport) afeta onde a dobra aparece.

Por que o conceito Above the fold é importante?

O conceito "acima da dobra" é importante porque influencia o que os visitantes veem primeiro, ajuda a chamar sua atenção e os incentiva a permanecer na página de determinado site.

Isso influencia as primeiras impressões. Os usuários frequentemente esperam funções-chave (por exemplo, um link de cadastro) nessa área de visualização primária.

Se não encontrarem o que precisam imediatamente, podem deixar a página.

Esse comportamento pode prejudicar o desempenho comercial e o SEO, uma vez que os mecanismos de busca se esforçam para oferecer resultados que gerem engajamento dos usuários.

Muitos mecanismos de busca também consideram o conteúdo próximo ao topo mais importante. Isso significa que o conteúdo ATF pode ter um impacto maior em seus rankings do que o conteúdo abaixo da dobra.

Portanto, o SEO acima da dobra deve ser uma prioridade.

Boas Práticas para conteúdo Above the Fold

O conteúdo acima da dobra é essencial para chamar a atenção dos visitantes. Afinal, ele melhora a experiência do usuário (UX) e pode aumentar a receita do seu negócio.

Continue lendo para aprender mais sobre as melhores práticas de design ATF e as estratégias de SEO above the fold que podem ajudar suas páginas a rankear melhor nos mecanismos de pesquisa.

Use um Design de Website Responsivo

Um design de site responsivo se adapta ao tamanho e forma da janela de visualização do usuário. Isso garante que imagens, textos e outros elementos se encaixem corretamente.

Essa abordagem otimiza tanto o conteúdo acima da dobra quanto o abaixo da dobra em todos os dispositivos, sejam eles grandes monitores de desktop ou pequenas telas de smartphones.

Veja abaixo um exemplo de responsividade em ação no blog da Semrush:

AD_4nXdhUoC5gsUt8RcoMvvsSEd_mVtzMUt9ZfGdUcB2pEVa6nQ-dm-_2ECaJydIPzejC93-pgUkAfiSIU5ht-dn48iFyentnfep3Pj-oIAk0dOoYEW7WEdo01T0AdTKgsijDt5DWDfovhzmb1HnStDVncL1ZBVN?key=irUG4RqTXL5BvqJSC3z1gGDO

Para dicas sobre como implementar um layout responsivo, consulte o guia de ajuda do Google.

Em seguida, realize auditorias técnicas regulares para verificar o desempenho do seu site.

A ferramenta Auditoria do site da Semrush realiza mais de 140 verificações para confirmar o desempenho em dispositivos desktop e móveis.

Você pode agendar uma auditoria diária ou semanal, ou realizar rastreamentos manualmente.

Visão geral do painel da Auditoria do site

Otimize o Cabeçalho do seu Site

O cabeçalho do site está no topo de uma página da web e geralmente aparece em todas as páginas de um site, mantendo elementos-chave em um local consistente.

Essa consistência ajuda os usuários a navegar pelo seu site.

cabeçalho do site levis

Um cabeçalho inclui geralmente o logotipo da marca, que linka para a página inicial.

logotipo Levis vinculado à página inicial

O cabeçalho também costuma incluir o menu de navegação principal, que contém links para as principais seções do seu site.

menu de navegação principal

Muitos webdesigners economizam espaço usando um menu hambúrguer (especialmente em dispositivos móveis). Contudo, isso adiciona um clique extra para que os usuários cheguem às páginas principais.

menu hambúrguer

Veja outros elementos a considerar para o seu cabeçalho:

  • Banner: use o banner do site para anunciar aspectos únicos da venda (por exemplo, frete grátis)
  • Links de login ou cadastro: incentive os visitantes a criarem uma conta ou fazerem login para que você possa obter insights sobre o comportamento do cliente
  • Bandeira de região ou idioma: permita que os usuários troquem de local em sites multirregionais ou multilíngues
  • Função de busca: inclua uma barra ou ícone de pesquisa para auxiliar os visitantes a encontrarem rapidamente o que desejam
  • Ícone do carrinho de compras: facilite o início do processo de checkout a partir de qualquer página
elementos do cabeçalho do site

Adicionar mais elementos pode aumentar a funcionalidade. No entanto, um cabeçalho desordenado ocupa um espaço valioso acima da dobra e pode confundir os usuários.

Os designers devem encontrar um equilíbrio.

Inclua um Título Único

Cada página deve apresentar um título único e descritivo acima da dobra. Esse título mostra rapidamente aos usuários o propósito da página.

Em sites de notícias populares, manchetes proeminentes dizem aos visitantes exatamente o que esperar.

site Mashable

Um título único também ajuda o SEO acima da dobra da página.

Quando questionado sobre o impacto do ATF nos rankings, John Mueller do Google disse, “Para nós, o importante é que realmente haja uma quantidade de conteúdo único na área acima da dobra.

“É totalmente OK ter um banner e uma imagem genérica no topo. Mas pelo menos uma parte do conteúdo acima da dobra deve ser único para aquela página. Isso poderia ser uma espécie de cabeçalho.”

Para SEO on-page, enquadre o título em tags H1 (o título com maior hierarquia em HTML). E certifique-se de que inclui sua palavra-chave primária

Mais ou menos assim:

colocando o título entre tags H1

Para revisar seus títulos atuais, use o On Page SEO Checker da Semrush.

Importe suas páginas e palavras-chave alvo. A ferramenta então mostra quais títulos otimizar.

Visão geral do painel On Page SEO Checker

Abra as ideias para qualquer página para ver se o H1 contém sua palavra-chave principal - e se está sendo usada em excesso (o que pode ser uma forma de excesso de palavras-chave).

"H1 contém uma palavra-chave alvo" resultados na seção Conteúdo

 Você também verá ideias relacionadas a:

E mais.

Vá direto ao ponto

Os usuários querem encontrar o que precisam rapidamente - idealmente acima da dobra.

Ir direto ao ponto também pode ser o que chamamos de "redução do tempo para gerar valor", o que beneficia o SEO e a UX.

Antes de criar uma página, faça a si mesmo as seguintes perguntas:

  • Quando alguém chega a esta página, o que esse usuário quer fazer?
  • Como posso ajudar essa pessoa a fazê-lo o mais rapidamente possível?

Por exemplo, considere páginas de categorias em sites de varejo. Os consumidores veem opções de produtos e fotos imediatamente.

site Levis como exemplo de conteúdo direto

Quando a maioria das imagens de produtos aparece abaixo da dobra, os visitantes devem rolar para ver os itens que vieram buscar, reduzindo o engajamento imediato.

No site da Prana, os usuários têm que rolar para baixo

O modelo de artigo no blog da Semrush também é otimizado para gerar valor rapidamente.

O tempo estimado de leitura e o índice aparecem no topo. Os leitores podem explorar o artigo sem precisar rolar para baixo.

Modelo de blog da Semrush

O autor usa uma técnica de copywriting de SEO chamada BLUF (Bottom Line Up Front). Essa abordagem entrega informações essenciais imediatamente. Além disso, evita introduções longas e com "encheção de linguiça".

Exemplo de BLUF no blog da Semrush

Equilibrar anúncios com conteúdo original

Você pode querer exibir anúncios acima da dobra para aumentar visibilidade e cliques.

Mas muitos anúncios podem afastar os usuários. Anúncios grandes ou excessivos podem impedir os visitantes de encontrar rapidamente o que procuram, o que pode fazer com que eles saiam ou procurem em outro lugar.

Anúncios desequilibrados também podem prejudicar o SEO acima da dobra, especialmente em dispositivos menores como celulares.

Os motores de busca podem penalizar sites que preencham muito espaço na parte superior da tela com anúncios.

Em 2012, o Google lançou uma grande atualização do algoritmo de layout de página que rebaixou sites com anúncios excessivos acima da dobra.

O anúncio afirmava: "Se a parte do site que você vê primeiro não tem muito conteúdo visível ... isso não é uma experiência muito boa para o usuário. Tais sites podem não se classificar tão bem no futuro."

Os principais motores de busca recomendam seguir os Padrões de Melhores Anúncios. Essas diretrizes desencorajam experiências intrusivas, como:

  • Anúncios pop-up
  • Anúncios fixos grandes
  • Densidade de anúncio acima de 30%

Você ainda pode usar anúncios mobile acima da dobra, mas deve equilibrá-los com conteúdo original, assim:

publicidade mobile na ESPN acima da dobra

Aumentar a velocidade de carregamento

Seu conteúdo acima da dobra deve carregar rapidamente. Afinal, tempos de carregamento lentos podem aumentar as taxas de rejeição e prejudicar os rankings de SEO.

Um conjunto de métricas de velocidade chamadas Core Web Vitals é especialmente importante:

  • Largest Contentful Paint (LCP): tempo para o maior bloco de texto ou imagem aparecer
  • First Input Delay (FID): tempo até a página responder à primeira interação do usuário
  • Cumulative Layout Shift (CLS): quantidade de mudança de layout durante o carregamento

Você pode verificar o Core Web Vitals no Google Search Console ou na ferramenta Auditoria do site da Semrush. 

O relatório Core Web Vitals da Semrush mostra métricas-chave e sugestões para melhorias.

Relatório do Core Web Vitals na ferramenta de Auditoria do site

Abaixo estão algumas boas práticas para melhorar o tempo de carregamento acima da dobra:

  • Estruture seu HTML para que o conteúdo acima da dobra carregue primeiro
  • Minifique HTML, CSS e JavaScript para reduzir tamanhos de arquivos e acelerar o processamento
  • Organize a parte essencial do CSS, colocando estilos acima da dobra na seção <head> para melhorar a renderização inicial
  • Otimize imagens redimensionando, reformatando e compactando-as para reduzir os tempos de carregamento, mantendo a qualidade
  • Precarregue recursos usando o atributo rel="preload" para priorizar o carregamento dos elementos acima da dobra.

Apele para um visual atraente

O conteúdo Above the fold deve funcionar bem e parecer atraente, pois os visitantes costumam formar impressões duradouras em um curto período.

Use estas dicas para o design Above the fold:

  • Torne o texto legível com uma hierarquia clara
  • Divida o texto e ajude na compreensão com imagens relevantes
  • Inclua vídeos ou animações para chamar a atenção
  • Use ícones reconhecíveis para economizar espaço
  • Use espaço vazio (espaço em branco) para não sobrecarregar com muitos elementos
  • Certifique-se de que o design esteja alinhado com a identidade da marca
  • Atenda às diretrizes de acessibilidade

Analisar métricas de desempenho

Métricas de desempenho mostram o que está funcionando no seu design ATF e o que precisa de melhoria. 

Suas principais métricas vão depender dos objetivos que você tem com seu site, mas as seguintes são úteis. Todas estão disponíveis no Google Analytics ou plataformas similares:

Métrica

Descrição

Por que é importante

Taxa de rejeição

A porcentagem de visitantes que saem sem realizar uma ação

Um bom conteúdo acima da dobra pode reduzir as taxas de rejeição

Taxa de saída

A porcentagem de visitantes que saem do seu site a partir da página atual

Um bom conteúdo acima da dobra pode reduzir as taxas de saída

Profundidade de rolagem

A parte da página que seu visitante médio vê

Mostra se o conteúdo acima da dobra motiva os usuários a rolarem mais

Taxa de conversão de metas

A porcentagem de visitantes que completam uma ação desejada (ex.: fazer uma compra)

Um bom conteúdo acima da dobra pode aumentar as taxas de conversão

Tráfego orgânico

O número de visitas não pagas vindas dos motores de busca

Um bom SEO Above the fold pode aumentar o tráfego orgânico

Para uma visualização em um único painel, conecte suas contas do Google Analytics e Search Console à ferramenta Insights de Tráfego Orgânico da Semrush.

Em seguida, compare as seguintes métricas em suas páginas de destino:

  • Classificações de palavras-chave
  • Taxa de rejeição
  • Taxa de atingimento de meta
Relatório de Tráfego Orgânico

Essas informações podem ajudar você a refinar o conteúdo acima da dobra para melhor atender às necessidades do usuário.

Devo colocar os CTAs acima ou abaixo da dobra?

Toda página de destino deve ter pelo menos um call to action (CTA) que incentive os visitantes a realizar uma ação específica (ex.: “Adicionar ao Carrinho” ou “Inscrever-se Agora”).

Alguns profissionais de marketing colocam o CTA acima da dobra para que os usuários possam vê-lo e interagir com ele imediatamente.

CTA acima da dobra no site da Semrush

Outros argumentam que os visitantes precisam de mais informações antes de agir. Nesses casos, colocar o CTA mais abaixo (abaixo da dobra) pode funcionar melhor.

Para descobrir o que funciona melhor em suas páginas, realize um teste A/B (ou teste dividido):

  1. Decida qual posição do CTA testar e crie um design alternativo
  2. Mostre a variante para 50% dos visitantes e o design original para os outros 50%
  3. Implemente o design que gera a melhor taxa de conversão

Exemplos de websites Above the fold

Estes exemplos de conteúdo acima da dobra (ATF) demonstram as melhores práticas em diferentes tipos de sites. Use-os como inspiração ao criar seu próprio layout ATF.

Lush

Assim que um visitante chega à página inicial da Lush, ele é recebido com uma foto diferente e atraente de um produto para a campanha do Dia das Mães da marca.

Página inicial da Lush

Os links aparecem sobre a imagem de fundo, e não em uma barra de navegação padrão. Isso mantém o cabeçalho do site limpo e focado em uma promoção específica. Uma função de busca no cabeçalho ajuda os consumidores a encontrarem rapidamente o que precisam.

Indicadores circulares à direita mostram que há mais para ser visto abaixo da dobra.

Kombu

A página de produto da Kombu é simples, mas eficaz, por assumir que a maioria dos visitantes já conhece o produto e está pronta para comprar.

O design acima da dobra enfatiza o botão “adicionar ao carrinho” em um fundo de alto contraste.

Site da Kombu

O layout minimalista remove distrações e foca em aumentar as conversões.

Um pequeno prompt de “Role” no canto convida os usuários a aprenderem mais, caso queiram.

Leia mais: 17 Exemplos Inspiradores de Páginas de Produtos (+ Boas Práticas para a Sua)

ESPN

A página inicial desktop da ESPN contém muitos anúncios, mas continua dentro dos padrões de anúncios recomendados.

Site da ESPN

Não há anúncios pop-up, nem vídeos de anúncios em reprodução automática com som, e nem anúncios fixos grandes.

Uma barra de “próximos eventos” aparece na parte superior da maioria das páginas. Ela atualiza automaticamente para o esporte em destaque.

Esse recurso mostra informações-chave imediatamente e mantém os usuários no site.

Um vídeo em reprodução automática com o som mutado acima da dobra chama a atenção e incentiva a rolagem, alinhando-se com melhores diretrizes de anúncios.

Smile Direct Club

A página inicial do Smile Direct Club aborda a principal preocupação do seu público-alvo, exibindo informações de preços no banner acima da dobra, no título e na descrição.

site do Smile Direct Club

Ela também contém uma imagem do produto e o logotipo de um prêmio para gerar confiança. As avaliações do Trustpilot reforçam a credibilidade da marca.

Note que o botão CTA aparece duas vezes acima da dobra (“Sou um candidato?”). Os usuários sabem exatamente qual passo dar a seguir.

Mais informações estão acessíveis através da barra de navegação ou da funcionalidade de chat ao vivo no canto.

Nordstrom

As páginas de categoria da Nordstrom têm vários elementos de navegação acima da dobra.

As abas para as subcategorias de produtos proporcionam uma sensação imediata de variedade.

Enquanto isso, as opções de filtragem e ordenação impedem que os usuários se sintam sobrecarregados.

site da Nordstrom

Essa abordagem equilibrada ajuda os compradores a encontrarem o produto certo sem uma pesquisa extensa.

Airbnb

A página inicial, focada em viagens do Airbnb, tem ferramentas essenciais de navegação acima da dobra. Ícones ajudam os usuários a visualizar as opções de acomodação.

O layout dedica bastante espaço a um conjunto em destaque com imagens atraentes.

Cada prévia destaca detalhes cruciais das acomodações, como avaliações, localização e preço.

site do Airbnb

Quando um usuário faz uma pesquisa, os principais resultados aparecem acima da dobra. Também há um mapa tanto na versão desktop quanto mobile, uma vez que a localização é importante para os viajantes.

mapas do Airbnb

Faça melhorias com testes A/B

Ao atualizar o conteúdo acima da dobra, compare métricas-chave antes e depois para confirmar se houve um impacto positivo. Melhor ainda, use testes A/B para comparar dois designs Above the fold:

  1. Crie uma nova versão do seu conteúdo Above the fold (conhecida como variante)
  2. Exiba a versão original para metade dos usuários e a variante à outra metade
  3. Avalie métricas-chave ao longo de um determinado tempo
  4. Implemente o design que tiver melhor desempenho

O aplicativo SplitSignal permite que você execute esses testes sem necessidade de codificação ou especialização em ciência de dados.

Você pode mensurar o efeito no tráfego orgânico e outras métricas para ver qual design Above the fold tem o melhor desempenho.

Compartilhar
Author Photo

Rachel is a Senior Content Writer with 12+ years‘ experience in content marketing and SEO. In a previous role as Head of Content at a digital marketing agency, Rachel developed and executed search-driven content strategies for a diverse range of clients, including global ecommerce brands and local B2B companies. She later transitioned to an in-house role at an SaaS startup, where she focused on scaling content operations and driving organic growth.

Author Photo
Rachel Handley
Rachel is a Senior Content Writer with 12+ years‘ experience in content marketing and SEO. She has worked agency-side, developing and executing content strategies for a wide range of brands, and in-house, driving organic growth for a SaaS startup.
Compartilhar

Mais sobre isso