El móvil primero y el viewport

Módulo 4: Velocidad, móvil y https · Tiempo de lectura: 10 minutos

Objetivo de aprendizaje: Después de esta lección podrá explicar qué significa la indexación mobile-first, reconocer y escribir una configuración de viewport correcta y evitar los errores que hacen que su página móvil muestre menos contenido o funcione peor que su página de escritorio.

Conceptos clave: indexación mobile-first, rastreador para smartphones, diseño responsive, publicación dinámica (dynamic serving), sitio móvil independiente, <meta name="viewport">, width=device-width, initial-scale, bloquear el zoom, contenido equivalente, ventanas emergentes intrusivas (intersticiales), objetivos táctiles

Google mira con un teléfono

Durante mucho tiempo, Google veía un sitio web como lo hace un ordenador. Eso se acabó. Para indexar y clasificar, Google utiliza la versión móvil de sus páginas y la obtiene con el rastreador para smartphones de Googlebot. Esto se llama indexación mobile-first. En octubre de 2023, Google escribió que la transición había terminado: para casi todos los sitios, ahora es simplemente "indexar". Desde julio de 2024, Google rastrea también con el rastreador móvil los últimos sitios que todavía se visitaban con el rastreador de escritorio; lo que no se puede alcanzar en absoluto desde un teléfono ya no se puede indexar.

¿Qué significa esto en la práctica? Lo que no está en su página móvil no existe para Google. Si en el teléfono omite un fragmento de texto, una tabla, su horario de apertura o sus datos estructurados "porque la pantalla es pequeña", Google tampoco verá ese fragmento.

Tres maneras de crear la versión móvil

Casi todos los creadores de sitios web modernos y los temas de WordPress son responsive. Un sitio creado con AI Builder también es responsive: una sola página que se adapta. Si tiene un sitio antiguo con una versión m. independiente, pasarse a un diseño responsive suele ser la mayor mejora que puede hacer.

El viewport: la línea que hace que todo funcione

El navegador de un teléfono no sabe por sí mismo que su página está hecha para una pantalla pequeña. Sin instrucciones, actúa como si la pantalla fuera mucho más ancha, por ejemplo de 980 píxeles (el ejemplo que da la documentación de MDN), y reduce toda la página hasta que cabe en la pantalla. Resultado: un texto diminuto en el que hay que hacer zoom. Tampoco funciona entonces un diseño responsive, porque el CSS cree que la pantalla es ancha.

La solución es una sola línea en el <head> de cada página:

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

• width=device-width indica: haga la página tan ancha como la pantalla del dispositivo. Así su CSS puede trabajar con anchos de pantalla.
• initial-scale=1 indica: empiece sin acercar ni alejar el zoom.

Esta es exactamente la línea que recomienda Lighthouse (la comprobación de Chrome y PageSpeed Insights). Lighthouse suspende una página si falta la línea del viewport o si no tiene width=.

Lo que es mejor no hacer

Algunos sitios añaden más cosas:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Con esto, el visitante ya no puede hacer zoom. Parece algo ordenado ("el diseño no se descuadra"), pero para una persona con baja visión es una barrera. La pauta de accesibilidad WCAG 2.2 exige en el criterio de conformidad 1.4.4 (Cambio de tamaño del texto, nivel AA) que el texto se pueda ampliar hasta el 200 por ciento sin que se pierda contenido ni funcionalidad. La regla de prueba oficial del W3C, "Meta viewport allows for zoom", suspende un viewport con user-scalable=no o con un maximum-scale inferior a 2. Por lo tanto, omita esas partes. (Safari en el iPhone las ignora hoy por defecto, pero otros navegadores no.)

También es un error un ancho fijo, como width=1024. Entonces el teléfono vuelve a actuar como si la pantalla tuviera 1.024 píxeles de ancho y su diseño responsive no sirve de nada.

El mismo contenido en móvil y en escritorio

En su documentación sobre la indexación mobile-first, Google menciona algunas cosas que deben ser iguales en ambas versiones. En un sitio responsive esto ocurre automáticamente; con la publicación dinámica y con un sitio móvil independiente debe comprobarlo:

• El propio contenido. En móvil, el texto puede estar en un bloque desplegable o en una pestaña, pero debe estar en la página.
• El título y la metadescripción (lección 3.1) deben ser equivalentes.
• Los datos estructurados (módulo 5) deben estar en ambas versiones.
• Las imágenes, con los mismos textos alternativos y con buena calidad.
• Nada de contenido que solo se carga tras una acción. Google lo dice literalmente: no cargue el contenido principal solo cuando el visitante desliza, hace clic o escribe; Googlebot no hace eso.
• El robots.txt no debe bloquear las páginas móviles ni su CSS, JavaScript e imágenes. Sin CSS, Google no puede ver qué aspecto tiene la página.

Cómodo en una pantalla pequeña

Algunos puntos que Google menciona como preguntas para una buena experiencia en la página, y que usted puede comprobar en su propio teléfono:

• Texto legible sin hacer zoom.
• Objetivos táctiles (botones, enlaces de un menú) suficientemente grandes y no demasiado juntos, para no pulsar el equivocado por accidente.
• Nada de ventanas emergentes intrusivas. Google escribe que los elementos que tapan el contenido (una ventana de suscripción al boletín sobre toda la página nada más entrar) molestan a los visitantes y dañan la confianza, y que dificultan a los buscadores la comprensión de su contenido. Es mejor utilizar una barra pequeña. Las ventanas obligatorias por ley, como una verificación de edad, quedan fuera de esa directriz.
• Nada de desplazamiento horizontal: una imagen o una tabla demasiado ancha empuja toda la página hacia un lado. Dé a las tablas su propia barra de desplazamiento.

A finales de 2023, Google retiró la herramienta independiente "Prueba de optimización para móviles" y el informe Usabilidad móvil de Search Console. Ahora la comprobación se hace con su propio teléfono, con la vista móvil de las herramientas para desarrolladores de su navegador y con Lighthouse o PageSpeed Insights (lección 4.3).

En la práctica: compruébelo usted mismo

Abra su sitio en Chrome o Firefox en el ordenador, pulse F12 y haga clic en el icono de un teléfono y una tableta (barra de herramientas de dispositivos). Elija un dispositivo estrecho y recorra sus páginas más importantes. Fíjese en el texto que se sale de la pantalla, en los botones que se superponen y en los fragmentos que faltan en móvil. Después, mire en el código fuente (Ctrl+U) si está la línea del viewport.

AI Builder añade por sí mismo la línea de viewport width=device-width, initial-scale=1 en cada página. Los temas de WordPress también lo hacen, al igual que la mayoría de los demás creadores de sitios web. En un sitio hecho a mano o antiguo merece la pena comprobarlo: es una sola línea, pero sin ella no funciona nada de su diseño móvil.

Resumen

• Google indexa y clasifica la versión móvil de sus páginas; lo que falta en ella, Google no lo ve.
• El diseño responsive es la manera recomendada: una sola dirección, un solo HTML.
• Cada página necesita <meta name="viewport" content="width=device-width, initial-scale=1">.
• No bloquee el zoom: nada de user-scalable=no ni de maximum-scale inferior a 2 (WCAG 1.4.4).
• Mantenga iguales el contenido, el título, la metadescripción y los datos estructurados en móvil y en escritorio, y evite las ventanas emergentes que tapan la página.

Cuestionario

Ejercicio

Ejercicio A4.2: ¿Tiene su página un viewport correcto? Introduzca la dirección de una página (por ejemplo, su página de inicio). El programa lee el HTML y comprueba si hay exactamente un <meta name="viewport"> en el <head> con width=device-width, y si el zoom no está bloqueado (user-scalable=no o maximum-scale inferior a 2). Después, mire usted mismo la misma página en la vista móvil de su navegador. ¿No tiene sitio propio? Utilice www.wikipedia.org.

Para seguir leyendo

• Google Search Central, prácticas recomendadas para la indexación mobile-first: https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• Blog de Google Search Central, Mobile-first indexing has landed (2023): https://developers.google.com/search/blog/2023/10/mobile-first-is-here
• Google Search Central, evitar intersticiales y cuadros de diálogo intrusivos: https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials
• W3C, regla ACT Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, la metaetiqueta viewport: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
• W3C, Understanding SC 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html