≡En resumen
- «Mobile first» tiene dos significados: una forma de diseñar y la forma en la que Google indexa la web.
- El diseño mobile first empieza por la pantalla más pequeña y añade complejidad a medida que hay más espacio.
- Desde el 5 de julio de 2024, Google indexa todas las webs con su rastreador para smartphone; lo que no ves en móvil no cuenta para posicionar.
- Si tu web no es accesible desde un móvil, Google avisó de que deja de ser indexable.
- Diseño mobile first y responsive no son lo mismo: el primero es el orden de trabajo; el segundo, la técnica de adaptación.
01 ¿Qué es mobile first?
El término lo popularizó el diseñador Luke Wroblewski en su artículo «Mobile First», del 3 de noviembre de 2009. Defendía empezar por el móvil por tres razones: el crecimiento del uso móvil, la disciplina de tener que priorizar en poco espacio y las capacidades propias del teléfono, como la ubicación o el tacto. Años después, Google llevó la misma lógica a su índice.
02 Diseño mobile first vs indexación mobile-first
| Aspecto | Diseño mobile first | Indexación mobile-first |
|---|---|---|
| Qué es | Una metodología de diseño y desarrollo | Un método de rastreo e indexación de Google |
| Quién lo aplica | Diseñadores y desarrolladores | Google, sobre todas las webs |
| Es opcional | Sí, es una decisión de proyecto | No, se aplica a todos los sitios desde julio de 2024 |
| Qué exige | Priorizar contenidos y tareas para pantallas pequeñas | Que la versión móvil tenga el mismo contenido, datos estructurados y metadatos que la de escritorio |
| Riesgo si se ignora | Interfaces recargadas y lentas en el móvil | Contenido que no se indexa y pérdida de posiciones |
03 Cómo funciona el diseño mobile first
En la práctica, el CSS base se escribe para móvil y las pantallas grandes se añaden con media queries de ancho mínimo, por ejemplo @media (min-width: 768px). Es la mejora progresiva: el móvil recibe lo esencial y el escritorio suma columnas, imágenes mayores o menús desplegados. El enfoque contrario, diseñar para escritorio y esconder cosas en móvil, suele dejar páginas pesadas y contenidos ocultos.
Contenido priorizado
Si no cabe en una pantalla de móvil, obliga a decidir qué es importante. Lo secundario baja o desaparece.
Zonas táctiles cómodas
Botones y enlaces con tamaño y separación suficientes para el dedo, y formularios con el teclado adecuado para cada campo.
Rendimiento desde el inicio
Imágenes ligeras, menos scripts y carga diferida de lo que no se ve. En redes móviles, cada kilobyte cuenta.
Navegación simple
Menús cortos, buscador visible y la acción principal a mano del pulgar.
Si quieres ver cómo aplicar esta mentalidad más allá del diseño, en campañas, emails o contenidos, tienes nuestra guía sobre la mentalidad mobile first en marketing. Otro repaso externo útil sobre la técnica es Qué es el diseño web responsive y por qué debes adoptarlo.
04 Indexación mobile-first de Google: qué es y cronología
La indexación mobile-first significa que Google usa principalmente el contenido de la versión móvil de una página, rastreada con su rastreador Googlebot Smartphone, para la indexación y el posicionamiento. No hay un índice separado para móviles: el índice es uno, pero se construye mirando lo que ve un teléfono.
| Fecha | Hito |
|---|---|
| 2015 | Google empieza a tener en cuenta la compatibilidad móvil con la actualización «mobile friendly» |
| 4 de noviembre de 2016 | Google anuncia sus primeros experimentos de indexación mobile-first |
| 1 de julio de 2019 | La indexación mobile-first pasa a ser la opción por defecto para las webs nuevas |
| 31 de octubre de 2023 | Google da por completado el paso de la gran mayoría de sitios |
| 3 de junio de 2024 | John Mueller anuncia el último paso para los sitios que aún se rastreaban con Googlebot de escritorio |
| 5 de julio de 2024 | Desde esa fecha, Google rastrea e indexa todas las webs solo con Googlebot Smartphone |
05 Cómo preparar tu web para la indexación mobile-first
- ✓La versión móvil tiene el mismo contenido principal que la de escritorio (textos, imágenes, vídeos).
- ✓Los títulos, las meta descriptions y las etiquetas robots son equivalentes en ambas versiones.
- ✓Los datos estructurados (Breadcrumb, Product, VideoObject…) están también en la versión móvil.
- ✓El contenido principal no depende de que el usuario toque, deslice o escriba para cargarse.
- ✓Googlebot puede rastrear los recursos de la página: CSS, JavaScript e imágenes no están bloqueados en robots.txt.
- ✓Las imágenes tienen texto alternativo y un tamaño adecuado, y la página carga rápido en redes móviles.
- ✓La herramienta de inspección de URLs de Search Console muestra la página renderizada como la ve Googlebot Smartphone.
-
1
Pruébala en un móvil de verdad
Navega por tus páginas clave con el teléfono y con datos móviles, no solo reduciendo la ventana del navegador.
-
2
Inspecciona la URL en Search Console
Usa «Probar URL publicada» y revisa la captura y el HTML renderizado: es lo que ve Googlebot Smartphone.
-
3
Compara con la versión de escritorio
Comprueba que los textos, los enlaces internos, las imágenes y los datos estructurados son los mismos en ambas versiones.
-
4
Revisa lo que bloquea el rastreo
Busca en robots.txt reglas que impidan cargar CSS, JavaScript o imágenes necesarios para pintar la página.
-
5
Mira el informe de Core Web Vitals
Search Console separa los datos de móvil y ordenador: prioriza las URL que fallan en móvil.
06 Errores frecuentes con mobile first
Recortar contenido en móvil
Esconder textos o secciones en la versión móvil para «limpiarla» hace que Google no los tenga en cuenta al posicionar.
Pestañas y acordeones que no cargan
Ocultar contenido en acordeones está bien si ya está en el HTML. El problema es cuando solo se carga al pulsar.
Sitio m. desactualizado
Las webs con versión separada (m.dominio.com) suelen tener menos contenido y peor enlazado que la de escritorio.
Intersticiales invasivos
Pop-ups que tapan el contenido nada más entrar desde el móvil empeoran la experiencia y la conversión.
Si vas a rehacer tu web, lo más sencillo es partir de un diseño web profesional planteado mobile first desde el primer boceto: evita tener que corregir después la versión móvil. Y si además te comunicas con tus clientes por el móvil, repasa las claves del m-marketing.
Preguntas frecuentes sobre Mobile First
Significa «primero el móvil». En diseño web es empezar por la pantalla pequeña; en SEO, que Google indexa y posiciona cada web según su versión móvil.
El 5 de julio de 2024. Desde entonces Google rastrea e indexa todas las webs solo con Googlebot Smartphone.
Responsive es la técnica para que una página se adapte a cualquier pantalla; mobile first es el orden de diseño, empezando por el móvil. Se suelen combinar.
Si su contenido no es accesible desde un móvil, Google avisó de que deja de ser indexable. Si se ve pero con menos contenido, lo que falte no contará para posicionar.
Hoy lo hace con todas. Puedes ver cómo la renderiza Googlebot Smartphone con la inspección de URLs de Search Console.
Lo popularizó el diseñador Luke Wroblewski en un artículo publicado el 3 de noviembre de 2009.
Sí. En una app el móvil es la plataforma principal, y el principio de priorizar tareas y contenidos en poco espacio se aplica igual.
No. Google recomienda el diseño responsive: una sola URL y el mismo HTML para todos los dispositivos, que evita diferencias de contenido entre versiones.
Fuentes consultadas
Sobre el autor
CEO de appyweb, especialista en SEO, IA y desarrollo
Fundador de appyweb. Más de una década posicionando webs y tiendas online en Google y en las respuestas de la IA, y dedicado también al desarrollo de software y las automatizaciones.
Ver perfil y artículos → Ver perfil en LinkedIn ↗