Como seos tenemos que impactar en el tráfico orgánico y con la cada vez mayor presencia de Js tenemos que entender como funciona la renderización por parte de los buscadores para poder asegurar que seguimos teniendo impacto.

1. Optimizando sites con JS

2. Impacto!

3. Digitalgrowth.io
edu@digitalgrowth.io
@egarolera

4. El JS está aquí para quedarse

5. JavaScript Bytes
The sum of transfer size kilobytes of all external scripts requested by the page. Httparchive.org
JS ya estaba aquí!

6. Alex Russell https://infrequently.org
Pero ralentiza las webs

7. Y eso no le gusta a Google

8. JS es el nuevo HMTL!

9. JS es el nuevo HTML!

10. Como ha funcionado la indexación hasta ahora?

11. Indexación por parte de bots
Enlaces
Descarga
Ordenación

12. HTML Snapshot
Deprecado 
Indexación sites AJAX

14. Renderización
Enlaces
Descarga
Ordenación
(diferida)
Indexación sites JS

15. Renderizado JS por Google
Metadatos -HTTP Status Codes-Canonical - amphtml
Mentira!!!!

16. Todavía ineficiente!

17. Renderización JS: CSR vs. SSR

21. WTF!

22. Como se ha solucionado indexación JS hasta ahora?

24. CSR
+
Noscript
=
Disparidad de contenido (Cloaking)
Mantenimiento costoso
Duplicidad de esfuerzos
Parecidos razonables o Pre-rendering

25. Parecidos razonables

26. Prerender.io

29. SSR - Server Side Rendering
- Isomorphic Javascript
- Solucion a indexación por Javascript
- Servimos javascript ejecutado en el servidor
- Somos transparentes con google

34. Dymanic Rendering
Permitimos cloacking
Parecidos razonables

35. Mantenimiento costoso
Duplicidad de esfuerzos
Dymanic Rendering

36. Hybrid Rendering
Ofuscando a lo loco!
PWA y largo plazo

37. Hybrid rendering es el futuro!

38. Ahora JS debe indexarse por SSR!

39. Test Indexación JS CSR
1
Está cogiendo el Title!

40. 2
Sigue los enlaces?

41. 3
No inspeccionar…ver código

42. Chrome 41
4
¿Solucionar problemas de Render?

43. ¿Solucionar problemas de Render?

44. ¿Solucionar problemas de Render?

45. 1.- ¿Qué indexa? Site:
2.- ¿Sigue los enlaces? Explorar como Google
3.- Está lo que queremos indexar? Ver código fuente
4.- ¿Tenemos problemas de renderización?
Chrome 41; Herramienta testeo marcado de Google,
Mobile Friendly Test
Checklist

46. SORPRESA!
¡Ha seguido los enlaces!

47. TEST Canonical/Noindex post-render

48. Impacto!