1. La evolución del
SEO en JavaScript

2. Laura López
@lopsa_laulinkedin.com/in/laura-lopez-yoseseo
#ensaladaSEO

3. JAVASCRIPT

4. #ensaladaSEO @lopsa_lau¿Qué es el JavaScript?

5. #ensaladaSEO @lopsa_lauEs una tecnología todavía “inmadura”

6. Errores masivos propagados de forma rápida
#ensaladaSEO @lopsa_lau

7. #ensaladaSEO @lopsa_lauProblemas de renderizado

8. EVOLUCIÓN

9. Google no es capaz
de rastrear
contenido dinámico
Evolución de JavaScript
2007 2009 2014 2015 2016 2017 2018 2019

10. Evolución de JavaScript #ensaladaSEO @lopsa_lau
Los inicios: 2007
Google no es capaz de
rastrear el contenido
generado dinámicamente

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. 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. 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. Evolución de JavaScript #ensaladaSEO @lopsa_lau
2014

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. 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. 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. 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. Evolución de JavaScript #ensaladaSEO @lopsa_lau
2016
Google da
recomendaciones
sobre SSR y CSR
para las PWAs

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. 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. 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. 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. 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. Evolución de JavaScript #ensaladaSEO @lopsa_lau
2019

26. #ensaladaSEO @lopsa_lau
Pero, ¿qué es lo que sucede
realmente entre Google y el
JavaScript?

27. Pr
Google y el JavaScript #ensaladaSEO @lopsa_lau
Problemas con los que se encuentra Google:
1.Rastreo
2. Renderización

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. Renderización #ensaladaSEO @lopsa_lau
1
2

30. TIPOS DE RENDERIZADO

31. SSR: Server Side Rendering #ensaladaSEO @lopsa_lau
El HTML se sirve
desde el servidor
como una web
tradicional

32. Renderizado SSR #ensaladaSEO @lopsa_lau
CON JAVASCRIPT SIN JAVASCRIPT

33. CSR: Client Side Rendering #ensaladaSEO @lopsa_lau
El HTML se genera
en el navegador
del usuario
mediante
JavaScript

34. Renderizado CSR #ensaladaSEO @lopsa_lau
CON JAVASCRIPT SIN JAVASCRIPT

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. Renderizado ISOMORFO #ensaladaSEO @lopsa_lau
CON JAVASCRIPT SIN JAVASCRIPT

37. Elementos SEO imprescindibles #ensaladaSEO @lopsa_lau
1.Etiquetas SEO
2.Contenido
3.Enlazado
yoseseo.es/herramientas-seo-javascript

38. PERO…¿QUÉ ESTÁ PASANDO
AHORA?

39. Actualidad del JavaScript #ensaladaSEO @lopsa_lau
CHROMIUM TESTING TOOLS

40. Experimento 1: Renderizado #ensaladaSEO @lopsa_lau
EXPERIMENTO:
TIEMPO DE RENDERIZADO
@vmrecio

41. Experimento 1: Renderizado #ensaladaSEO @lopsa_lau
1.Contador de tiempo para analizar el
renderizado.
2.Renderizado en las diferentes
herramientas.

42. Experimento 1: Renderizado #ensaladaSEO @lopsa_lau
PRUEBA 1- 35 RECURSOS SIN CARGAR

43. Experimento 1: Renderizado #ensaladaSEO @lopsa_lau
PRUEBA 2- 18 RECURSOS SIN CARGAR

44. Experimento 1: Renderizado #ensaladaSEO @lopsa_lau

45. Experimento 1: Renderizado #ensaladaSEO @lopsa_lau

46. Experimento 2: Scroll #ensaladaSEO @lopsa_lau
EXPERIMENTO:
SCROLL CON JAVASCRIPT
@RomanPlateau

47. #ensaladaSEO @lopsa_lau
Generamos un scroll
infinito para comprobar
si Google es capaz de
seguirlo.

48. Experimento 2: Scroll #ensaladaSEO @lopsa_lau

49. Experimento 2: Scroll #ensaladaSEO @lopsa_lau

50. Experimento 2: Scroll #ensaladaSEO @lopsa_lau
¿Hace Google
scroll en una
página
Javascript?

51. Experimento 3: Interacción botón #ensaladaSEO @lopsa_lau
EXPERIMENTO:
INTERACCIÓN BOTÓN JAVASCRIPT
@RomanPlateau

52. #ensaladaSEO @lopsa_lau
Comprobamos
si Google es
capaz de
interactuar con
un botón de
cargar más

53. Experimento 3: Interacción botón #ensaladaSEO @lopsa_lau

54. Experimento 3: Interacción botón #ensaladaSEO @lopsa_lau

55. Experimento 3: Interacción botón #ensaladaSEO @lopsa_lau
¿Hace Google
interacción en un
botón con
Javascript?

56. Experimento 4: On load #ensaladaSEO @lopsa_lau
EXPERIMENTO:
CARGA ON LOAD
@RomanPlateau

57. #ensaladaSEO @lopsa_lau
Cargamos el
JavaScript en el
on load para
comprobar si
Google lo ejecuta
y renderiza

58. Experimento 4: On load #ensaladaSEO @lopsa_lau

59. Experimento 4: On load #ensaladaSEO @lopsa_lau

60. #ensaladaSEO @lopsa_lau
¿Renderiza e
indexa Google
contenido
JavaScript en el
on load?
Experimento 4: On load

61. Experimento 5: Carga secuencial #ensaladaSEO @lopsa_lau
EXPERIMENTO:
CARGA SECUENCIAL
+
BONUS
@RomanPlateau

62. #ensaladaSEO @lopsa_lauEs una tecnología todavía “inmadura”

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. Experimento 5: Carga secuencial #ensaladaSEO @lopsa_lau

65. Experimento 5: Carga secuencial #ensaladaSEO @lopsa_lau

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. Experimento 6: Datos del navegador #ensaladaSEO @lopsa_lau

68. Experimento 5: Carga secuencial #ensaladaSEO @lopsa_lau

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. #ensaladaSEO @lopsa_lauEs una tecnología todavía “inmadura”¡¡¡LA TRACA FINAL!!!

71. ¿Cómo se comporta Google en el servidor? #ensaladaSEO @lopsa_lau
JAVASCRIPT INLINE
SEGUNDA OLA

72. ¿Cómo se comporta Google en el servidor? #ensaladaSEO @lopsa_lau
JAVASCRIPT INLINE
5,4 sg

73. ¿Cómo se comporta Google en el servidor? #ensaladaSEO @lopsa_lau
JAVASCRIPT EXTERNO
SEGUNDA OLA

74. ¿Cómo se comporta Google en el servidor? #ensaladaSEO @lopsa_lau
JAVASCRIPT INLINE
5,4 sg

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. #ensaladaSEO @lopsa_lau
LA OLA RÁPIDA

77. CONCLUSIONES

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. Conclusiones #ensaladaSEO @lopsa_lau
EXISTE UNA OLA RÁPIDA QUE
RENDERIZA JAVASCRIPT EN LA
PRIMERA PETICIÓN

80. Conclusiones #ensaladaSEO @lopsa_lau
SI VAS A DESARROLLAR TU SITE
EN JAVASCRIPT, EL
RENDERIZADO SSR ES TU
MEJOR Y ÚNICA OPCIÓN

81. Laura López
@lopsa_lau
https://www.linkedin.com/in/laura-lopez-yoseseo/