Tu sitio se ve perfecto en escritorio. En el móvil, es un desastre diminuto e ilegible.
Abres tu sitio en el teléfono y todo está alejado — todo el diseño de escritorio comprimido en una pantalla de 4 pulgadas. El texto es microscópico. Los botones son imposibles de tocar. Los usuarios pellizcan y hacen zoom desesperadamente.
La solución es una línea de HTML:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Sin esta etiqueta, los navegadores móviles asumen que tu página está diseñada para una pantalla de escritorio (normalmente 980px) y la reducen para que quepa. Aunque hayas escrito CSS responsive perfecto, no se activará sin la etiqueta viewport.
Por qué esto importa para el SEO
Indexación mobile-first. Google usa la versión móvil de tu sitio como la versión principal para indexación y posicionamiento. Si tu experiencia móvil está rota, tu posicionamiento se resiente — incluso en búsquedas de escritorio.
Core Web Vitals. Una página sin etiqueta viewport probablemente fallará en las mediciones de CLS (Cumulative Layout Shift) porque el navegador tiene que reorganizar el diseño.
Métricas de experiencia de usuario. Texto diminuto y botones que no se pueden tocar significan rebotes inmediatos. Altas tasas de rebote le señalan a Google que los usuarios no encuentran lo que buscan.
Qué hace la etiqueta viewport
La etiqueta viewport le dice al navegador: "Esta página está diseñada para móvil. Usa el ancho real de la pantalla del dispositivo, no asumas que es un escritorio."
La implementación estándar:
<meta name="viewport" content="width=device-width, initial-scale=1" />
width=device-width— Establece el ancho del viewport al ancho de pantalla del dispositivoinitial-scale=1— Establece el zoom inicial al 100%
Eso es todo. Una etiqueta, colocada en el <head> de cada página.
Problemas habituales del viewport
| Problema | Qué sucede |
|---|---|
| No hay etiqueta viewport | El navegador renderiza a ancho de escritorio, todo se ve diminuto |
width establecido a un valor fijo en píxeles | La página no se adapta a diferentes tamaños de pantalla |
maximum-scale=1 o user-scalable=no | Impide que los usuarios hagan zoom — problema de accesibilidad |
| Etiqueta viewport presente pero el CSS no es responsive | La etiqueta sola no hace un sitio apto para móvil |
Una nota sobre accesibilidad
Evita user-scalable=no y maximum-scale=1. Estas propiedades impiden que los usuarios hagan zoom, lo cual es un problema para personas con baja visión. Muchas directrices de accesibilidad (WCAG) requieren que los usuarios puedan hacer zoom hasta al menos un 200%.
Cómo verificar las etiquetas viewport en todo tu sitio
La mayoría de los sitios modernos tienen esto bien resuelto, pero vale la pena verificarlo — especialmente en páginas antiguas o páginas de diferentes plantillas. Una auditoría debería:
- Comprobar cada página en busca de la presencia de una etiqueta viewport
- Señalar páginas sin etiqueta viewport
- Detectar configuraciones problemáticas del viewport (ancho fijo, zoom deshabilitado)
- Verificar que la etiqueta esté en el
<head>, no en el<body>
Kaitico comprueba la meta etiqueta viewport en cada página rastreada, señalando etiquetas faltantes o mal configuradas para que tu experiencia móvil se mantenga intacta.