Mobile-first es el nuevo escenario: los usuarios buscan desde su móvil y nuestro sitio Web debe adaptarse para lograr visibilidad en búsquedas desde móviles.

1. Estrategias SEO
para un mundo que busca
desde el móvil
Fernando Maciá
Human Level Communications

2. Fernando Maciá Domene
@fernandomacia
CEO Human Level Communications
@fernandomacia @humanlevel@HLCFormacion

3. Publicaciones
2 0 0 6 2 0 1 12 0 1 02 0 0 9 2 0 1 1
2 0 1 2 2 0 1 4 2 0 1 62 0 1 5

4. Actividad docente

5. Participación en eventos

6. En los medios

7. @fernandomacia @humanlevel @HLCFormacion
¿Qué significa un índice de Google
“mobile-first”?

8. Mobile supera en noviembre de 2016 al tráfico
desktop por primera vez (StatCounter)

9. Google avisó, y en noviembre de 2016 llegó el
aviso definitivo: ahora “sí que sí”

10. ¿Qué significa este aviso de índice “mobile-first”?
En algún momento pronto, los algoritmos de
Google emplearán el contenido móvil de un
sitio para rastrearlo, indexarlo y clasificarlo
Los sitios Web con diseño adaptativo
(responsive) no es necesario que hagan nada
(en principio)
Sitios Web con HTML dinámico o versión
mobile específica sí tienen recomendaciones
que conviene tener en cuenta.

11. Usar mismo marcado de datos tanto en versión
desktop como en la versión mobile

12. Añade tu sitio mobile específico a Google Search
Console y verifica su propiedad

13. Comprobar que la configuración de robots.txt no
impide el acceso al contenido mobile

14. No es necesario cambiar la configuración de los
alternate/canonical entre versiones
http://www.example.com/page-1
http://m.example.com/page-1

16. @fernandomacia @humanlevel @HLCFormacion
¿Cómo afecta el acceso desde móviles
al uso de Internet?

17. Limitaciones: velocidad/ancho de banda
Dial Up 3G ADSL 4G Fibra óptica
36.6 KB/s
300
MB/s
20
MB/s
10
MB/s3
MB/s

18. Limitaciones: área, formato y resolución de
pantalla
iPhone 5S
iPhone 6 Plus
iPad Air 2
MacBook 15" Retina iMac Retina 5K

19. Limitaciones: interfaz de acceso
Ausencia de teclado
físico: más incómodo
teclear textos largos o
muchos datos
Ausencia de ratón:
puntero más impreciso
Navegación orientada
a las opciones “más
probables”

20. Limitaciones: interfaz de acceso
El uso de interfaces de entrada por voz está
cambiando profundamente el escenario de
uso de los terminales mobile: asistentes
personales

21. Contexto: móvil significa búsqueda local

22. Mayor importancia a la jerarquía de navegación
95% navegación 45% productos

23. Incluir la opción más popular por defecto en
menús desplegables

24. Configurar formularios para facilitar el
autocompletado…

25. … o bien ofrecer la posibilidad de un social login

26. Optimizar accesibilidad: tamaño de letra escalable

27. @fernandomacia @humanlevel @HLCFormacion
¿Cómo afecta el acceso desde móviles
a nuestro sitio?

28. ¿Qué parte de tu público usa dispositivos
móviles?

29. ¿Qué parte de tu público usa dispositivos móviles
y procede de SEO?

30. Comparando indicadores de calidad del tráfico
que llega desde distintos dispositivos

31. Comparando el comportamiento del tráfico que
llega desde distintos dispositivos

32. Comparando las mejores landing pages de tráfico
orgánico desktop vs. mobile

33. Análisis de búsquedas en Google Search Console
comparando por tipo de dispositivo

34. El tráfico móvil está contribuyendo decisivamente
a la conversión, el tráfico y los ingresos

35. Algunos sitios Web aún tienen problemas para
convertir su tráfico de móviles

36. Y… ¿estamos preparados? Comprobamos con la
Prueba de optimización para móviles de Google

37. Comprobar versiones móviles con Safari: activar
menú Desarrollo en Preferencias

38. Comprobar versión móvil con Safari: Adoptar
modo de diseño con capacidad de respuesta

39. Comprobar versión móvil con Safari:
“disfrazarse” de otro navegador

40. Comprobar versión móvil con Chrome:
inspeccionar elementos

41. Comprobar versión móvil con Chrome: Network
conditions - User-agent

42. Comprobar versión móvil con Firefox/Web
Developer Tools plug-in: View responsive layouts

43. Comprobar versión móvil con Firefox >
Herramientas > Vista de diseño adaptable

44. @fernandomacia @humanlevel @HLCFormacion
Vías de adaptación de nuestro sitio Web
al entorno móvil

45. Google introdujo su robot mobile en diciembre de
2011

46. Directrices de Google genéricas para sitios
móviles

47. OPCIONES:
Responsive Web design
HTML dinámico usando una única URL
Versión mobile específica
(m.domain.com)
AMP
Apps (no adecuadas para
descubrimiento vía Web)

48. Directrices de Google para diseño web adaptativo

49. Responsive design
Una única fuente de
código HTML
Una única URL
Un único contenido
para rastrear
Un CSS distinto
dependiendo del tipo
de dispositivo en el
que se muestra la Web

50. Responsive design

51. Directrices de Google Developers para HTML
dinámico

52. HTML dinámico
Diferente contenido HTML
Diferente CSS
Misma URL
El servidor devuelve la
versión dependiendo del
dispositivo de navegación
Importante incluir la
cabecera http “Vary: User-
agent” para impedir ser
detectados por cloaking

53. Sitios Web con HTML dinámico

54. Directrices de Google para sitios mobile
específicos

55. Versión mobile (m.domain.com)
Diferentes archivos HTML
Diferentes archivos CSS
Diferentes URL
Se indexa la URL de la versión desktop
Importante incluir cabeceras HTML “alternate”
y “canonical”
Implica implementar un redirect por UA
EN LA VERSIÓN DESKTOP (http://www.example.com/page-1)
EN LA VERSIÓN MOBILE (http://m.example.com/page-1)

56. Versión mobile (m.domain.com)

57. Qué es AMP: Accelerated Mobile Pages
Una iniciativa de código abierto
promovida por Google junto con un
gran número de medios de todo el
mundo y otros socios tecnológicos.
Nace con el objetivo de mejorar la
velocidad de carga de las páginas web
para móviles.

58. Ejemplo de páginas AMP
Versión HTML Versión AMP

59. Cómo mejora AMP la velocidad
AMP HTML: se basa en web components que
consiguen aligerar la cantidad de HTML
necesaria
AMP JS: se restringe el uso de JavaScript a
código propio de AMP
Uso de cachés de Google: el uso de los CDN
del propio proyecto permite que este tipo de
servidor obtenga las páginas AMP para servirlas
al usuario de forma óptima

60. SEO AMP
La versión AMP no deja de ser una copia del
contenido canónico, por lo que para evitar
indexar contenido duplicado son necesarias
2 etiquetas:
Versión HTML: canonical a la propia página y
etiqueta de enlace amphtml referenciando a la
versión AMP
Versión AMP: canonical a la versión HTML

61. Versión desktop vs. versión AMP
Versión DT
Versión DT
Versión AMP

62. Configuración AMP en versión desktop
<link href="http://futbol.as.com/futbol/2017/01/18/primera/
1484779465_999489.html" rel="canonical" >
<link href="http://futbol.as.com/futbol/2017/01/18/primera/
1484779465_999489.amp.html" rel="amphtml" >
<link rel="alternate" href="http://mexico.as.com/mexico/2017/01/19/futbol/
1484804695_409055.html" hreflang="es-mx" />
<link rel="alternate" href="http://futbol.as.com/futbol/2017/01/18/primera/
1484779465_999489.html" hreflang="es" />

63. Configuración AMP en versión AMP
<link href="http://futbol.as.com/futbol/2017/01/18/primera/1484779465_999489.html" rel="canonical" >

64. AMP se almacena y se sirve desde cachés en
Google
https://www.google.es/amp/futbol.as.com/futbol/2017/01/18/primera/1484779465_999489.amp.html

65. Dónde podemos encontrar contenido AMP
Noticias destacadas
(comienzo 2016)
Resultados orgánicos
(finales 2016)

66. @fernandomacia @humanlevel @HLCFormacion
Ventajas e inconvenientes
de cada solución

67. Responsive: ventajas
Fácil de mantener
Evita problemas potenciales de contenido
duplicado/cloaking
Todos los enlaces se consolidan sobre un
único contenido
Optimizamos el crawl rate
No es necesario implementar
redirecciones en el servidor

68. Atención a los bloques de texto SEO!!!!

69. Atención a los bloques de texto SEO!!!!

70. Responsive: desventajas
A veces, el escenario de uso del sitio Web es
distinto para el usuario que usa cada dispositivo,
por lo que el responsive es menos flexible para
adaptarse a cada escenario para la mejor
experiencia de usuario
Determinadas maquetaciones o plantillas puede
ser complicado adaptarlas a diseño adaptativo
Puede verse afectado el peso y la velocidad de
descarga por la necesidad de adaptarse a
múltiples formatos de pantalla

71. HTML dinámico: ventajas
Seguimos teniendo una única URL por
contenido: no hay problema de contenido
duplicado.
La popularidad se concentra en las mismas
URL que en diseño adaptativo.
Es más flexible para adaptar el contenido a
cada escenario para una mejor experiencia de
usuario
Podemos optimizar mejor el peso de la
descarga necesaria a cada dispositivo.

72. Sitios Web con HTML dinámico: priorización de la
navegación sobre el contenido

73. HTML dinámico: desventajas
Más complicado de mantener.
Más caro de desarrollar: necesitaremos
duplicar el diseño de plantillas, prototipos,
hojas de estilo, imágenes…
Aunque el HTML dinámico se puede adaptar
a distintos tipos de dispositivos, la variedad
hace imposible que se pueda adaptar de
una forma perfecta a todos ellos.

74. Mobile específica: ventajas
Implementación y desarrollo, en principio,
más sencillos
Se puede optimizar el código, peso de la
descarga, diseño, etc. para adaptarse de forma
óptima a cada dispositivo
Se puede adaptar el contenido y la
navegación para adaptarse a cada escenario
de uso
Se puede optimizar reduciendo las opciones
a la navegación más probable para ahorrar
pasos

75. Mobile específica: desventajas
Hay más riesgos de que, en caso de no
implementarse correctamente los alternate/
canonical, pueda detectarse contenido
duplicado.
En caso de URLs únicas mobile, hay que
transferirles parte de la popularidad desde
la versión desktop para que posicionen
El coste y complicación del mantenimiento
es más elevando. Se trata, prácticamente, de
dos sitios Web independientes.

76. @fernandomacia @humanlevel @HLCFormacion
Comprobando:
Rastreo de la versión móvil

77. Google Search Console: explorar como
Googlebot/mobile

78. Google Search Console: explorar como
Googlebot/mobile para comprobar redirección

79. Comprobar versión móvil con Firefox/User Agent
Switcher plug-in

80. Comprobar versión móvil con Firefox/User Agent
Switcher plug-in

81. Comprobar versión móvil con Screaming Frog

82. Comprobando respuesta del servidor con Web-
Sniffer usando distintos user-agents

83. Googlebot: user-agents

84. Comprobando respuesta del servidor con Web-
Sniffer usando distintos user-agents

85. Requisitos para que las noticias aparezcan como
destacadas en búsquedas móviles
Implementación HTML AMP correcta
Implementación de microformatos correctos (sin
errores, sí están permitidos los warnings)

86. Validar la implementación AMP
Plugin para Chrome: valida la implementación
AMP https://chrome.google.com/webstore/
detail/amp-validator/
nmoffdblmcmgeicmolmhobpoocbbmknc
Versión Web: valida la implementación AMP y
datos estructurados https://search.google.com/
search-console/amp

87. Validación AMP: plug-in para Chrome

88. Validación de AMP (Google)

89. @fernandomacia @humanlevel @HLCFormacion
Validación de usabilidad
móvil

90. Validación mobile: Google Developers

91. Validación mobile: Think with Google

92. Validación mobile: Think with Google

93. ¿Qué dispositivos utilizan tus usuarios móviles?

94. Velocidad de descarga: PageSpeed Insights

95. @fernandomacia @humanlevel @HLCFormacion
Errores en la versión móvil

96. Google Search Console: errores de rastreo

97. Google Search Console: errores de usabilidad

98. Comprobar errores AMP en Google Search
Console

99. @fernandomacia @humanlevel @HLCFormacion
Problemas de contenido
duplicado/cloaking

100. Contenido duplicado/cloaking
En implementaciones de diseño
adaptativo no se pueden dar debido a que
hay una única fuente HTML
En implementaciones de HTML dinámico,
debemos implementar la cabecera http-
vary para evitar la detección de cloaking
En implementaciones de versiones mobile
específicas, debemos implementar los
elementos alternate/canonical recíprocos

101. Contenido duplicado/cloaking
Si hay páginas mobile específicas sin
contenido equivalente en la versión
desktop, no hay problema en indexar esas
páginas.
En ese caso, estas páginas no deben
implementar ningún canonical.
Para asegurar la indexación y transferir
popularidad, deberán estar enlazadas
desde al menos algunas páginas de la
versión desktop.

102. @fernandomacia @humanlevel @HLCFormacion
Posicionamiento
comparativo entre móvil y
sobremesa

103. Compara resultados de Google para DT y Mobile
de tus palabras clave más importantes

104. Comprobando posiciones con Advanced Web
Ranking: Resultados geolocalizados/locales

105. Comprobando posiciones con Advanced Web Ranking:
comparativa de resultados sobremesa/móviles

106. Comprobando visibilidad orgánica resultados
sobremesa/móvil con Sistrix

107. Comprobando keywords que han mejorado: todas
vs. mobile

108. Comprobando visibilidad por directorios desktop
vs. mobile con Sistrix

109. Comprobando visibilidad desktop vs. mobile con
SEMRush (de momento sólo para algunos países)

110. Google Search Console: análisis de búsqueda/
comparar clics por tipo de dispositivo

111. Google Search Console: análisis de búsqueda/
comparar posición media por tipo de dispositivo

112. Google Search Console: análisis de búsqueda/
filtrar por resultados AMP

113. Google Search Console: búsquedas que están
generando tráfico móvil

114. Comprobar versión móvil con Safari: comprobar
resultados Google Mobile - AMP/noticias

115. @fernandomacia @humanlevel @HLCFormacion
Cómo orientar nuestro sitio Web
a un mundo “mobile-only”

116. Compara tu visibilidad móvil con otros
competidores

117. Investiga para qué keywords se posiciona tu
competencia en búsquedas móviles

118. Optimiza tu sitio para búsquedas probables desde
móvil (cerca de…)

119. Evita los interstitials que bloquean toda la
pantalla

120. Algunas ideas más…
Diseña la arquitectura y prototipado de tu sitio Web pensando
en los escenarios de uso de tus clientes potenciales y sus
necesidades
Incluye mecanismos de ayuda para comprobar la usabilidad
del sitio o ayudar a los clientes a terminar sus procesos
(conversión, compra, reserva…) incluyendo un número de
teléfono.
Ordena los menús por opciones más probables
Incluye mecanismos de autorelleno de formularios
Plantea añadir social logins para facilitar el registro de nuevos
usuarios
Prepara tu sitio para las búsquedas de voz

122. Fernando Maciá Domene
@fernandomacia
CEO Human Level Communications
@fernandomacia @humanlevel@HLCFormacion