Adaptar a página à tela do celular
Descrição
Este critério verifica se a página é exibida corretamente em um celular. O iPand a carrega em um Pixel 7 simulado, com 412 px de largura, e verifica quatro pontos: a tag viewport declara width=device-width sem bloquear o zoom, a página não ultrapassa a largura da tela, pelo menos 60% do texto visível tem 12 px ou mais, e o layout se mexe pouco durante o carregamento (CLS de no máximo 0,1).
Por que isso importa para as IAs
O Google indexa a versão para celular das suas páginas, rastreada pelo robô do Google para smartphones, e tanto o AI Overviews quanto o AI Mode se baseiam nesse índice. O Google também inclui a exibição adaptada ao celular entre os elementos de uma boa experiência na página, que ele recomenda para os seus recursos de IA.
- Sem a tag viewport, o celular mostra a página como uma tela de computador reduzida: texto minúsculo e zoom obrigatório.
- Bloquear o zoom (user-scalable=no) impede que pessoas com baixa visão leiam a página; as regras de acessibilidade WCAG exigem uma ampliação de pelo menos duas vezes.
- Um conteúdo que se move durante o carregamento faz a pessoa tocar no lugar errado: o CLS mede esses deslocamentos, e o web.dev o considera bom quando é de no máximo 0,1.
Como corrigir
- 1 Declare a janela de visualização Coloque no cabeçalho da página a tag <meta name="viewport" content="width=device-width, initial-scale=1">. Não adicione user-scalable=no nem um maximum-scale menor que 2: os seus visitantes precisam poder dar zoom. Este é o ponto que mais pesa no critério.
- 2 Elimine o transbordamento horizontal A página não deve ser mais larga que a tela, ou seja, 412 px para o iPand. Procure os elementos de largura fixa: imagens, tabelas, vídeos incorporados, blocos dimensionados em pixels. Dê às imagens max-width: 100% e prefira layouts flexíveis (Flexbox, Grid) a larguras fixas.
- 3 Aumente o texto Pelo menos 60% do texto visível deve ter 12 px ou mais. Mantenha o corpo do texto perto de 16 px, o tamanho padrão dos navegadores, e confira avisos legais, menus e rodapés, que muitas vezes ficam pequenos demais.
- 4 Reserve o espaço das imagens e dos blocos incorporados O CLS não deve passar de 0,1. Informe width e height nas imagens e nos vídeos, reserve a altura de banners, anúncios e widgets antes que eles carreguem, e não insira conteúdo acima do que já está sendo exibido.
Pontos-chave
O Google lê a versão para celular da sua página. Declare a janela de visualização sem bloquear o zoom, evite o transbordamento e mantenha o texto legível e o layout estável.
