Ir para o conteúdo
Mera News

Guia para editoras, capítulo 2

Estrutura da página no celular e no computador

Última revisão em novembro de 2026

Quem lê decide rápido se vale a pena ficar em uma página de notícias. A manchete deve aparecer depressa, a página deve ficar parada e cada toque deve ter uma resposta. O Google também indexa a versão móvel das suas páginas, então o layout para celular é a versão que conta para a Busca.

Os números a buscar

As Core Web Vitals do Google dão três medidas e uma meta clara para cada uma.

MétricaO que medeBom
Largest Contentful Paint (LCP)Carregamento2,5 segundos ou menos
Interaction to Next Paint (INP)Resposta a ações do usuário200 milissegundos ou menos
Cumulative Layout Shift (CLS)Estabilidade visual0,1 ou menos

Meça o percentil 75 dos carregamentos de página, contando celular e computador separadamente. Uma página passa quando as três métricas atingem a meta nesse percentil.

Use dados de campo de visitas reais: o relatório Core Web Vitals do Search Console, o PageSpeed Insights ou o Chrome User Experience Report. O Lighthouse é útil em laboratório, mas não consegue medir o INP e informa o Total Blocking Time no lugar dele.

O Google diz que não existe um único sinal de experiência da página. Diz, sim, que as Core Web Vitals são usadas pelos seus sistemas de classificação e que os outros aspectos da experiência da página não ajudam diretamente um site a ranquear, embora ainda possam torná-lo melhor de usar.

Uma página para as duas telas

O Google recomenda o design responsivo como o padrão mais fácil de implementar e manter. O mesmo HTML atende a todos os dispositivos, então conteúdo e metadados coincidem sem trabalho extra. Se você mantém páginas móveis separadas, deixe estes itens idênticos aos do computador:

  • Conteúdo principal
  • Títulos
  • Dados estruturados
  • Meta tags de robôs (um noindex esquecido pode manter uma página móvel fora do índice)

Comece pela tag de viewport e depois confira se a página se reorganiza em 320 pixels CSS de largura, sem rolagem lateral.

<meta name="viewport" content="width=device-width, initial-scale=1">

No celular

  • Coloque primeiro a manchete, a assinatura do autor e a data visível, depois a imagem de abertura ou o primeiro parágrafo.
  • Mantenha o texto do artigo no HTML. Um botão “continuar lendo” que busca o resto ao toque pode esconder esse texto do Google, que não clica, não desliza nem digita.
  • Faça alvos de toque de pelo menos 24 por 24 pixels CSS, o mínimo do WCAG 2.2 AA. Para menus e botões de fechar, mire em 44 por 44, o nível AAA.
  • Mantenha um cabeçalho fixo curto e defina scroll-padding-top com a altura dele, para que um link com foco nunca fique escondido atrás.

No computador

  • Mantenha o texto do corpo em 80 caracteres por linha ou menos, ou 40 para chinês, japonês e coreano. Essa é a diretriz AAA do WCAG, e ajuda todos os leitores.
  • Use espaçamento entre linhas de pelo menos 1,5 dentro dos parágrafos.
  • Deixe o conteúdo de apoio em uma barra lateral que não mova o artigo quando carrega.

Carregamento mais rápido

O maior elemento de uma página de notícias costuma ser a imagem de abertura. Trate-a como a requisição mais importante da página.

<img
  src="/images/lead-1200.jpg"
  srcset="/images/lead-800.jpg 800w, /images/lead-1200.jpg 1200w"
  sizes="(min-width: 768px) 720px, 100vw"
  width="1200"
  height="675"
  alt="Describe what the photo shows"
  fetchpriority="high">
  • Nunca aplique carregamento tardio (lazy loading) à imagem do LCP.
  • Coloque-a no HTML inicial, para que o navegador a encontre antes de qualquer script rodar.
  • Use fetchpriority="high" em no máximo uma ou duas imagens. Mais do que isso deixa de ajudar.
  • Use loading="lazy" apenas em imagens e iframes fora da primeira tela.
  • Reduza redirecionamentos e mantenha a página armazenável em cache. Parâmetros de URL únicos podem mandar as requisições de volta ao servidor de origem em vez da CDN.

Uma página que fica parada

  • Defina width e height em toda imagem e todo vídeo, e mantenha height: auto no CSS.
  • Use a mesma proporção em todas as imagens de um srcset.
  • Reserve espaço para anúncios, incorporações e iframes antes de carregarem. O capítulo sobre anúncios trata dos tamanhos de espaço.
  • Sobreponha avisos de cookies e pedidos de cadastro, ou reserve espaço para eles, para que não empurrem o artigo para baixo.
  • Use font-display: optional ou uma fonte substituta ajustada às métricas da sua fonte da web.
  • Anime com transform. Animar top ou left causa mudanças de layout.

Respostas rápidas

O tempo total de interação tem três partes: a espera antes de o seu código rodar, o seu código e a renderização que vem depois. Qualquer tarefa com mais de 50 milissegundos é uma tarefa longa.

  • Faça o mínimo possível nos callbacks de eventos. Atualize a tela primeiro e adie o resto.
  • Divida trabalhos longos com scheduler.yield() e recorra a setTimeout nos navegadores que não o suportam.
  • Mantenha o DOM pequeno. Listas longas de artigos podem usar content-visibility para renderizar mais tarde os itens fora da tela.
  • Lembre-se de que cada iframe tem a sua própria thread principal, então confira de qual frame veio uma interação lenta.

Páginas longas e rolagem infinita

Se uma página de seção rola sem fim, dê a cada bloco a sua própria URL permanente, com um número de página absoluto como ?page=12, e ligue essas páginas em sequência. Atualize o endereço com a History API conforme o leitor avança. O Google não rola nem clica, então o conteúdo carregado sob demanda deve carregar quando entra na área visível, sem exigir nenhuma ação.

Lista de verificação

  • Confira LCP, INP e CLS no Search Console, para celular e computador separadamente.
  • Abra o seu modelo de artigo mais acessado em um celular e confirme que a manchete e a data estão na primeira tela.
  • Confirme que o texto completo do artigo está no HTML enviado pelo servidor.
  • Compare celular e computador quanto a conteúdo, títulos, dados estruturados e tags de robôs.
  • Remova loading="lazy" da imagem de abertura e adicione fetchpriority="high".
  • Adicione width e height a todas as imagens e vídeos.
  • Reserve espaço para todo anúncio, incorporação e banner.
  • Defina scroll-padding-top de acordo com o seu cabeçalho fixo.
  • Teste a página em 320 pixels CSS de largura.
  • Dê a cada bloco de uma página de rolagem infinita a sua própria URL.

Fontes