Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Optimizando tu Web para una Búsqueda Mobile First #Innobi18

1,063 views

Published on

¿Cómo prepararte para la indexación centrada en móvil de Google? Aquí tienes validaciones, herramientas y pasos a seguir para optimizar tu Web móvil.

Published in: Marketing

Optimizando tu Web para una Búsqueda Mobile First #Innobi18

  1. 1. #busquedamovil en #innobi18 por @aleyda de @orainti Preparando tu Web para la Búsqueda con Indexación Centrada en Móvil #busquedamovil en #innobi18 por @aleyda de @orainti
  2. 2. #busquedamovil en #innobi18 por @aleyda de @orainti Hace no mucho tiempo en 
 una galaxia no muy lejana... #busquedamovil en #innobi18 por @aleyda de @orainti
  3. 3. #busquedamovil en #innobi18 por @aleyda de @orainti Los móviles se han convertido en el dispositivo 
 primario para consumir contenido digital
  4. 4. #busquedamovil en #innobi18 por @aleyda de @orainti Muy primario Would you be willing to give up your Mobile phone?
  5. 5. #busquedamovil en #innobi18 por @aleyda de @orainti Desde el 2014 los móviles han generado 
 el aumento del tiempo en medios digitales
  6. 6. #busquedamovil en #innobi18 por @aleyda de @oraintisimilarweb.com También en España, donde los sitios líderes 
 atraen más tráfico móvil que escritorio
  7. 7. #busquedamovil en #innobi18 por @aleyda de @orainti El 20% de las transacciones de comercio electrónico 
 ya se realizan desde dispositivos móviles
  8. 8. #busquedamovil en #innobi18 por @aleyda de @oraintihttp://searchengineland.com/report-nearly-60-percent-searches-now-mobile-devices-255025 Desde hace un par de años la mayoría de búsquedas 
 se realizan desde dispositivos móviles también
  9. 9. #busquedamovil en #innobi18 por @aleyda de @orainti Por ello Google anunció desde hace dos años que pasaría a usar la versión móvil de las Webs para su posicionamiento https://webmaster-es.googleblog.com/2016/11/indexacion-centrada-moviles.html
  10. 10. #busquedamovil en #innobi18 por @aleyda de @orainti Y hace unos días ha publicado que ya ha comenzado a 
 migrar su indexación para los sitios ya optimizados https://webmaster-es.googleblog.com/2018/04/indexacion-movil_16.html
  11. 11. #busquedamovil en #innobi18 por @aleyda de @orainti ¿Qué cambia con el Mobile First Index? https://developers.google.com/search/mobile-sites/mobile-first-indexing#best-practices
  12. 12. #busquedamovil en #innobi18 por @aleyda de @orainti Muchas Webs desgraciadamente aún no están preparadas, 
 ya que tener una Web móvil no significa que esté optimizada
  13. 13. #busquedamovil en #innobi18 por @aleyda de @orainti#busquedamovil en #innobi18 por @aleyda de @orainti Es momento de garantizar que tu Web está preparada para el Mobile First Index
  14. 14. #busquedamovil en #innobi18 por @aleyda de @orainti#busquedamovil en #innobi18 por @aleyda de @orainti Comienza verificando si tu sitio ya ha sido migrado al 
 índice mobile first
  15. 15. #busquedamovil en #innobi18 por @aleyda de @orainti ¿Has recibido notificación?
  16. 16. #busquedamovil en #innobi18 por @aleyda de @orainti ¿Se está rastreando con más frecuencia tu Web con el googlebot móvil? Analiza los logs de tu Web Screaming Frog Log Analyser & SEOlyzer.io
  17. 17. #busquedamovil en #innobi18 por @aleyda de @orainti ¿Qué versión de tus páginas se muestra 
 en la caché de Google?
  18. 18. #busquedamovil en #innobi18 por @aleyda de @orainti Valida si tu Web móvil está correctamente configurada #busquedamovil en #innobi18 por @aleyda de @orainti
  19. 19. #busquedamovil en #innobi18 por @aleyda de @orainti Sitio Web Responsive Publicación Dinámica Web móvil independiente Existen tres tipos de configuraciones móviles
  20. 20. #busquedamovil en #innobi18 por @aleyda de @orainti El diseño Web responsive usa los CSS Media Queries para modificar el tamaño, formato y organización del mismo HTML Mobile
  21. 21. #busquedamovil en #innobi18 por @aleyda de @orainti La publicación dinámica muestra distintos HTMLs 
 a través de la misma URL según el agente de usuario Desktop Mobile
  22. 22. #busquedamovil en #innobi18 por @aleyda de @orainti Las Webs móviles independientes sirven distintos HTMLs según el agente de usuario a través de URLs diferentes Desktop Mobile
  23. 23. #busquedamovil en #innobi18 por @aleyda de @orainti Cada una tiene pros y contras https://developers.google.com/search/mobile-sites/mobile-seo/ Sitio Web Responsive Publicación Dinámica Web móvil independiente Menos opciones de personalización y mayor peso de página Mayor trabajo de mantener y dificultad para mostrar la versión correcta Mayor trabajo de configurar, servir, rastrear y mantener
  24. 24. #busquedamovil en #innobi18 por @aleyda de @orainti Pero son todas reconocidas por Google https://developers.google.com/search/mobile-sites/mobile-seo/
  25. 25. #busquedamovil en #innobi18 por @aleyda de @orainti Siempre y cuando la configuración móvil 
 siga ciertas buenas prácticas Sitio Web Responsive Publicación Dinámica Web móvil independiente No bloquear imágenes, css & js Incluir el vary: User-Agent en HTTP Header Identificar y servir la versión de HTML correcta de acuerdo al agente de usuario Implementar el etiquetado rel alternate y canonical entre las páginas móviles y de escritorio Implementar redirecciones 301 entre las páginas móviles y escritorio en caso que se acceda a la versión incorrecta https://developers.google.com/search/mobile-sites/mobile-seo/
  26. 26. #busquedamovil en #innobi18 por @aleyda de @orainti Estas configuraciones no deberán cambiarse con el índice mobile-first, tampoco la de las Webs móviles independientes
  27. 27. #busquedamovil en #innobi18 por @aleyda de @orainti Aunque se deben de garantizar ciertas buenas prácticas especialmente con las configuraciones con HTMLs específicos https://developers.google.com/search/mobile-sites/mobile-first-indexing#best-practices
  28. 28. #busquedamovil en #innobi18 por @aleyda de @orainti Es crítico entonces comenzar verificando que cualquiera sea 
 el tipo de configuración móvil si pasa la validación de Google https://search.google.com/test/mobile-friendly
  29. 29. #busquedamovil en #innobi18 por @aleyda de @orainti Usa Google Analytics para identificar cuáles son los dispositivos móviles más usados por tus visitantes Google Analytics
  30. 30. #busquedamovil en #innobi18 por @aleyda de @orainti Emula los dispositivos más usados para verificar cómo 
 se visualizan tus páginas más importantes con Chrome CLIC DERECHO + INSPECCIONAR bit.ly/chromedevicemode
  31. 31. #busquedamovil en #innobi18 por @aleyda de @orainti Verifica si se generan errores en el informe de 
 Usabilidad Móvil de Google Search Console Google Search Console
  32. 32. #busquedamovil en #innobi18 por @aleyda de @orainti Puedes usar rastreadores SEO para verificar 
 todas las URLs de tu Web fácilmente Sitebulb
  33. 33. #busquedamovil en #innobi18 por @aleyda de @orainti Así como para verificar si todas las URLs 
 se encuentran efectivamente optimizadas Deepcrawl
  34. 34. #busquedamovil en #innobi18 por @aleyda de @orainti Tu contenido, metadatos, marcado estructurado y etiquetas hreflang deben también encontrarse en tu Web móvil #busquedamovil en #innobi18 por @aleyda de @orainti
  35. 35. #busquedamovil en #innobi18 por @aleyda de @orainti > Es usual que las páginas móviles muestren menos contenido que la versiones de escritorio
  36. 36. #busquedamovil en #innobi18 por @aleyda de @orainti Con el mobile first index debes mostrar todo el contenido y metadata (títulos, descripciones) en las páginas móviles http://searchengineland.com/faq-google-mobile-first-index-262751
  37. 37. #busquedamovil en #innobi18 por @aleyda de @orainti No hay ningún problema con ocultar el contenido con CSS en este caso
  38. 38. #busquedamovil en #innobi18 por @aleyda de @orainti Lo mismo con el marcado estructurado, debe también comenzar a incluirse en las páginas móviles si no se hacía http://www.thesempost.com/details-googles-mobile-first-indexing-change/#Structured_Data
  39. 39. #busquedamovil en #innobi18 por @aleyda de @orainti Lo cual es fundamental para generar resultados enriquecidos
  40. 40. #busquedamovil en #innobi18 por @aleyda de @orainti Y si tienes una Web internacional con hreflang, 
 configura también el etiquetado en las URLs móviles http://www.thesempost.com/details-googles-mobile-first-indexing-change/#Structured_Data
  41. 41. #busquedamovil en #innobi18 por @aleyda de @orainti Por otro lado, debes evitar los pop-ups e interstitials 
 que evitan que tu contenido móvil se visualice al acceder https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html
  42. 42. #busquedamovil en #innobi18 por @aleyda de @orainti LANZAMIENTO DE LA ACTUALIZACIÓN DE POP UP MÓVIL https://www.sistrix.com/blog/pinterst-com-hit-googles-interstitials-update/ De lo contrario, esta puede ser la consecuencia
  43. 43. #busquedamovil en #innobi18 por @aleyda de @orainti Para referir apps es mejor usar los app banners https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html
  44. 44. #busquedamovil en #innobi18 por @aleyda de @orainti Para verificar que haces todo esto rastrea tu Web como el 
 googlebot móvil con el renderizado de JS habilitado Screaming Frog
  45. 45. #busquedamovil en #innobi18 por @aleyda de @orainti POR QUÉ ESTOS RECURSOS SE MUESTRAN CON ERRORES? COMO SE RENDERIZA EL CONTENIDO MÓVIL? Verifica que no existen errores, redirecciones 
 no relevantes, URLs noindexadas o bloquedas
  46. 46. #busquedamovil en #innobi18 por @aleyda de @orainti Valida los títulos, meta descripciones, el contenido etiquetas de encabezado, marcado estructurado y hreflang LOS TÍTULOS SON RELEVANTES PARA CADA PÁGINA?
  47. 47. #busquedamovil en #innobi18 por @aleyda de @orainti Haz una auditoría de “paridad” para comparar el comportamiento del rastreo móvil vs. escritorio https://moz.com/blog/mobile-parity-audits
  48. 48. #busquedamovil en #innobi18 por @aleyda de @orainti Tu web móvil también debe ser rápida, mucho #busquedamovil en #innobi18 por @aleyda de @orainti
  49. 49. #busquedamovil en #innobi18 por @aleyda de @orainti La velocidad de tu Web es crítica para la experiencia 
 y conversión de los usuarios móviles https://www.thinkwithgoogle.com/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/
  50. 50. #busquedamovil en #innobi18 por @aleyda de @orainti Así como de su bienestar
  51. 51. #busquedamovil en #innobi18 por @aleyda de @orainti Lo cual se hará aún más importante con la 
 actualización de velocidad móvil de Google https://webmaster-es.googleblog.com/2018/04/velocidad-posicionamiento-movil.html
  52. 52. #busquedamovil en #innobi18 por @aleyda de @orainti Sin embargo, esta es nuestra realidad en velocidad https://www.thinkwithgoogle.com/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/
  53. 53. #busquedamovil en #innobi18 por @aleyda de @orainti En España también https://testmysite.withgoogle.com/
  54. 54. #busquedamovil en #innobi18 por @aleyda de @orainti Y no solo con las Webs de noticias, 
 también las transaccionales https://testmysite.withgoogle.com/
  55. 55. #busquedamovil en #innobi18 por @aleyda de @orainti ¿Qué tal la velocidad móvil de tu propia Web? #busquedamovil en #innobi18 por @aleyda de @orainti
  56. 56. #busquedamovil en #innobi18 por @aleyda de @orainti#mobilefirstseo at #TuringFest by @aleyda from @orainti Usa Google Analytics para verificar cuáles de las páginas móviles más importantes toman más tiempo en cargar Google Analytics
  57. 57. #busquedamovil en #innobi18 por @aleyda de @orainti Verifica la velocidad de tus páginas más importantes 
 con la herramienta Lighthouse en Chrome
  58. 58. #busquedamovil en #innobi18 por @aleyda de @orainti Obteniendo directamente los recursos que 
 necesitan ser optimizados también
  59. 59. #busquedamovil en #innobi18 por @aleyda de @orainti La solución es implementar los principios de optimización 
 de velocidad para hacer que tu Web móvil cargue rápido https://developers.google.com/speed/docs/insights/rules
  60. 60. #busquedamovil en #innobi18 por @aleyda de @orainti Sin embargo, por las restricciones usuales en las plataformas Web en implementarlas, Google lanzó AMP hace dos años http://searchengineland.com/amp-top-stories-now-live-243314
  61. 61. #busquedamovil en #innobi18 por @aleyda de @orainti AMP usa una versión de HTML simplificada con recursos y caché optimizados para servir páginas móviles rápidas
  62. 62. #busquedamovil en #innobi18 por @aleyda de @orainti Por ello Google hizo de AMP un requerimiento 
 para ser incluido en las “Top Stories” Resultados AMP en el Carrusel AMP en Resultados Orgánicos
  63. 63. #busquedamovil en #innobi18 por @aleyda de @orainti Las páginas AMP se pueden publicar 
 “paralelamente” a tu Web (lenta) actual https://www.forbes.com/sites/alanwolk/2017/09/07/apple-is- losing-its-cool-factor-and-thats-a-problem-if-they-want-to-break- into-tv/#4707740c71f8 https://www.forbes.com/sites/alanwolk/2017/09/07/apple- is-losing-its-cool-factor-and-thats-a-problem-if-they-want-to- break-into-tv/amp/ Web Móvil Original URL en AMP
  64. 64. #busquedamovil en #innobi18 por @aleyda de @orainti Para que se muestren en su lugar en los resultados 
 de búsqueda móviles con una mejor velocidad Web Móvil Original URL en AMP
  65. 65. #busquedamovil en #innobi18 por @aleyda de @orainti Sin embargo, las página AMP no son indexables y esto no cambiará con el índice móvil, no reemplazan a tu propia Web
  66. 66. #busquedamovil en #innobi18 por @aleyda de @orainti También se anunció hace poco que se permitirá optimizar las Webs estándares de forma similar con los mismos beneficios https://amphtml.wordpress.com/2018/03/08/standardizing-lessons-learned-from-amp/
  67. 67. #busquedamovil en #innobi18 por @aleyda de @orainti#winningmobile at #learninbound by @aleyda from @orainti Usa AMP entonces como una solución alternativa 
 en estos tres tipos de escenarios Tienes un problema de velocidad Web y no puedes optimizar tu propio sitio de ninguna forma Necesitas la inclusión en el carrusel de “top stories” ASAP Estás desarrollando una nueva web y AMP ofrece la forma más fácil de implementar tus funcionalidades 1 2 3
  68. 68. #busquedamovil en #innobi18 por @aleyda de @orainti Si implementas una versión AMP asegúrate que la interfaz, funcionalidad y contenido sea la misma a la original <>WEB ORIGINAL VERSIÓN AMP
  69. 69. #busquedamovil en #innobi18 por @aleyda de @orainti Si quieres saber más sobre como optimizar tus páginas AMP echa un vistazo a mi presentación de la #AMPConf https://www.aleydasolis.com/en/search-engine-optimization/amp-accelerated-mobile-pages/
  70. 70. #busquedamovil en #innobi18 por @aleyda de @orainti#winningmobile at #searchstarsSE by @aleyda from @orainti#busquedamovil en #innobi18 por @aleyda de @orainti Tristemente el tiempo se acaba…
  71. 71. #busquedamovil en #innobi18 por @aleyda de @orainti Aquí tienes un resumen de lo que debes validar de forma fundamental para prepararte al mobile first index #busquedamovil en #innobi18 por @aleyda de @oraintihttps://developers.google.com/search/mobile-sites/mobile-first-indexing#best-practices Todo el contenido, meta datos, marcado estructurado y hreflang debe ser también accesible e indexable en tus páginas móviles, evitando usar pop- ups o interstitials Tu Web móvil responsive, independiente o dinámica debe seguir la configuración específica en cada caso para ser reconocida de forma efectiva Tu Web móvil debe ser rápidísima, AMP no sustituye tu propia Web móvil ya que no es indexable
  72. 72. #busquedamovil en #innobi18 por @aleyda de @orainti Además de muchas más preguntas que responder para maximizar tu visibilidad en la búsqueda mobile first ¿Cual es el comportamient o de tu audiencia de búsqueda móvil? ¿Cuál es la visibilidad, tráfico y conversión de tu Web móvil? ¿Cuál es la visibilidad móvil de tu competencia? ¿Tu sitio tiene una versión Web móvil? ¿Cómo los rastreadores móviles acceden a tu sitio Web? ¿Cuál es la velocidad de tu Web móvil? ¿El contenido Web móvil de tu sitio se renderiza correctamente ? ¿Tu implementació n de AMP está generando errores? ¿Cómo se ven tus páginas en los resultados móviles? ¿Cuál es el impacto de tu versión AMP en los resultados móviles? ¿Cuál es el impacto de tu visibilidad móvil en las conversiones ? https://www.slideshare.net/aleydasolis/setting-amp-for-success-at-brightonseo
  73. 73. #busquedamovil en #innobi18 por @aleyda de @orainti Y cómo contestarlas con las distintas herramientas SEO #mobilefirstseo at #TuringFest by @aleyda from @orainti https://moz.com/blog/mobile-seo-stack-tools
  74. 74. #busquedamovil en #innobi18 por @aleyda de @orainti Es el momento de hacer crecer tu visibilidad, 
 tráfico y conversiones móviles con el índice mobile first
  75. 75. #busquedamovil en #innobi18 por @aleyda de @orainti#busquedamovil en #innobi18 por @aleyda de @orainti Ahora es tu turno

×