Mobile-first e o viewport

Módulo 4: Velocidade, dispositivos móveis e https · Tempo de leitura: 10 minutos

Objetivo de aprendizagem: No final desta lição, conseguirá explicar o que significa o mobile-first indexing, reconhecer e escrever uma configuração correta do viewport e evitar as armadilhas que fazem com que a sua página móvel mostre menos conteúdo ou funcione pior do que a sua página para computador.

Conceitos chave: mobile-first indexing, crawler para smartphone, design responsivo, dynamic serving, site móvel separado, <meta name="viewport">, width=device-width, initial-scale, bloquear o zoom, conteúdo igual, pop-ups intrusivos (interstitials), áreas de toque

O Google vê com um telemóvel

Durante muito tempo, o Google via um website tal como um computador o vê. Isso acabou. Para indexar e classificar, o Google utiliza a versão móvel das suas páginas e obtém-na com o crawler para smartphone do Googlebot. É a isto que se chama mobile-first indexing. Em outubro de 2023, o Google escreveu que a transição estava concluída: para praticamente todos os sites, trata-se agora simplesmente de "indexação". Desde julho de 2024, o Google rastreia com o crawler móvel também os últimos sites que ainda eram visitados com o crawler para computador; o que não for de todo acessível num telemóvel deixa de poder ser indexado.

O que significa isto na prática? O que não estiver na sua página móvel não existe para o Google. Se no telemóvel omitir um texto, uma tabela, o seu horário ou os seus dados estruturados "porque o ecrã é pequeno", o Google também não vê essa parte.

Três formas de construir para dispositivos móveis

Quase todos os construtores de websites modernos e temas de WordPress são responsivos. Um site criado com o AI Builder também é responsivo: uma única página que se adapta. Se tiver um site antigo com uma versão m. separada, a mudança para um design responsivo é muitas vezes a maior melhoria que pode fazer.

O viewport: a linha que faz tudo funcionar

O navegador de um telemóvel não sabe por si só que a sua página foi feita para um ecrã pequeno. Sem instruções, comporta-se como se o ecrã fosse muito mais largo, por exemplo 980 píxeis (o exemplo dado na documentação da MDN), e reduz a página inteira até caber no ecrã. Resultado: texto minúsculo, em que é preciso fazer zoom. Nesse caso, nem um design responsivo funciona, porque o CSS julga que o ecrã é largo.

A solução é uma única linha no <head> de cada página:

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

• width=device-width indica: torne a página tão larga quanto o ecrã do dispositivo. Assim, o seu CSS pode trabalhar com larguras de ecrã.
• initial-scale=1 indica: comece sem aproximar nem afastar.

É exatamente esta a linha que o Lighthouse (a verificação no Chrome e no PageSpeed Insights) recomenda. O Lighthouse reprova uma página se a linha do viewport faltar ou não tiver width=.

O que é melhor não fazer

Alguns sites acrescentam mais coisas:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Com isto, o visitante deixa de poder fazer zoom. Parece arrumado ("o layout mantém-se intacto"), mas para quem vê mal é um obstáculo. A diretriz de acessibilidade WCAG 2.2 exige, no critério de sucesso 1.4.4 (Redimensionar texto, nível AA), que o texto possa ser ampliado até 200 por cento sem perda de conteúdo ou de funcionalidades. A regra de teste oficial do W3C, "Meta viewport allows for zoom", reprova um viewport com user-scalable=no ou com maximum-scale inferior a 2. Por isso, omita esses elementos. (Atualmente, o Safari no iPhone ignora-os por predefinição, mas outros navegadores não.)

Também é errado usar uma largura fixa, como width=1024. O telemóvel volta a comportar-se como se o ecrã tivesse 1.024 píxeis de largura e o seu design responsivo deixa de servir para alguma coisa.

Conteúdo igual no telemóvel e no computador

Na documentação sobre mobile-first indexing, o Google menciona alguns elementos que devem ser iguais em ambas as versões. Num site responsivo isso acontece automaticamente; com dynamic serving e com um site móvel separado, tem de o verificar:

• O próprio conteúdo. No telemóvel, o texto pode estar num bloco expansível ou num separador, mas tem de estar na página.
• O título e a meta descrição (lição 3.1) devem ser equivalentes.
• Os dados estruturados (módulo 5) devem estar em ambas as versões.
• Imagens com os mesmos textos alternativos e com boa qualidade.
• Nenhum conteúdo que só carregue após uma ação. O Google di-lo textualmente: não carregue o conteúdo principal apenas quando o visitante desliza, clica ou escreve; o Googlebot não faz isso.
• O robots.txt não deve bloquear as páginas móveis nem o respetivo CSS, JavaScript e imagens. Sem CSS, o Google não consegue ver o aspeto da página.

Agradável num ecrã pequeno

Alguns pontos que o Google menciona como perguntas para uma boa experiência de página, e que pode verificar no seu próprio telemóvel:

• Texto legível sem fazer zoom.
• Áreas de toque (botões, ligações num menu) suficientemente grandes e não demasiado juntas, para que não se toque por engano no elemento errado.
• Nenhum pop-up intrusivo. O Google escreve que os elementos que bloqueiam o conteúdo (uma janela de newsletter sobre toda a página assim que se entra) irritam os visitantes e prejudicam a confiança, e que dificultam aos motores de pesquisa a compreensão do seu conteúdo. Prefira uma pequena barra. As janelas exigidas por lei, como uma verificação de idade, ficam fora desta diretriz.
• Nenhum deslocamento horizontal: uma imagem ou tabela demasiado larga empurra a página inteira para o lado. Dê às tabelas uma barra de deslocamento própria.

No final de 2023, o Google descontinuou o teste separado "Mobile-Friendly Test" e o relatório Mobile Usability no Search Console. Agora, a verificação faz-se com o seu próprio telemóvel, com a vista móvel das ferramentas de programador do seu navegador e com o Lighthouse ou o PageSpeed Insights (lição 4.3).

Na prática: verificar por si próprio

Abra o seu site no Chrome ou no Firefox no computador, prima F12 e clique no ícone de um telemóvel e de um tablet (barra de ferramentas de dispositivos). Escolha um dispositivo estreito e percorra as suas páginas mais importantes. Esteja atento a texto que fica fora do ecrã, botões sobrepostos e partes que faltam na versão móvel. Depois, veja no código-fonte (Ctrl+U) se a linha do viewport está presente.

O AI Builder coloca automaticamente a linha do viewport width=device-width, initial-scale=1 em cada página. Os temas de WordPress também o fazem, tal como a maioria dos outros construtores de websites. Num site feito à mão ou antigo, vale a pena verificar: é apenas uma linha, mas sem ela nada do seu design móvel funciona.

Resumo

• O Google indexa e classifica a versão móvel das suas páginas; o que lá faltar, o Google não vê.
• O design responsivo é a forma recomendada: um endereço, um HTML.
• Cada página precisa de <meta name="viewport" content="width=device-width, initial-scale=1">.
• Não bloqueie o zoom: nada de user-scalable=no nem de maximum-scale inferior a 2 (WCAG 1.4.4).
• Mantenha o conteúdo, o título, a meta descrição e os dados estruturados iguais no telemóvel e no computador, e evite pop-ups que tapem a página.

Questionário

Exercício

Exercício A4.2: A sua página tem um viewport correto? Introduza o endereço de uma página (por exemplo, a sua página inicial). O programa lê o HTML e verifica se existe exatamente um <meta name="viewport"> no <head> com width=device-width e se o zoom não está bloqueado (user-scalable=no ou maximum-scale inferior a 2). Depois, veja a mesma página na vista móvel do seu navegador. Não tem site próprio? Utilize www.wikipedia.org.

Para saber mais

• Google Search Central, Mobile-first indexing best practices: https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• Google Search Central Blog, Mobile-first indexing has landed (2023): https://developers.google.com/search/blog/2023/10/mobile-first-is-here
• Google Search Central, Avoid intrusive interstitials and dialogs: https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials
• W3C, regra ACT Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, A meta tag viewport: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
• W3C, Understanding SC 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html
• A sua página de internet funciona bem num telemóvel?