Meta tag viewport ausente — Essencial para páginas mobile-friendly

O que é a meta tag viewport?

A meta tag viewport controla como a página é exibida em dispositivos móveis. Sem ela, os navegadores mobile renderizam a página na largura de desktop (tipicamente 980px) e depois reduzem a escala para caber na tela, deixando o texto minúsculo e inutilizável.

Por que é crítico?

Indexação mobile-first

Desde 2019, o Google usa indexação mobile-first — usa principalmente a versão mobile da página para ranking. Sem uma tag viewport adequada:

O Google considera a página não mobile-friendly
Seu ranking nos resultados de busca mobile vai sofrer
Você falha no Mobile-Friendly Test do Google

Experiência do usuário

Mais de 60% do tráfego web vem de dispositivos móveis
Sem a tag viewport, os usuários precisam pinçar e dar zoom para ler o conteúdo
Isso gera altas taxas de rejeição e baixo engajamento

Core Web Vitals

A tag viewport afeta o Cumulative Layout Shift (CLS), um dos Core Web Vitals do Google. Sem ela, o layout pode se deslocar quando o navegador calcula o viewport real, prejudicando a pontuação de CLS.

Como corrigir

Adicione esta tag dentro do seu <head>:

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

Entendendo os valores

width=device-width — Define a largura do viewport como a largura da tela do dispositivo
initial-scale=1 — Define o zoom inicial em 100%

Variações comuns

<!-- Standard (recommended) -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Prevent user zoom (use sparingly — hurts accessibility) -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<!-- Allow slight zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />

Boas práticas

Sempre inclua — Toda página deve ter uma tag viewport
Não desative o zoom — user-scalable=no prejudica a acessibilidade
Use device-width — Evite definir uma largura fixa em pixels
Combine com CSS responsivo — A tag viewport sozinha não basta; o CSS também precisa ser responsivo
Coloque cedo no <head> — O navegador precisa dela antes de renderizar