# Viewport / móvil _Fuente: https://seomatrix.ai/es/tools/viewport-check/_ --- ## Qué hace La etiqueta meta viewport indica a los navegadores móviles cómo escalar la página: la línea es el estándar del diseño responsive. Esta herramienta revisa en una URL la etiqueta viewport, el theme-color y cualquier bloqueo de zoom, porque Google indexa primero la versión móvil del sitio: sin un viewport correcto, la página se renderiza a ancho de escritorio en el móvil, dañando el posicionamiento y la legibilidad. ## Qué revisa - **Etiqueta meta viewport** — La etiqueta del que controla cómo se ajusta la página a la pantalla; sin ella, el navegador móvil asume un lienzo de escritorio de ~980px y encoge todo el contenido. - **width=device-width** — El valor que vincula el ancho del diseño al ancho real de la pantalla del dispositivo — la base del diseño responsive y del renderizado mobile-first. - **initial-scale=1** — Fija el zoom inicial en una proporción 1:1 para que la página cargue a tamaño real, en vez de aparecer acercada o alejada. - **Bloqueo de zoom (a11y)** — user-scalable=no o un maximum-scale bajo desactivan el zoom táctil, un fallo de accesibilidad según la WCAG 1.4.4 que señalan Lighthouse y Google. - **Meta theme-color** — Define el color de la barra de herramientas y de direcciones del navegador móvil — una señal pequeña pero real de UX móvil y coherencia de marca. - **Indexación mobile-first** — Google rastrea y clasifica principalmente el renderizado móvil de la página, así que un viewport roto degrada directamente la versión que realmente se indexa. ## Cómo usarla 1. Pega la URL de tu página y ejecuta la comprobación — la herramienta descarga el HTML en vivo y lee del las etiquetas viewport, theme-color y los atributos de zoom. 2. Revisa los problemas señalados: una etiqueta viewport ausente, valores de ancho no responsive o un bloqueo de zoom que incumple la accesibilidad. 3. Corrige la etiqueta viewport en tu plantilla (usa width=device-width, initial-scale=1 y elimina user-scalable=no) y vuelve a ejecutar para confirmar que pasa. ## Preguntas ### ¿Qué es la etiqueta meta viewport y la necesito? La etiqueta meta viewport indica a los navegadores móviles que rendericen la página al ancho real del dispositivo en lugar de un lienzo de escritorio de ~980px. Todo sitio responsive la necesita: sin , el móvil muestra un diseño encogido y difícil de leer. ### ¿Perjudica al SEO que falte la etiqueta viewport? Sí. Google usa indexación mobile-first, por lo que clasifica el renderizado móvil de la página; sin un viewport correcto, esa versión se ve rota e inutilizable, lo que debilita el posicionamiento y la puntuación de usabilidad móvil. ### ¿Es malo desactivar el zoom con user-scalable=no? Sí — bloquear el zoom táctil incumple la accesibilidad según la WCAG 1.4.4 y lo marca Lighthouse. Quienes necesitan ampliar el texto no pueden hacerlo, así que deja el zoom activado y evita un maximum-scale por debajo de 5. ### ¿Para qué sirve la etiqueta theme-color? theme-color define el color de la barra de herramientas y de direcciones en los navegadores móviles compatibles, dejando que la interfaz combine con tu marca. No influye directamente en el posicionamiento, pero es un retoque sencillo para la UX móvil.