Aprende a detectar y corregir los 5 problemas móviles que Google comprueba en tu web: tamaños de fuente, scroll horizontal, intersticiales intrusivos y configuración del viewport. Guía técnica con checklist.
Desde 2019, Google indexa y posiciona las webs a partir de su versión móvil. No de la de escritorio: la móvil. Eso significa que si tu web tiene problemas en pantallas pequeñas, tienes un problema de posicionamiento, aunque en ordenador se vea perfecta.
Las 5 reglas de auditoría móvil que analizamos en este artículo son exactamente las que evalúan herramientas como Google Search Console, Lighthouse y SEOmator. Son verificaciones concretas, con umbrales definidos, y la mayoría se corrigen en pocas horas si sabes dónde mirar.
Este artículo es para ti si tienes una web —propia o de un cliente— y quieres asegurarte de que pasa las comprobaciones móviles básicas que Google aplica a la hora de posicionar. Al final encontrarás un checklist accionable que puedes usar en cualquier auditoría.
Aprende más sobre SEO técnico →
El primer punto de la auditoría móvil verifica que el texto de tu web sea legible sin que el usuario tenga que pellizcar la pantalla para ampliar. Google y Lighthouse establecen 16px como el tamaño mínimo recomendado para el cuerpo de texto en dispositivos móviles.
¿Por qué 16px y no menos? Porque es el tamaño al que la mayoría de navegadores renderizan el texto por defecto, y el que los usuarios esperan leer sin esfuerzo visual. Lighthouse marca como error cualquier fuente inferior a 12px, y Google Search Console puede reportar la página como problemática si una parte significativa del texto resulta demasiado pequeño para leer.
El problema habitual no es que alguien defina deliberadamente una fuente de 10px. El problema es que el CSS usa unidades px en lugar de unidades relativas (rem o em), y al escalar en distintos dispositivos el texto acaba siendo demasiado pequeño.
La solución correcta es definir el tamaño base del documento en 16px en el html y usar rem en el resto de elementos. Así el texto escala de forma proporcional respecto al tamaño base del navegador del usuario, respetando también sus preferencias de accesibilidad.
html {
font-size: 16px;
}
body {
font-size: 1rem; /* 16px */
}
.caption {
font-size: 0.875rem; /* 14px — aceptable */
}Dentro de esta misma regla entra la comprobación de los elementos interactivos. Los botones, enlaces y cualquier elemento que el usuario pulse con el dedo deben tener un área mínima de 48×48 píxeles, con al menos 8px de separación entre ellos. Un botón demasiado pequeño o demasiado pegado a otro provoca pulsaciones erróneas y deteriora la experiencia de usuario, algo que Google pondera negativamente.
Cómo detectarlo: Google Search Console → Usabilidad en dispositivos móviles. También puedes usar Lighthouse (DevTools de Chrome → pestaña Lighthouse → categoría Accesibilidad) o emular un dispositivo móvil en DevTools y revisar los elementos interactivos visualmente.
Esta es la regla que más webs incumplen sin saberlo, y la que apareció como problema en nuestra propia auditoría de escala14.com. El scroll horizontal ocurre cuando algún elemento del HTML tiene un ancho mayor que el viewport del dispositivo, obligando al usuario a desplazarse lateralmente para ver el contenido completo.
Google penaliza este comportamiento porque arruina la experiencia de lectura en móvil: el usuario tiene que mover la pantalla de izquierda a derecha para leer un párrafo, lo cual es una señal clara de que la web no está adaptada a pantallas pequeñas.
Las más frecuentes que detectamos en auditorías son:
width: 800px) que superan el ancho del viewport móvil. Esta fue exactamente la causa del problema detectado en /campamento-base de Escala14: 6 imágenes de artículos con anchura fija en píxeles provocaban scroll horizontal en móvil.position: absolute o position: fixed que tienen un ancho mayor que el viewport y se salen del contenedor padre.Para imágenes, la solución es tan directa como añadir esta regla en el CSS:
img {
max-width: 100%;
height: auto;
}Para tablas con mucho contenido horizontal, envuélvelas en un contenedor con desbordamiento controlado:
.table-wrapper {
overflow-x: auto;
}Para iframes (vídeos embebidos), la técnica más limpia en CSS moderno es usar la propiedad aspect-ratio:
iframe {
width: 100%;
aspect-ratio: 16 / 9;
}Cómo detectarlo: Chrome DevTools → icono de móvil (Toggle device toolbar) → selecciona un dispositivo pequeño (iPhone SE, por ejemplo) → si aparece barra de desplazamiento horizontal, tienes el problema. También puedes buscar en el CSS cualquier regla con unidades fijas en width sin un max-width: 100% como contrapeso.
Desde enero de 2017, Google aplica una penalización específica a las páginas que muestran intersticiales intrusivos en móvil. Un intersticial es cualquier elemento que interrumpe el acceso del usuario al contenido principal: un popup, una superposición a pantalla completa, un banner que ocupa toda la pantalla.
La penalización no afecta al dominio completo; se aplica a nivel de página individual, dentro del algoritmo de mobile-friendly ranking. Si una URL específica muestra un popup que tapa el contenido al cargar, esa URL puede perder posiciones en los resultados de búsqueda móvil.
Google es bastante claro en su documentación sobre este punto. Sí penaliza:
No penaliza (usos considerados legítimos):
Si necesitas mostrar un popup —para capturar leads, por ejemplo— hay formas de hacerlo sin arriesgar el posicionamiento:
Cómo detectarlo: Abre la URL en un móvil real (o en Chrome DevTools con emulación móvil) y observa qué ve el usuario en los primeros 3 segundos. Si el contenido está tapado, tienes un problema.
La etiqueta <meta name="viewport"> es el punto de control fundamental para la adaptación de cualquier web a pantallas móviles. Sin ella, o con una configuración incorrecta, el navegador móvil no sabe cómo renderizar la página y recurre a mostrarla como si fuera una pantalla de escritorio (normalmente a 980px de ancho), encogiéndola para que quepa en la pantalla.
La configuración correcta es:
<meta name="viewport" content="width=device-width, initial-scale=1">Esta línea le dice al navegador dos cosas: que el ancho del viewport debe coincidir con el ancho real del dispositivo (width=device-width), y que la escala inicial debe ser 1:1, sin zoom aplicado al cargar.
width=320: fijar el ancho a 320px era una práctica común hace años, cuando casi todos los móviles tenían esa resolución. Hoy es incorrecto porque los dispositivos tienen anchuras muy diversas.user-scalable=no: deshabilita el zoom del usuario, lo cual es además una violación de accesibilidad (WCAG 1.4.4). Los usuarios con baja visión necesitan poder ampliar el contenido.maximum-scale=1: equivale en la práctica a user-scalable=no en iOS y tiene el mismo problema de accesibilidad.Desde 2019, Google usa el Googlebot para móviles como crawl principal de todas las webs. Esto significa que lo que Google ve, indexa y posiciona es la versión móvil de tu página. Si tu viewport no está configurado correctamente y la versión móvil de tu web es prácticamente inutilizable, estás perjudicando directamente el posicionamiento de todas tus páginas.
Cómo detectarlo: Puedes comprobarlo en Google Search Console → Usabilidad en dispositivos móviles, o ejecutar un análisis con Lighthouse en DevTools (busca la auditoría “Has a viewport meta tag with width or initial-scale”). También puedes simplemente inspeccionar el HTML de tu página y buscar la etiqueta en el <head>.
Esta regla es la menos conocida de las cinco, pero produce errores difíciles de detectar a simple vista. El problema ocurre cuando una página tiene más de una etiqueta <meta name="viewport"> en el <head>, o cuando dos configuraciones de viewport se contradicen entre sí.
El comportamiento resultante depende del navegador: algunos aplican la primera declaración que encuentran, otros la última, y algunos pueden comportarse de forma imprevisible según el dispositivo. El resultado es una experiencia inconsistente que puede afectar al renderizado móvil de la página.
Las causas más habituales son:
<head>, mientras el desarrollador añade una segunda en la plantilla hija o en un plugin.La detección es directa: abre el código fuente de la página (Ctrl+U en el navegador) y busca viewport. Si encuentras más de una línea con <meta name="viewport", tienes el problema.
La solución es igualmente directa: eliminar todas las declaraciones redundantes y dejar exactamente una etiqueta viewport con la configuración correcta (width=device-width, initial-scale=1). Si el problema viene de un tema o plugin de CMS, busca la opción de desactivar la etiqueta viewport en la configuración del tema o añade una regla que elimine las duplicadas programáticamente.
Usa esta lista en cualquier auditoría. Puedes completarla en menos de 30 minutos con Chrome DevTools y Google Search Console:
rem o em, no en px fijosmax-width: 100% y height: autooverflow-x: autowidth: 100% con aspect-ratio o la técnica de padding<meta name="viewport"> en el <head>width=device-width, initial-scale=1user-scalable=no ni maximum-scale=1Google recomienda un mínimo de 16px para el texto del cuerpo en dispositivos móviles. Lighthouse marca como error las fuentes inferiores a 12px. La práctica recomendada es definir el tamaño base en 16px en el elemento html y usar unidades relativas rem para el resto del CSS, lo que garantiza que el texto escale correctamente en todos los dispositivos.
El scroll horizontal en móvil suele aparecer por imágenes con ancho fijo en píxeles (width: 800px), tablas sin overflow-x: auto, o iframes con dimensiones estáticas. Un diseño puede parecer responsive visualmente en dispositivos medianos y aun así fallar en viewports muy estrechos. La forma más rápida de detectarlo es abrir Chrome DevTools, activar la emulación de un dispositivo pequeño (como iPhone SE) y comprobar si aparece barra de desplazamiento horizontal.
No. Google solo penaliza los intersticiales que bloquean el acceso al contenido principal. Los banners de consentimiento de cookies están exentos porque son un requisito legal (RGPD en Europa). También están exentos los muros de login para contenido privado, las verificaciones de edad y los banners de instalación de apps que ocupan un espacio razonable. Lo que sí penaliza son los popups a pantalla completa que aparecen inmediatamente al cargar la página antes de que el usuario pueda leer nada.
Sin la etiqueta <meta name="viewport">, los navegadores móviles renderizan la página a un ancho de escritorio (normalmente 980px) y la escalan para que quepa en la pantalla. El resultado es texto minúsculo, botones imposibles de pulsar y una experiencia de usuario muy pobre. Además, Google clasifica la página como no apta para móviles, lo que afecta negativamente al posicionamiento desde que se implementó el mobile-first indexing en 2019.
La forma más directa es abrir el código fuente de la página en el navegador (Ctrl+U o Cmd+U en Mac) y buscar la palabra viewport con Ctrl+F. Si aparece más de una etiqueta <meta name="viewport", tienes el problema. Otra opción es usar herramientas de auditoría SEO como SEOmator, que comprueba específicamente la regla mobile-multiple-viewports y alerta cuando detecta declaraciones duplicadas.
El SEO móvil no es una lista interminable de tecnicismos imposibles. Son 5 comprobaciones concretas, con soluciones directas, que marcan la diferencia entre una web que Google posiciona bien en móvil y una que no.
En Escala14 auditamos estas 5 reglas en cada proyecto que trabajamos. Cuando encontramos problemas —como el scroll horizontal que detectamos en nuestro propio Campamento Base durante la redacción de este artículo— los corregimos. Así de simple.
Si quieres que revisemos la usabilidad móvil de tu web y te digamos exactamente qué está fallando y cómo corregirlo, cuéntanoslo. Juntos trazaremos la ruta para que tu web llegue más alto en los resultados móviles. Sin compromiso.
Audita las 10 reglas de internacionalización SEO: atributo lang correcto, validación de hreflang, return links, conflictos y mismatches. Guía técnica con ejemplos de código y herramientas.
Una redirección mal configurada puede costar posiciones, link equity y rastreabilidad. Audita las 8 reglas de redirects SEO: bucles, tipos 301/302, meta refresh, JavaScript redirects y más.
Una URL mal construida es terreno resbaladizo para Google y para tus usuarios. Audita las 14 reglas de estructura de URLs que determinan si tus direcciones web suman o restan posiciones.
/ Volver al campamento
Más de 20 artículos publicados sobre SEO, diseño web y marketing digital, con datos reales y reglas auditables.