No mundo do design, “above the fold” refere-se à parte de uma página que o usuário vê assim que a acessa, sem rolar a tela.
Embora o conceito tenha ganhado novas definição nos últimos anos, as informações que aparecem na parte superior das páginas do seu site podem afetar a experiência do usuário, a taxa de rejeição e até mesmo seu SEO.
O que significa “above the fold”?
Above the fold já se referiu às matérias que eram apresentadas acima da dobra de um jornal. Os editores colocavam histórias mais importantes e atraentes no topo da página para atrair a atenção dos leitores e também para que eles não tivessem que abrir seus jornais para ler todo o material.
Com o conteúdo digital, a ideia é a mesma. Quando alguém acessa seu site, o conteúdo acima da dobra é o que eles veem quando a acessam pela primeira vez, sem precisar rolar para baixo.
Por norma, um bom conteúdo above the fold deve incluir links internos para outras páginas do seu site e deve ser otimizado para SEO. É importante informar os usuários sobre o conteúdo da página, usando recursos como imagens chamativas e uma tag H1 atraente.
No exemplo abaixo, esta página da Tok&Stok é claramente sobre itens para a sala de jantar. Podemos ver um título bem destacado, uma breve descrição e um subtítulo destacando as ofertas da loja.
Se um usuário chegasse a esta página e não estivesse procurando móveis ou itens decorativos para sua sala de jantar, saberia imediatamente que esta página não atende seus interesses.
Agora, digamos que um usuário acesse a página abaixo. Logo à primeira vista, a pessoa sabe que essa página é sobre notebooks. Mais uma vez, vemos um título claro, em negrito, e logo em sequência dois CTAs: um destacando produtos Lenovo e outro chamando para ofertas da “Semana Tech”.
Por que o conteúdo acima da dobra é importante?
O conteúdo above the fold é a primeira coisa que os usuários veem quando abrem uma página de um site. Se você puder mostrar ao usuário que ele está em uma página que corresponde à sua intenção de busca, é menos provável que ele volte para a SERP e clique em algum link da concorrência.
Se você exibir anúncios em banner para uma campanha, o espaço acima da dobra é um importantíssimo para aumentar as visualizações. Quanto mais para baixo na página, menor a possibilidade de que os usuários percebam esses anúncios.
Considerações para dispositivos móveis e computadores
Com o aumento do uso de dispositivos móveis, o padrão above the fold mudou. Atualmente, os dispositivos variam em tamanho e resolução, portanto, não há uma dobra "tamanho único" para qualquer site.
Mesmo assim, ainda é importante seguir as boas práticas para otimização do conteúdo above the fold para manter uma boa velocidade de carregamento da página em todos os dispositivos. Essa métrica é um fator essencial para a classificação do seu site, sobretudo após a atualização do Core Web Vitals do Google.
Use design responsivo ao criar suas páginas. Certifique-se de que seu conteúdo, layouts e imagens se encaixem na maioria das telas e crie conteúdo above the fold considerando a navegação no celular.
Como o conteúdo above the fold afeta o SEO?
O conteúdo acima da dobra é indiscutivelmente a área da página com maior visibilidade. Usuários e bots dos mecanismos de pesquisa usam esse espaço para entender a página e o restante do conteúdo que ela traz. Um conteúdo ruim above the fold pode levar a um aumento na taxa de rejeição, afetando negativamente seu SEO.
Um copy de qualidade, boa formatação e CTAs funcionam bem acima da dobra, mas não sobrecarregam o espaço. Vale lembrar que o Google penaliza sites que exageram nos anúncios ou cometem excesso de palavras-chave nessa área.
Conteúdo acima da dobra e Core Web Vitals
A atualização Core Web Vitals do algoritmo do Google deu ênfase à velocidade de carregamento da página e à experiência do usuário. Como geralmente é a primeira coisa a carregar em um site, o conteúdo above the fold tornou-se uma métrica importante do Core Web Vitals.
Leia mais: O que é Core Web Vitals e como se relaciona com SEO
O Largest Contentful Paint (LCP) pontua quanto tempo leva para carregar todo o conteúdo acima da dobra. Qualquer resultado abaixo de 2,5 segundos é considerado uma boa pontuação.
Para evitar tempo de carregamento de página muito longo, ajuste o CSS e o Javascript. Para isso, faça o seguinte:
- Implementação de CSS Crítico: “Critical CSS” é uma técnica que coloca CSS para conteúdo above the fold na tag <head>. Adicione apenas o CSS necessário para carregar todo o conteúdo acima da dobra, para renderizá-lo para o usuário o mais rápido possível.
- Pré-carregamento das imagens principais: as imagens principais (ou “hero images”) são o elemento above the fold mais chamativo do conteúdo. Otimizá-las ajuda a melhorar a velocidade de carregamento da página. Use “link rel=preload” para diminuir os tempos de carregamento das imagens carregadas com CSS ou JS.
Medindo os Core Web Vitals do seu site
À medida que você cria conteúdo acima da dobra, é importante testar a velocidade de carregamento da página e os Core Web Vitals. A ferramenta Auditoria do site, da Semrush, ajuda você a entender rapidamente as pontuações de CWV do seu site e identificar quaisquer problemas que afetam a velocidade.
Use a ferramenta para auditar o desempenho do seu site. O relatório Core Web Vitals traz suas pontuações do Google Lighthouse:
Revise o relatório Desempenho para visualizar a velocidade média de carregamento da página e obter uma visão geral da performance do seu site. A ferramenta indica se há problemas que possam estar afetando o tempo de carregamento e fornece sugestões para corrigi-los:
Leia mais: Como fazer uma auditoria de SEO em 18 passos
Como otimizar o conteúdo above the fold
Certifique-se de que qualquer conteúdo acima da dobra consiga engajar o usuário e fornecer informação aos bots dos mecanismos de pesquisa.
Se um usuário acessar sua página e ficar confuso ou não entender o que aquela página aborda, ele retornará à SERP. Use seu conteúdo above the fold para atrair a atenção dos visitantes.
Uma tag H1 otimizada esclarece o que ele verá na página e o ajuda a decidir se seu conteúdo o interessa ou não.
Elementos visuais ajudam a chamar a atenção do usuário, o mantêm na página por mais tempo e indicam que o conteúdo pode ser útil. Um site de e-commerce, por exemplo, pode incluir hero images e uma frase chamariz para seu produto ou serviço:
Use CTAs acima da dobra com moderação. Cada chamada deve incluir uma ação direta (“Compre”, “Reserve”, “Garanta” etc.) que indique aos usuários o que você deseja que eles façam.
Se você quer que eles entrem em contato com a sua empresa, inclua botões nos que eles possam ler e clicar facilmente. Endereços de e-mail e números de telefone são ideais, especialmente para quem está navegando em dispositivos móveis.
Acima da dobra também é um ótimo lugar para apresentar links internos para outras partes do seu site. Isso ajuda a acelerar a navegação e melhorar a experiência do usuário – ambos elementos que impactam positivamente o SEO.
Abaixo, temos um exemplo de conteúdo above the fold de uma clínica familiar. Mas como sabemos que é uma clínica familiar? Há uma imagem de uma família e um logotipo em forma cruz vermelha no canto superior esquerdo (símbolo associado à saúde).
Ainda acima da dobra, há um botão destacado para marcar uma consulta, além da opção de atendimento por WhatsApp. Também há links internos para navegar às principais áreas do site, como os convênios aceitos e as especialidades disponibilizadas.
Todas as informações são apresentadas de uma forma fácil de seguir e que não sobrecarrega o usuário.
Conclusões
O conteúdo above the fold é a primeira coisa que os usuários veem quando acessam uma página do seu site. Então você precisa deixar uma boa primeira impressão e atrair a atenção dos visitantes.
Use tags H1, elementos visuais e uma frase chamariz para engajar as pessoas. Lembre-se, porém, de que muito conteúdo pode confundir o usuário e diminuir a velocidade de carregamento da página.
Por isso, otimize suas imagens, use técnicas que garantam o carregamento rápido e use linguagem simples para comunicar o assunto de cada página.
Com alguns ajustes no seu conteúdo acima da dobra, você tem grandes chances de melhorar sua classificação no Google.