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.”
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:
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.
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.
Um cabeçalho inclui geralmente o logotipo da marca, que linka para a 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.
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.
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
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.
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:
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.
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).
Você também verá ideias relacionadas a:
- Tags de título: títulos de páginas que podem aparecer nos resultados de busca
- Meta descrições: descrições que podem aparecer nos resultados de busca
- Palavras-chave semânticas: termos conceitualmente relacionados
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.
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.
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.
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".
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:
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.
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 |
| 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 |
| 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
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.
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):
- Decida qual posição do CTA testar e crie um design alternativo
- Mostre a variante para 50% dos visitantes e o design original para os outros 50%
- 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.
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.
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.
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.
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.
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.
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.
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:
- Crie uma nova versão do seu conteúdo Above the fold (conhecida como variante)
- Exiba a versão original para metade dos usuários e a variante à outra metade
- Avalie métricas-chave ao longo de um determinado tempo
- 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.