Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

SEO y JavaScript - Ensalada SEO 2019 - Laura López

1.352 visualizaciones

Publicado el

La evolución del JavaScript en SEO y experimentos para comprobar cómo está renderizando Google el contenido JS después de la actualización evergreen.

Publicado en: Marketing
  • Sé el primero en comentar

SEO y JavaScript - Ensalada SEO 2019 - Laura López

  1. 1. La evolución del SEO en JavaScript
  2. 2. Laura López @lopsa_laulinkedin.com/in/laura-lopez-yoseseo #ensaladaSEO
  3. 3. JAVASCRIPT
  4. 4. #ensaladaSEO @lopsa_lau¿Qué es el JavaScript?
  5. 5. #ensaladaSEO @lopsa_lauEs una tecnología todavía “inmadura”
  6. 6. Errores masivos propagados de forma rápida #ensaladaSEO @lopsa_lau
  7. 7. #ensaladaSEO @lopsa_lauProblemas de renderizado
  8. 8. EVOLUCIÓN
  9. 9. Google no es capaz de rastrear contenido dinámico Evolución de JavaScript 2007 2009 2014 2015 2016 2017 2018 2019
  10. 10. Evolución de JavaScript #ensaladaSEO @lopsa_lau Los inicios: 2007 Google no es capaz de rastrear el contenido generado dinámicamente
  11. 11. Google no es capaz de rastrear contenido dinámico Aparición del escaped_fragment como solución para el renderizado dinámico Evolución de JavaScript 2007 2009 2014 2015 2016 2017 2018 2019
  12. 12. Evolución de JavaScript #ensaladaSEO @lopsa_lau 2009 ● Recomienda incluir el parámetro #! ● Así Google identificaba estas URLs, solicitando al servidor el contenido dinámico para poder procesarlo e indexarlo, añadiendo a la url de la página el argumento _escaped_fragment_
  13. 13. Google no es capaz de rastrear contenido dinámico Aparición del escaped_fragment como solución para el renderizado dinámico Google empieza a entender mejor el JavaScript y busca mejores soluciones de renderizado Evolución de JavaScript 2007 2009 2014 2015 2016 2017 2018 2019
  14. 14. Evolución de JavaScript #ensaladaSEO @lopsa_lau 2014
  15. 15. Google no es capaz de rastrear contenido dinámico Aparición del escaped_fragment como solución para el renderizado dinámico Google empieza a entender mejor el JavaScript y busca mejores soluciones de renderizado Desestiman las recomendaciones que hicieron en 2009 Evolución de JavaScript 2007 2009 2014 2015 2016 2017 2018 2019
  16. 16. Evolución de JavaScript #ensaladaSEO @lopsa_lau 2015 Google anuncia que ya no recomiendan más los ajustes en Ajax que habían solicitado porque son capaces de rastrear contenido dinámico.
  17. 17. Google no es capaz de rastrear contenido dinámico Aparición del escaped_fragment como solución para el renderizado dinámico Google empieza a entender mejor el JavaScript y busca mejores soluciones de renderizado Desestiman las recomendaciones que hicieron en 2009 Utilizan Chrome 41 para rastrear el contenido web Primeras recomendacion es de PWA Evolución de JavaScript 2007 2009 2014 2015 2016 2017 2018 2019
  18. 18. Evolución de JavaScript #ensaladaSEO @lopsa_lau https://www.deepcrawl.com/blog/news/what-version-of-chrome-is-google-actually-using-for-rendering/ 2016
  19. 19. Evolución de JavaScript #ensaladaSEO @lopsa_lau 2016 Google da recomendaciones sobre SSR y CSR para las PWAs
  20. 20. Google no es capaz de rastrear contenido dinámico Aparición del escaped_fragment como solución para el renderizado dinámico Google empieza a entender mejor el JavaScript y busca mejores soluciones de renderizado Desestiman las recomendaciones que hicieron en 2009 Utilizan Chrome 41 para rastrear el contenido web Primeras recomendacion es de PWA Eliminación definitiva del escaped_fragment Evolución de JavaScript 2007 2009 2014 2015 2016 2017 2018 2019
  21. 21. Evolución de JavaScript #ensaladaSEO @lopsa_lau 2017 Actualización sobre el renderizado de las páginas en Ajax y eliminación definitiva del escaped_fragment
  22. 22. Google no es capaz de rastrear contenido dinámico Aparición del escaped_fragment como solución para el renderizado dinámico Google empieza a entender mejor el JavaScript y busca mejores soluciones de renderizado Desestiman las recomendaciones que hicieron en 2009 Utilizan Chrome 41 para rastrear el contenido web Primeras recomendacion es de PWA Eliminación definitiva del escaped_fragment Hablan de la segunda ola de indexación Evolución de JavaScript 2007 2009 2014 2015 2016 2017 2018 2019
  23. 23. Evolución de JavaScript #ensaladaSEO @lopsa_lau 2018 Presentan en el Google I/O cómo funciona para Google la renderización en JavaScript hablando de las 2 olas de indexación.
  24. 24. Google no es capaz de rastrear contenido dinámico Aparición del escaped_fragment como solución para el renderizado dinámico Google empieza a entender mejor el JavaScript y busca mejores soluciones de renderizado Desestiman las recomendaciones que hicieron en 2009 Utilizan Chrome 41 para rastrear el contenido web Primeras recomendacion es de PWA Eliminación definitiva del escaped_fragment Hablan de la segunda ola de indexación Actualización Evergreen para Googlebot Evolución de JavaScript 2007 2009 2014 2015 2016 2017 2018 2019
  25. 25. Evolución de JavaScript #ensaladaSEO @lopsa_lau 2019
  26. 26. #ensaladaSEO @lopsa_lau Pero, ¿qué es lo que sucede realmente entre Google y el JavaScript?
  27. 27. Pr Google y el JavaScript #ensaladaSEO @lopsa_lau Problemas con los que se encuentra Google: 1.Rastreo 2. Renderización
  28. 28. #ensaladaSEO @lopsa_lau Pr Pr HTML Un solo paso Rastreo y renderización se realizan en el mismo momento. JAVASCRIPT Dos pasos 1. Rastrea 2. Detecta el JavaScript y lo tiene que renderizar Rastreo + Renderización Google y el JavaScript
  29. 29. Renderización #ensaladaSEO @lopsa_lau 1 2
  30. 30. TIPOS DE RENDERIZADO
  31. 31. SSR: Server Side Rendering #ensaladaSEO @lopsa_lau El HTML se sirve desde el servidor como una web tradicional
  32. 32. Renderizado SSR #ensaladaSEO @lopsa_lau CON JAVASCRIPT SIN JAVASCRIPT
  33. 33. CSR: Client Side Rendering #ensaladaSEO @lopsa_lau El HTML se genera en el navegador del usuario mediante JavaScript
  34. 34. Renderizado CSR #ensaladaSEO @lopsa_lau CON JAVASCRIPT SIN JAVASCRIPT
  35. 35. ISOMORFO: SSR + CSR #ensaladaSEO @lopsa_lau Es una mezcla entre los dos anteriores. Se sirve una parte como un HTML plano y otra desde el navegador dinámicamente
  36. 36. Renderizado ISOMORFO #ensaladaSEO @lopsa_lau CON JAVASCRIPT SIN JAVASCRIPT
  37. 37. Elementos SEO imprescindibles #ensaladaSEO @lopsa_lau 1.Etiquetas SEO 2.Contenido 3.Enlazado yoseseo.es/herramientas-seo-javascript
  38. 38. PERO…¿QUÉ ESTÁ PASANDO AHORA?
  39. 39. Actualidad del JavaScript #ensaladaSEO @lopsa_lau CHROMIUM TESTING TOOLS
  40. 40. Experimento 1: Renderizado #ensaladaSEO @lopsa_lau EXPERIMENTO: TIEMPO DE RENDERIZADO @vmrecio
  41. 41. Experimento 1: Renderizado #ensaladaSEO @lopsa_lau 1.Contador de tiempo para analizar el renderizado. 2.Renderizado en las diferentes herramientas.
  42. 42. Experimento 1: Renderizado #ensaladaSEO @lopsa_lau PRUEBA 1- 35 RECURSOS SIN CARGAR
  43. 43. Experimento 1: Renderizado #ensaladaSEO @lopsa_lau PRUEBA 2- 18 RECURSOS SIN CARGAR
  44. 44. Experimento 1: Renderizado #ensaladaSEO @lopsa_lau
  45. 45. Experimento 1: Renderizado #ensaladaSEO @lopsa_lau
  46. 46. Experimento 2: Scroll #ensaladaSEO @lopsa_lau EXPERIMENTO: SCROLL CON JAVASCRIPT @RomanPlateau
  47. 47. #ensaladaSEO @lopsa_lau Generamos un scroll infinito para comprobar si Google es capaz de seguirlo.
  48. 48. Experimento 2: Scroll #ensaladaSEO @lopsa_lau
  49. 49. Experimento 2: Scroll #ensaladaSEO @lopsa_lau
  50. 50. Experimento 2: Scroll #ensaladaSEO @lopsa_lau ¿Hace Google scroll en una página Javascript?
  51. 51. Experimento 3: Interacción botón #ensaladaSEO @lopsa_lau EXPERIMENTO: INTERACCIÓN BOTÓN JAVASCRIPT @RomanPlateau
  52. 52. #ensaladaSEO @lopsa_lau Comprobamos si Google es capaz de interactuar con un botón de cargar más
  53. 53. Experimento 3: Interacción botón #ensaladaSEO @lopsa_lau
  54. 54. Experimento 3: Interacción botón #ensaladaSEO @lopsa_lau
  55. 55. Experimento 3: Interacción botón #ensaladaSEO @lopsa_lau ¿Hace Google interacción en un botón con Javascript?
  56. 56. Experimento 4: On load #ensaladaSEO @lopsa_lau EXPERIMENTO: CARGA ON LOAD @RomanPlateau
  57. 57. #ensaladaSEO @lopsa_lau Cargamos el JavaScript en el on load para comprobar si Google lo ejecuta y renderiza
  58. 58. Experimento 4: On load #ensaladaSEO @lopsa_lau
  59. 59. Experimento 4: On load #ensaladaSEO @lopsa_lau
  60. 60. #ensaladaSEO @lopsa_lau ¿Renderiza e indexa Google contenido JavaScript en el on load? Experimento 4: On load
  61. 61. Experimento 5: Carga secuencial #ensaladaSEO @lopsa_lau EXPERIMENTO: CARGA SECUENCIAL + BONUS @RomanPlateau
  62. 62. #ensaladaSEO @lopsa_lauEs una tecnología todavía “inmadura”
  63. 63. #ensaladaSEO @lopsa_lau Hacemos una carga secuencial con JavaScript capturando la hora del servidor, el tiempo de renderizado y el tamaño de pantalla
  64. 64. Experimento 5: Carga secuencial #ensaladaSEO @lopsa_lau
  65. 65. Experimento 5: Carga secuencial #ensaladaSEO @lopsa_lau
  66. 66. #ensaladaSEO @lopsa_lau EXPERIMENTO DATOS DEL NAVEGADOR Capturamos los datos del navegador para comprobar las propiedades del navegador con que nos renderiza Google
  67. 67. Experimento 6: Datos del navegador #ensaladaSEO @lopsa_lau
  68. 68. Experimento 5: Carga secuencial #ensaladaSEO @lopsa_lau
  69. 69. Resumen experimentos #ensaladaSEO @lopsa_lau 1.El tamaño de pantalla es de Nexus 5x 2.Renderiza e indexa hasta 5 segundos 3.Google tiene las cookies habilitadas pero no persisten entre peticiones 4.La máquina siempre empieza a las 16:00
  70. 70. #ensaladaSEO @lopsa_lauEs una tecnología todavía “inmadura”¡¡¡LA TRACA FINAL!!!
  71. 71. ¿Cómo se comporta Google en el servidor? #ensaladaSEO @lopsa_lau JAVASCRIPT INLINE SEGUNDA OLA
  72. 72. ¿Cómo se comporta Google en el servidor? #ensaladaSEO @lopsa_lau JAVASCRIPT INLINE 5,4 sg
  73. 73. ¿Cómo se comporta Google en el servidor? #ensaladaSEO @lopsa_lau JAVASCRIPT EXTERNO SEGUNDA OLA
  74. 74. ¿Cómo se comporta Google en el servidor? #ensaladaSEO @lopsa_lau JAVASCRIPT INLINE 5,4 sg
  75. 75. ¿Cómo se comporta Google en el servidor? #ensaladaSEO @lopsa_lau 1. Google dedica algo más de tiempo cuando se trata de JavaScript externo 2. El renderizado y la indexación en cualquier caso NO supera los 5sg.
  76. 76. #ensaladaSEO @lopsa_lau LA OLA RÁPIDA
  77. 77. CONCLUSIONES
  78. 78. Conclusiones #ensaladaSEO @lopsa_lau EL RENDERIZADO EN JAVASCRIPT ES DE 5 SEGUNDOS DESDE QUE SE HACE LA PETICIÓN. ASEGÚRATE DE QUE TU CONTENIDO SE CARGA EN ESE TIEMPO
  79. 79. Conclusiones #ensaladaSEO @lopsa_lau EXISTE UNA OLA RÁPIDA QUE RENDERIZA JAVASCRIPT EN LA PRIMERA PETICIÓN
  80. 80. Conclusiones #ensaladaSEO @lopsa_lau SI VAS A DESARROLLAR TU SITE EN JAVASCRIPT, EL RENDERIZADO SSR ES TU MEJOR Y ÚNICA OPCIÓN
  81. 81. Laura López @lopsa_lau https://www.linkedin.com/in/laura-lopez-yoseseo/

×