El documento resume la evolución del SEO en JavaScript a lo largo de los años y los desafíos que ha enfrentado Google para rastrear contenido dinámico generado con JavaScript. Se describen una serie de experimentos realizados para probar la capacidad de Googlebot para renderizar contenido JavaScript, incluyendo scroll infinito, interacción con botones y carga de scripts. Los resultados mostraron que Google puede renderizar JavaScript durante los primeros 5 segundos y existe una "ola rápida" de renderizado en la primera petición. Se concluye que el renderizado del lado del servidor es la

1. La evolución del
SEO en JavaScript

2. La evolución del
SEO en JavaScript

3. #IRday @lopsa_lau¿Qué es el JavaScript?
@vmrecio

4. Es una tecnología todavía “inmadura” #IRday @lopsa_lau
@vmrecio

5. Errores masivos propagados de forma rápida
#IRday @lopsa_lau
@vmrecio

6. Problemas de renderizado #IRday @lopsa_lau
@vmrecio

7. EVOLUCIÓN

8. 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

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

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

11. Pr Pr
HTML
Un solo paso
El procesamiento del
contenido se produce 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 #IRday @lopsa_lau
@vmrecio

12. Renderización
1
2
#IRday @lopsa_lau
@vmrecio

13. TIPOS DE RENDERIZADO

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

15. Renderizado SSR
CON JAVASCRIPT SIN JAVASCRIPT
#IRday @lopsa_lau
@vmrecio

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

17. Renderizado CSR
CON JAVASCRIPT SIN JAVASCRIPT
#IRday @lopsa_lau
@vmrecio

18. ISOMORFO: SSR + CSR
Es una mezcla entre los
dos anteriores. Se sirve
una parte como un HTML
plano y otra desde el
navegador
dinámicamente
#IRday @lopsa_lau
@vmrecio

19. Renderizado ISOMORFO
CON JAVASCRIPT SIN JAVASCRIPT
#IRday @lopsa_lau
@vmrecio

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

21. Actualidad del JavaScript
CHROMIUM TESTING TOOLS
#IRday @lopsa_lau
@vmrecio

22. Experimento 1: Renderizado
EXPERIMENTO:
TIEMPO DE RENDERIZADO
#IRday @lopsa_lau
@vmrecio

23. Experimento 1: Renderizado
PRUEBA 1- 35 RECURSOS SIN CARGAR
#IRday @lopsa_lau
@vmrecio

24. Experimento 1: Renderizado
PRUEBA 2- 18 RECURSOS SIN CARGAR
#IRday @lopsa_lau
@vmrecio

25. Experimento 1: Renderizado #IRday @lopsa_lau
@vmrecio

26. Experimento 1: Renderizado #IRday @lopsa_lau
@vmrecio

27. Experimento 2: Scroll
EXPERIMENTO:
SCROLL CON JAVASCRIPT
#IRday @lopsa_lau
@vmrecio

28. Generamos un scroll
infinito para comprobar
si Google es capaz de
seguirlo.
#IRday @lopsa_lau
@vmrecio

29. Experimento 2: Scroll #IRday @lopsa_lau
@vmrecio

30. Experimento 3: Interacción botón
EXPERIMENTO:
INTERACCIÓN BOTÓN JAVASCRIPT
#IRday @lopsa_lau
@vmrecio

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

32. Experimento 3: Interacción botón #IRday @lopsa_lau
@vmrecio

33. Experimento 4: On load
EXPERIMENTO:
CARGA ONLOAD
#IRday @lopsa_lau
@vmrecio

34. Cargamos el
JavaScript en el
onload para
comprobar si
Google lo ejecuta
y renderiza
#IRday @lopsa_lau
@vmrecio

35. Experimento 4: On load #IRday @lopsa_lau
@vmrecio

36. Experimentos Javascript Resultados #IRday @lopsa_lau
@vmrecio
● SCROLL
● BOTÓN CARGAR MÁS
● CARGA ONLOAD

37. Experimento 5: Carga secuencial
EXPERIMENTO:
CARGA SECUENCIAL
+
BONUS
#IRday @lopsa_lau
@vmrecio

38. Hacemos una carga
secuencial con
JavaScript capturando
la hora del servidor, el
tiempo de renderizado
y el tamaño de
pantalla
#IRday @lopsa_lau
@vmrecio

39. Experimento 5: Carga secuencial #IRday @lopsa_lau
@vmrecio

40. Experimento 6: Datos del navegador #IRday @lopsa_lau
@vmrecio

41. Experimento 5: Carga secuencial #IRday @lopsa_lau
@vmrecio

42. Resumen experimentos
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
#IRday @lopsa_lau
@vmrecio

43. #ensaladaSEO @lopsa_lauEs una tecnología todavía “inmadura”¡¡¡LA TRACA FINAL!!!

44. ¿Cómo se comporta Google en el servidor? #IRday @lopsa_lau
@vmrecio

45. #ensaladaSEO @lopsa_lau
LA OLA RÁPIDA

46. CONCLUSIONES

47. Conclusiones
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
#IRday @lopsa_lau
@vmrecio

48. Conclusiones
EXISTE UNA OLA RÁPIDA QUE
RENDERIZA JAVASCRIPT EN LA
PRIMERA PETICIÓN
#IRday @lopsa_lau
@vmrecio

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