O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Estrategias SEO
para un mundo que busca
desde el móvil
Fernando Maciá
Human Level Communications
@fernandomacia @humanlevel @HLCFormacion
¿Qué significa un índice de Google
“mobile-first”?
Mobile supera en noviembre de 2016 al tráfico
desktop por primera vez (StatCounter)
Google avisó, y en noviembre de 2016 llegó el
aviso definitivo: ahora “sí que sí”
¿Qué significa este aviso de índice “mobile-first”?
En algún momento pronto, los algoritmos de
Google emplearán el contenido...
Usar mismo marcado de datos tanto en versión
desktop como en la versión mobile
Añade tu sitio mobile específico a Google Search
Console y verifica su propiedad
Comprobar que la configuración de robots.txt no
impide el acceso al contenido mobile
No es necesario cambiar la configuración de los
alternate/canonical entre versiones
http://www.example.com/page-1
http://m....
@fernandomacia @humanlevel @HLCFormacion
¿Cómo afecta el acceso desde móviles
al uso de Internet?
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
Limitaciones: área, formato y resolución de
pantalla
iPhone 5S
iPhone 6 Plus
iPad Air 2
MacBook 15" Retina iMac Retina 5K
Limitaciones: interfaz de acceso
Ausencia de teclado
físico: más incómodo
teclear textos largos o
muchos datos
Ausencia de...
Limitaciones: interfaz de acceso
El uso de interfaces de entrada por voz está
cambiando profundamente el escenario de
uso ...
Contexto: móvil significa búsqueda local
Mayor importancia a la jerarquía de navegación
95% navegación 45% productos
Incluir la opción más popular por defecto en
menús desplegables
Configurar formularios para facilitar el
autocompletado…
… o bien ofrecer la posibilidad de un social login
Optimizar accesibilidad: tamaño de letra escalable
@fernandomacia @humanlevel @HLCFormacion
¿Cómo afecta el acceso desde móviles
a nuestro sitio?
¿Qué parte de tu público usa dispositivos móviles
y procede de SEO?
Comparando indicadores de calidad del tráfico
que llega desde distintos dispositivos
Comparando el comportamiento del tráfico que
llega desde distintos dispositivos
Comparando las mejores landing pages de tráfico
orgánico desktop vs. mobile
Análisis de búsquedas en Google Search Console
comparando por tipo de dispositivo
El tráfico móvil está contribuyendo decisivamente
a la conversión, el tráfico y los ingresos
Algunos sitios Web aún tienen problemas para
convertir su tráfico de móviles
Y… ¿estamos preparados? Comprobamos con la
Prueba de optimización para móviles de Google
Comprobar versiones móviles con Safari: activar
menú Desarrollo en Preferencias
Comprobar versión móvil con Safari: Adoptar
modo de diseño con capacidad de respuesta
Comprobar versión móvil con Safari:
“disfrazarse” de otro navegador
Comprobar versión móvil con Chrome:
inspeccionar elementos
Comprobar versión móvil con Chrome: Network
conditions - User-agent
Comprobar versión móvil con Firefox/Web
Developer Tools plug-in: View responsive layouts
Comprobar versión móvil con Firefox >
Herramientas > Vista de diseño adaptable
@fernandomacia @humanlevel @HLCFormacion
Vías de adaptación de nuestro sitio Web
al entorno móvil
Google introdujo su robot mobile en diciembre de
2011
Directrices de Google genéricas para sitios
móviles
OPCIONES:
Responsive Web design
HTML dinámico usando una única URL
Versión mobile específica
(m.domain.com)
AMP
Apps (no a...
Responsive design
Una única fuente de
código HTML
Una única URL
Un único contenido
para rastrear
Un CSS distinto
dependien...
Responsive design
HTML dinámico
Diferente contenido HTML
Diferente CSS
Misma URL
El servidor devuelve la
versión dependiendo del
dispositivo...
Sitios Web con HTML dinámico
Versión mobile (m.domain.com)
Diferentes archivos HTML
Diferentes archivos CSS
Diferentes URL
Se indexa la URL de la versi...
Versión mobile (m.domain.com)
Qué es AMP: Accelerated Mobile Pages
Una iniciativa de código abierto
promovida por Google junto con un
gran número de med...
Ejemplo de páginas AMP
Versión HTML Versión AMP
Cómo mejora AMP la velocidad
AMP HTML: se basa en web components que
consiguen aligerar la cantidad de HTML
necesaria
AMP ...
SEO AMP
La versión AMP no deja de ser una copia del
contenido canónico, por lo que para evitar
indexar contenido duplicado...
Versión desktop vs. versión AMP
Versión DT
Versión DT
Versión AMP
Configuración AMP en versión desktop
<link href="http://futbol.as.com/futbol/2017/01/18/primera/
1484779465_999489.html" re...
Configuración AMP en versión AMP
<link href="http://futbol.as.com/futbol/2017/01/18/primera/1484779465_999489.html" rel="ca...
AMP se almacena y se sirve desde cachés en
Google
https://www.google.es/amp/futbol.as.com/futbol/2017/01/18/primera/148477...
@fernandomacia @humanlevel @HLCFormacion
Ventajas e inconvenientes
de cada solución
Responsive: ventajas
Fácil de mantener
Evita problemas potenciales de contenido
duplicado/cloaking
Todos los enlaces se co...
Atención a los bloques de texto SEO!!!!
Responsive: desventajas
A veces, el escenario de uso del sitio Web es
distinto para el usuario que usa cada dispositivo,
p...
HTML dinámico: ventajas
Seguimos teniendo una única URL por
contenido: no hay problema de contenido
duplicado.
La populari...
Sitios Web con HTML dinámico: priorización de la
navegación sobre el contenido
HTML dinámico: desventajas
Más complicado de mantener.
Más caro de desarrollar: necesitaremos
duplicar el diseño de planti...
Mobile específica: ventajas
Implementación y desarrollo, en principio,
más sencillos
Se puede optimizar el código, peso de ...
Mobile específica: desventajas
Hay más riesgos de que, en caso de no
implementarse correctamente los alternate/
canonical, ...
@fernandomacia @humanlevel @HLCFormacion
Comprobando:
Rastreo de la versión móvil
Google Search Console: explorar como
Googlebot/mobile
Google Search Console: explorar como
Googlebot/mobile para comprobar redirección
Comprobar versión móvil con Screaming Frog
Comprobando respuesta del servidor con Web-
Sniffer usando distintos user-agents
Googlebot: user-agents
Comprobando respuesta del servidor con Web-
Sniffer usando distintos user-agents
Requisitos para que las noticias aparezcan como
destacadas en búsquedas móviles
Implementación HTML AMP correcta
Implement...
Validar la implementación AMP
Plugin para Chrome: valida la implementación
AMP https://chrome.google.com/webstore/
detail/...
Validación AMP: plug-in para Chrome
Validación de AMP (Google)
@fernandomacia @humanlevel @HLCFormacion
Validación de usabilidad
móvil
Validación mobile: Google Developers
Validación mobile: Think with Google
Validación mobile: Think with Google
Velocidad de descarga: PageSpeed Insights
@fernandomacia @humanlevel @HLCFormacion
Errores en la versión móvil
Google Search Console: errores de rastreo
Google Search Console: errores de usabilidad
Comprobar errores AMP en Google Search
Console
@fernandomacia @humanlevel @HLCFormacion
Problemas de contenido
duplicado/cloaking
Contenido duplicado/cloaking
En implementaciones de diseño
adaptativo no se pueden dar debido a que
hay una única fuente H...
Contenido duplicado/cloaking
Si hay páginas mobile específicas sin
contenido equivalente en la versión
desktop, no hay pro...
@fernandomacia @humanlevel @HLCFormacion
Posicionamiento
comparativo entre móvil y
sobremesa
Compara resultados de Google para DT y Mobile
de tus palabras clave más importantes
Comprobando posiciones con Advanced Web
Ranking: Resultados geolocalizados/locales
Comprobando posiciones con Advanced Web Ranking:
comparativa de resultados sobremesa/móviles
Comprobando visibilidad desktop vs. mobile con
SEMRush (de momento sólo para algunos países)
Google Search Console: análisis de búsqueda/
comparar clics por tipo de dispositivo
Google Search Console: análisis de búsqueda/
comparar posición media por tipo de dispositivo
Google Search Console: análisis de búsqueda/
filtrar por resultados AMP
Google Search Console: búsquedas que están
generando tráfico móvil
Comprobar versión móvil con Safari: comprobar
resultados Google Mobile - AMP/noticias
@fernandomacia @humanlevel @HLCFormacion
Cómo orientar nuestro sitio Web
a un mundo “mobile-only”
Optimiza tu sitio para búsquedas probables desde
móvil (cerca de…)
Evita los interstitials que bloquean toda la
pantalla
Algunas ideas más…
Diseña la arquitectura y prototipado de tu sitio Web pensando
en los escenarios de uso de tus clientes ...
Fernando Maciá Domene
@fernandomacia

CEO Human Level Communications

@fernandomacia @humanlevel@HLCFormacion
Estrategias de posicionamiento para un mundo que busca desde el móvil
Estrategias de posicionamiento para un mundo que busca desde el móvil
Próximos SlideShares
Carregando em…5
×

Estrategias de posicionamiento para un mundo que busca desde el móvil

214 visualizações

Publicada em

Fernando Maciá

  • Seja o primeiro a comentar

Estrategias de posicionamiento para un mundo que busca desde el móvil

  1. 1. Estrategias SEO para un mundo que busca desde el móvil Fernando Maciá Human Level Communications
  2. 2. @fernandomacia @humanlevel @HLCFormacion ¿Qué significa un índice de Google “mobile-first”?
  3. 3. Mobile supera en noviembre de 2016 al tráfico desktop por primera vez (StatCounter)
  4. 4. Google avisó, y en noviembre de 2016 llegó el aviso definitivo: ahora “sí que sí”
  5. 5. ¿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.
  6. 6. Usar mismo marcado de datos tanto en versión desktop como en la versión mobile
  7. 7. Añade tu sitio mobile específico a Google Search Console y verifica su propiedad
  8. 8. Comprobar que la configuración de robots.txt no impide el acceso al contenido mobile
  9. 9. 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
  10. 10. @fernandomacia @humanlevel @HLCFormacion ¿Cómo afecta el acceso desde móviles al uso de Internet?
  11. 11. 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
  12. 12. Limitaciones: área, formato y resolución de pantalla iPhone 5S iPhone 6 Plus iPad Air 2 MacBook 15" Retina iMac Retina 5K
  13. 13. 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”
  14. 14. 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
  15. 15. Contexto: móvil significa búsqueda local
  16. 16. Mayor importancia a la jerarquía de navegación 95% navegación 45% productos
  17. 17. Incluir la opción más popular por defecto en menús desplegables
  18. 18. Configurar formularios para facilitar el autocompletado…
  19. 19. … o bien ofrecer la posibilidad de un social login
  20. 20. Optimizar accesibilidad: tamaño de letra escalable
  21. 21. @fernandomacia @humanlevel @HLCFormacion ¿Cómo afecta el acceso desde móviles a nuestro sitio?
  22. 22. ¿Qué parte de tu público usa dispositivos móviles y procede de SEO?
  23. 23. Comparando indicadores de calidad del tráfico que llega desde distintos dispositivos
  24. 24. Comparando el comportamiento del tráfico que llega desde distintos dispositivos
  25. 25. Comparando las mejores landing pages de tráfico orgánico desktop vs. mobile
  26. 26. Análisis de búsquedas en Google Search Console comparando por tipo de dispositivo
  27. 27. El tráfico móvil está contribuyendo decisivamente a la conversión, el tráfico y los ingresos
  28. 28. Algunos sitios Web aún tienen problemas para convertir su tráfico de móviles
  29. 29. Y… ¿estamos preparados? Comprobamos con la Prueba de optimización para móviles de Google
  30. 30. Comprobar versiones móviles con Safari: activar menú Desarrollo en Preferencias
  31. 31. Comprobar versión móvil con Safari: Adoptar modo de diseño con capacidad de respuesta
  32. 32. Comprobar versión móvil con Safari: “disfrazarse” de otro navegador
  33. 33. Comprobar versión móvil con Chrome: inspeccionar elementos
  34. 34. Comprobar versión móvil con Chrome: Network conditions - User-agent
  35. 35. Comprobar versión móvil con Firefox/Web Developer Tools plug-in: View responsive layouts
  36. 36. Comprobar versión móvil con Firefox > Herramientas > Vista de diseño adaptable
  37. 37. @fernandomacia @humanlevel @HLCFormacion Vías de adaptación de nuestro sitio Web al entorno móvil
  38. 38. Google introdujo su robot mobile en diciembre de 2011
  39. 39. Directrices de Google genéricas para sitios móviles
  40. 40. 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)
  41. 41. 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
  42. 42. Responsive design
  43. 43. 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
  44. 44. Sitios Web con HTML dinámico
  45. 45. 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)
  46. 46. Versión mobile (m.domain.com)
  47. 47. 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.
  48. 48. Ejemplo de páginas AMP Versión HTML Versión AMP
  49. 49. 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
  50. 50. 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
  51. 51. Versión desktop vs. versión AMP Versión DT Versión DT Versión AMP
  52. 52. 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" />
  53. 53. Configuración AMP en versión AMP <link href="http://futbol.as.com/futbol/2017/01/18/primera/1484779465_999489.html" rel="canonical" >
  54. 54. 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
  55. 55. @fernandomacia @humanlevel @HLCFormacion Ventajas e inconvenientes de cada solución
  56. 56. 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
  57. 57. Atención a los bloques de texto SEO!!!!
  58. 58. 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
  59. 59. 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.
  60. 60. Sitios Web con HTML dinámico: priorización de la navegación sobre el contenido
  61. 61. 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.
  62. 62. 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
  63. 63. 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.
  64. 64. @fernandomacia @humanlevel @HLCFormacion Comprobando: Rastreo de la versión móvil
  65. 65. Google Search Console: explorar como Googlebot/mobile
  66. 66. Google Search Console: explorar como Googlebot/mobile para comprobar redirección
  67. 67. Comprobar versión móvil con Screaming Frog
  68. 68. Comprobando respuesta del servidor con Web- Sniffer usando distintos user-agents
  69. 69. Googlebot: user-agents
  70. 70. Comprobando respuesta del servidor con Web- Sniffer usando distintos user-agents
  71. 71. 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)
  72. 72. 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
  73. 73. Validación AMP: plug-in para Chrome
  74. 74. Validación de AMP (Google)
  75. 75. @fernandomacia @humanlevel @HLCFormacion Validación de usabilidad móvil
  76. 76. Validación mobile: Google Developers
  77. 77. Validación mobile: Think with Google
  78. 78. Validación mobile: Think with Google
  79. 79. Velocidad de descarga: PageSpeed Insights
  80. 80. @fernandomacia @humanlevel @HLCFormacion Errores en la versión móvil
  81. 81. Google Search Console: errores de rastreo
  82. 82. Google Search Console: errores de usabilidad
  83. 83. Comprobar errores AMP en Google Search Console
  84. 84. @fernandomacia @humanlevel @HLCFormacion Problemas de contenido duplicado/cloaking
  85. 85. 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
  86. 86. 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.
  87. 87. @fernandomacia @humanlevel @HLCFormacion Posicionamiento comparativo entre móvil y sobremesa
  88. 88. Compara resultados de Google para DT y Mobile de tus palabras clave más importantes
  89. 89. Comprobando posiciones con Advanced Web Ranking: Resultados geolocalizados/locales
  90. 90. Comprobando posiciones con Advanced Web Ranking: comparativa de resultados sobremesa/móviles
  91. 91. Comprobando visibilidad desktop vs. mobile con SEMRush (de momento sólo para algunos países)
  92. 92. Google Search Console: análisis de búsqueda/ comparar clics por tipo de dispositivo
  93. 93. Google Search Console: análisis de búsqueda/ comparar posición media por tipo de dispositivo
  94. 94. Google Search Console: análisis de búsqueda/ filtrar por resultados AMP
  95. 95. Google Search Console: búsquedas que están generando tráfico móvil
  96. 96. Comprobar versión móvil con Safari: comprobar resultados Google Mobile - AMP/noticias
  97. 97. @fernandomacia @humanlevel @HLCFormacion Cómo orientar nuestro sitio Web a un mundo “mobile-only”
  98. 98. Optimiza tu sitio para búsquedas probables desde móvil (cerca de…)
  99. 99. Evita los interstitials que bloquean toda la pantalla
  100. 100. 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
  101. 101. Fernando Maciá Domene @fernandomacia CEO Human Level Communications @fernandomacia @humanlevel@HLCFormacion

×