Desde 2020, Google utiliza principalmente la versión móvil para indexar y rankear. Es prioritario que tu web sea mobile-first.
¿Qué es Mobile-First Indexing?
Google prioriza la versión móvil de tu sitio como base para indexación y ranking. Si tu móvil es pobre, tu ranking bajará.
Por Qué Importa
- 60% del tráfico es mobile
- Google detecta fácilmente responsive vs no responsive
- Móviles lentos = peor ranking
- UX móvil = factor de ranking directo
1. Responsive Design
Obligatorio: Meta Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Sin esto, Google no considera tu sitio mobile-friendly.
Breakpoints Recomendados
/* Mobile: 320px - 767px */
@media (max-width: 767px) { }
/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) { }
/* Desktop: 1024px+ */
@media (min-width: 1024px) { }
Flexible Grid
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
2. Touch-Friendly Interface
Tamaño de Botones
Mínimo 48x48 pixels para fácil toque.
.button {
padding: 12px 24px; /* 48px mínimo */
min-height: 48px;
}
Espaciado
- Entre elementos: 8px mínimo
- Padding interno: 12px mínimo
- Margins: 16px mínimo
Evita Flash
- No uses Flash (deprecado)
- Usa HTML5 video
- Progressive enhancement
3. Velocidad Móvil
Targets Estrictos
- LCP: < 2.5s (mobile es más exigente)
- FID: < 100ms
- CLS: < 0.1
Mobile suele ser más lento. Agresivo:
- Minificar
- Demorar JS
- Optimizar imágenes
- Lazy loading
4. Contenido Móvil
Evita Problemas Comunes
❌ Problemas:
- Contenido oculto (sin razón)
- Popups intrusivos
- Ads más grandes que contenido
- Interfaz compleja
✅ Solución:
- Mostrar contenido importante
- Popups discretos
- Ads bien integrados
- Navegación simple
Jerarquía de Contenido
En mobile, prioriza:
- Headline
- CTA principal
- Contenido clave
- Details secundario
5. Testear Mobile-Friendly
Google Mobile-Friendly Test
- URL: https://search.google.com/test/mobile-friendly
- Resultado binario: Pass/Fail
Google PageSpeed Insights
- Métrica "Mobile"
- Detalla problemas específicos
DevTools de Chrome
- F12 → Toggle device toolbar
- Test en reales breakpoints
6. Estructuración de Datos Móvil
AMP no es obligatorio, pero optimiza caché:
<!-- AMP (opcional, pero beneficioso) -->
<link rel="amphtml" href="https://ampversion.html">
7. Configuración Móvil Específica
Viewport Correcto
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
Apple Mobile Web App
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<apple-mobile-web-app-title" content="Mi App">
Theme Color
<meta name="theme-color" content="#1a1a1a">
8. Evitar Errores Comunes
❌ Contenido No Accesible
- Bloqueado con JS
- Requiere interaction antes de mostrar
- Oculto en tabs/accordions
❌ Elementos Superpuestos
- Ads sobre contenido
- Headers pegajosos enormes
- Popups no cerrable
❌ Incompatibilidades
- Plugins no soportados
- Formato de video incorrecto
- Zoom deshabilitado
❌ Performance
-
3 segundos carga
- Scroll lag
- Interactions lentas
Checklist Mobile-First
- [ ] Meta viewport presente
- [ ] Responsive en todos los breakpoints
- [ ] Botones 48x48px
- [ ] Velocidad mobile < 3 seg
- [ ] Contenido accesible sin JS
- [ ] Ads integrados discretamente
- [ ] Popups minimizados
- [ ] Test en device real
- [ ] Core Web Vitals OK en mobile
- [ ] No Flash o plugins
- [ ] Fonts legibles sin zoom
- [ ] Contraste colores OK
Impacto en Ranking
Sitios con pobre experiencia móvil:
- Pierden 20-40% ranking potencial
- Menor CTR desde mobile
- Bounce rate más alto
- Conversiones menores
Próximos Pasos
- Test mobile-friendly en Google
- Fix problemas identificados
- Monitorea Core Web Vitals mobile
- A/B test UX móvil
- Repite cada trimestre
¿Necesitas ayuda? Nuestro equipo de SEO y diseño web optimiza webs para mobile-first.