¿Qué significa mobile first? Indexación mobile-first y diseño mobile-first
Mobile first significa "primero la versión móvil". En SEO se refiere a la indexación mobile-first: Google rastrea tu sitio con su rastreador de smartphone e indexa y posiciona las páginas según su versión móvil, así que el contenido visible solo en escritorio prácticamente no existe para el posicionamiento. En diseño web, es el enfoque de diseñar primero la interfaz para una pantalla pequeña y luego ampliarla para pantallas más grandes. Google ha anunciado que la transición a la indexación mobile-first está completa, y no es un ajuste que puedas desactivar.
Los dos significados de mobile first
| Contexto | Qué significa | Qué revisar |
|---|---|---|
| SEO | Indexación mobile-first: Google indexa y posiciona una página usando su versión móvil, rastreada con el rastreador de smartphone | Si el contenido, los enlaces, el marcado y las metaetiquetas coinciden entre la versión móvil y la de escritorio |
| Diseño web y front-end | Un enfoque "primero el teléfono": la interfaz se diseña primero para una pantalla estrecha y luego se mejora para pantallas más anchas | Cómo se ve y funciona la página en un teléfono: viewport, tamaños de fuente, áreas táctiles, desplazamiento |
En CSS, mobile first significa que los estilos base están pensados para teléfonos, y las media queries con min-width amplían el diseño para tabletas y computadoras de escritorio.
.cards { display: grid; gap: 16px; } /* phone: one column */
@media (min-width: 768px) {
.cards { grid-template-columns: repeat(3, 1fr); } /* wider than 768 px: three columns */
}Los dos significados están relacionados, pero uno no requiere el otro. Para la indexación mobile-first no importa en qué orden se construyó el sitio: lo que importa es que la versión móvil contenga lo mismo que la de escritorio. Un sitio responsive creado "primero el teléfono" suele lograrlo de forma automática: un solo documento HTML, y solo cambia el diseño.
Cómo Google pasó a la indexación mobile-first
Antes, Google evaluaba las páginas según su versión de escritorio, incluso cuando la mayoría de las búsquedas ya se hacían desde teléfonos. En 2016 comenzó a cambiar los sitios a la indexación por versión móvil, de forma gradual. En octubre de 2023, Google anunció en el blog de Search Central que la transición estaba completa. Un pequeño conjunto de sitios que no funcionan en móvil en absoluto, por ejemplo, porque la versión móvil está bloqueada en robots.txt o porque todas las páginas móviles redirigen a la página de inicio, se sigue rastreando por ahora con el Googlebot de escritorio heredado, y Google sigue reduciendo su uso.
En la práctica: si tus informes y registros muestran sobre todo "Googlebot Smartphone", es lo esperado. Para la búsqueda, la versión de escritorio es secundaria: sirve a las personas, pero el índice contiene lo que vio el rastreador de smartphone.
Qué se desprende de esto
- El contenido debe ser el mismo. Si el texto de la versión móvil es más corto y algunos bloques están ocultos, se indexa la versión recortada.
- El marcado debe ser el mismo. Los encabezados, los datos estructurados y las direcciones canónicas deben estar presentes en la versión móvil.
- Las imágenes y sus textos alt deben estar en su lugar, de lo contrario se pierde el tráfico de imágenes.
- El texto oculto por defecto (en pestañas, acordeones) se indexa, pero esto no es motivo para ocultar la mitad de la página.
Lista de verificación: las versiones móvil y de escritorio deben coincidir
Basada en las mejores prácticas de Google para la indexación mobile-first. Presta especial atención si tu sitio tiene una versión móvil independiente o si sirve HTML diferente a teléfonos y computadoras.
| Comparar | Requisito |
|---|---|
| Texto principal | El mismo contenido que en escritorio. El texto en pestañas y acordeones se indexa, pero un artículo móvil recortado es un artículo recortado en el índice |
| Encabezados | Los mismos H1–H3 con la misma redacción |
| Enlaces internos | El menú móvil, el footer y los enlaces dentro del texto apuntan a las mismas páginas |
| Datos estructurados | El mismo marcado en ambas versiones: consulta datos estructurados |
| Title y meta description | Equivalentes en ambas versiones |
| Meta tag robots | La misma: un noindex solo en la versión móvil sacará la página del índice aunque en escritorio no lo tenga |
| Imágenes | Las mismas imágenes con el mismo texto alt, en buena calidad: consulta SEO de imágenes |
| Carga diferida (lazy loading) | El contenido principal no debe cargarse solo después de un toque, un deslizamiento o al escribir: el crawler no realiza esas acciones |
| robots.txt | Las mismas reglas; el CSS, el JS y las imágenes necesarios para el renderizado no están bloqueados |
| Subdominio m. independiente | rel="canonical" de la URL móvil a la de escritorio y rel="alternate" de escritorio a móvil |
Errores comunes
| Error | A qué lleva |
|---|---|
| Subdominio móvil independiente con texto recortado | Se indexa la versión corta y las posiciones bajan |
| Lazy loading sin alternativa | El bot no ve el contenido: consulta renderizado de JavaScript |
| Enlaces internos distintos en el menú móvil | Algunas páginas pierden peso interno |
| Bloquear recursos en robots.txt | El bot no puede renderizar la página |
Cómo comprobar tu sitio para mobile-first
La prueba Mobile-Friendly Test de Google ya no existe: en diciembre de 2023 Google la retiró junto con su API y el informe de Usabilidad móvil en Search Console. Qué usar en su lugar, paso a paso, se explica en cómo comprobar si un sitio web es mobile-friendly. En resumen:
- Usabilidad en el teléfono. Nuestra prueba de compatibilidad móvil carga la página como un teléfono Android y revisa el meta viewport, las media queries, los anchos fijos de más de 480 px, el texto pequeño, las áreas táctiles pequeñas, los riesgos de scroll horizontal y los plugins obsoletos, junto con una captura de pantalla de iPhone. La puntuación de 0–100 es una suma transparente de pesos basada en el código de la página, no el veredicto de Google. Los invitados tienen 15 comprobaciones al día, una cuenta gratuita 45 y Pro es ilimitado.
- Qué ve Google. La Inspección de URL en Search Console muestra qué crawler obtuvo la página y el HTML renderizado; la prueba en vivo muestra el estado actual.
- Paridad de contenido. Ni nuestra prueba ni Lighthouse comparan la versión móvil con la de escritorio: eso lo haces tú a mano. Abre la página en Chrome, activa la emulación de dispositivo en DevTools y ejecuta esto en la consola en ambas versiones:
Una diferencia notable merece investigarse. Si el sitio sirve HTML distinto según el dispositivo, recarga la página en modo de emulación antes de comparar.document.body.innerText.split(/\s+/).length // words document.querySelectorAll('a[href]').length // links document.querySelectorAll('script[type="application/ld+json"]').length // JSON-LD blocks - Velocidad y accesibilidad. Lighthouse en DevTools audita en modo móvil de forma predeterminada.
Versión móvil y velocidad
La indexación móvil no significa que solo se evalúe la velocidad en el teléfono, pero en la práctica las métricas móviles casi siempre son peores que las de escritorio: dispositivo y conexión más débiles. Por eso tiene sentido empezar la optimización de velocidad por la versión móvil: consulta Core Web Vitals.
Qué cambia en la promoción
Nada en cuanto a enlaces y nada en cuanto a contenido: solo cambia qué versión de la página hay que revisar. Antes de lanzar una cascada, asegúrate de que la página promocionada muestre en móvil el mismo texto y los mismos enlaces que en escritorio.
Diseño responsive o versión independiente
El diseño responsivo, donde la misma dirección se adapta a la pantalla, es más simple y más confiable que un subdominio móvil independiente: no hay discrepancias en el contenido, no se necesitan indicaciones mutuas entre versiones y las direcciones no se duplican. Hoy en día, una versión móvil independiente casi siempre es una herencia del pasado, no una solución.