Por qué importa
Google usa la versión móvil de tu web para indexarla y posicionarla (lo llama indexación centrada en dispositivos móviles, o “mobile-first”). Una página sin viewport obliga a hacer zoom y a desplazarse de lado, y los botones quedan demasiado pequeños para pulsarlos. Aunque tu diseño sea adaptable (responsive), sin esta etiqueta el móvil no lo aplica.
El otro fallo habitual es el contrario: una viewport que impide ampliar la página (user-scalable=no o maximum-scale=1). Mucha gente necesita hacer zoom para leer un precio o una letra pequeña, y las pautas de accesibilidad WCAG piden que el texto pueda ampliarse hasta el 200 %. Bloquearlo no mejora el diseño y deja fuera a esas personas.
Cómo lo comprueba Posiciona
Leemos la etiqueta <meta name="viewport">. Si no existe, la puntuación es 0. Si existe, partimos de 100 y restamos 30 si falta width=device-width; 15 si falta initial-scale (o 10 si no vale 1); 20 si bloquea el zoom con user-scalable=no, y 15 si maximum-scale es menor que 2. Es uno de los checks que más pesan en la nota de SEO.
En la nota de SEO esta comprobación cuenta como “imprescindible” (peso 5 de 5).
Cómo solucionarlo
Abre el código fuente de tu página (Ctrl+U) y busca
name="viewport"dentro del<head>.Si no está, añade exactamente
<meta name="viewport" content="width=device-width, initial-scale=1">dentro del<head>.Si está, quita
user-scalable=noymaximum-scale, o sube este último a 5 o más si tu tema lo necesita por algún motivo.Separa las directivas con comas, no con punto y coma: es el formato del estándar y el que interpretamos nosotros.
Que la etiqueta exista no basta: el diseño tiene que ser adaptable de verdad. Abre la web en tu móvil o con el modo de dispositivo de las herramientas para desarrolladores de Chrome (F12) y comprueba que no hay desplazamiento lateral.
<meta name="viewport" content="width=device-width, initial-scale=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">En WordPress
- WordPress añade la viewport automáticamente en los temas de bloques, y casi todos los temas clásicos la incluyen en
header.php. Si falta, lo más probable es que el tema sea antiguo y no adaptable: añadir la etiqueta no bastará. - Si la viewport bloquea el zoom, busca
user-scalableenheader.phpde tu tema y corrígelo desde un tema hijo, para que no vuelva con las actualizaciones.
En Shopify
- Los temas de la tienda de temas de Shopify incluyen la viewport. Si falta o bloquea el zoom, edítala en
theme.liquiddesde Tienda online → Temas → Editar código y déjala como en el ejemplo. - Comprueba en el código fuente de la tienda que solo hay una etiqueta viewport. Si hay dos, localiza la segunda: a veces la añade una app o un fragmento de código antiguo.
Preguntas frecuentes
¿Por qué hay webs que ponen user-scalable=no?
Sobre todo por costumbre: hace años evitaba el zoom automático del iPhone al tocar un campo de formulario. Hoy hay soluciones mejores, como usar un tamaño de letra de al menos 16 píxeles en los campos, y Safari en iPhone ignora esa directiva desde hace años por accesibilidad. En los navegadores que sí la respetan, solo consigue impedir que tus visitantes amplíen.
¿Tener la meta viewport hace que mi web sea adaptable?
No por sí sola. La etiqueta le dice al navegador que use el ancho real de la pantalla, pero el diseño tiene que estar preparado para ese ancho con CSS adaptable (media queries, rejillas flexibles). Si la pones en una web pensada solo para escritorio, lo verás todo cortado o descolocado. Es la condición necesaria, no la suficiente.
Guías relacionadas
- Tamaño de botones y enlaces en móvilQue botones, enlaces y campos tengan tamaño o separación suficiente para tocarlos en móvil (24×24 px).
- Puntuación de rendimientoLa nota de rendimiento en móvil de Google PageSpeed Insights (Lighthouse), de 0 a 100.
- AMPSi la página es AMP o enlaza a una versión AMP. Es informativo: no suma ni resta puntos.