Falta la meta etiqueta Viewport — Esencial para páginas adaptadas a móvil

¿Qué es la meta etiqueta viewport?

La meta etiqueta viewport controla cómo se muestra tu página en dispositivos móviles. Sin ella, los navegadores móviles renderizarán tu página con un ancho de escritorio (normalmente 980px) y luego la reducirán para ajustarla a la pantalla, haciendo que el texto sea diminuto e ilegible.

¿Por qué es crítica?

Indexación mobile-first

Desde 2019, Google utiliza la indexación mobile-first, lo que significa que usa principalmente la versión móvil de tu página para el posicionamiento. Sin una etiqueta viewport adecuada:

Google considera que tu página no es mobile-friendly
Tu posicionamiento en resultados de búsqueda móvil se verá afectado
No pasarás el test de compatibilidad móvil de Google

Experiencia de usuario

Más del 60 % del tráfico web proviene de dispositivos móviles
Sin la etiqueta viewport, los usuarios deben pellizcar y hacer zoom para leer el contenido
Esto provoca altas tasas de rebote y baja interacción

Core Web Vitals

La etiqueta viewport afecta al Cumulative Layout Shift (CLS), una de las Core Web Vitals de Google. Sin ella, el diseño se desplazará cuando el navegador calcule el viewport real, perjudicando tu puntuación de CLS.

Cómo solucionarlo

Añade esta etiqueta dentro de tu <head>:

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

Entendiendo los valores

width=device-width — Establece el ancho del viewport igual al ancho de la pantalla del dispositivo
initial-scale=1 — Establece el nivel de zoom inicial al 100 %

Variaciones comunes

<!-- Estándar (recomendado) -->
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Impedir zoom del usuario (usar con precaución — perjudica la accesibilidad) -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

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

Buenas prácticas

Inclúyela siempre — Todas las páginas deberían tener una etiqueta viewport
No deshabilites el zoom — user-scalable=no perjudica la accesibilidad
Usa device-width — Evita establecer un ancho fijo en píxeles
Combínala con CSS responsive — La etiqueta viewport por sí sola no basta; tu CSS también debe ser responsive
Colócala pronto en el <head> — El navegador la necesita antes de renderizar