Javascript + SEO

Transcript

1. SEO + JavaScript
2. Hola! Soy Nacho Mascort SEO Product Owner @ Softonic Enlaces de interés: https://twitter.com/NachoMascort https://github.com/NachoSEO https://gumroad.com/l/programacion-seo 2
3. Objetivos de hoy ⬡ Comprender que es JS y aclarar ciertos aspectos técnicos ⬡ Entender cómo lo procesan los buscadores ⬡ Qué podemos hacer como SEO cuando nos enfrentamos a un site en JS 3
4. 1. Conceptos básicos Empecemos por el principio
5. ¿Qué es JavaScript? Lenguaje de programación Usado en cliente para interactuar con el DOM También usado del lado del servidor Desarrollado por Brendan Eich de NetScape (en 10 días) ⬡ Mocha -> LiveScript -> JavaScript ⬡ ⬡ ⬡ ⬡ * No tiene nada que ver con Java 5
6. Cliente vs Servidor 6
7. 1.1 DOM Árbol de nodos
8. DOM ⬡ Document Object Model ⬡ El DOM se constituye a través de un HTML ⬡ Es un árbol de nodos jerárquicos con relación padre-hijo-hermano ⬡ JS puede manipular estos nodos 8
9. No confundir con el HTML 9
10. ¿Cómo se construye? 10
11. De la UI a los nodos 11
12. JS puede cambiar el DOM 12
13. 1.2 Diferencias entre sites hecho en JS vs tradicional La renderización lo es todo
14. ¿Cómo es un site “tradicional”? ⬡ Tradicional = archivos estáticos en el server ⬡ En tu servidor tienes: A) HTML con el contenido ya generado (poco eficiente y cero escalable) B) Templates en los que hay variables que se rellenan de contenido y que cambian según cada ruta de la URL 14
15. Contenido estático 15
16. Contenido estático 16
17. Templates 17
18. Cambiando el mindset • Lo que hemos visto también se hace con frameworks en JS • Importante: ◦ JS Front-end vs JS Back-end ◦ (Cliente vs servidor) 18
19. ¿Cómo es un site JS en cliente? • El servidor tiene los archivos pero no le aplica ninguna lógica, eso lo hace el navegador (cliente) 19
20. Tipos de sites hechos en JS en cliente • SPA = Single Page Application (no hay urls) • PWA = Progressive Web App (Es como una SPA pero con funcionalidades extra que imita a una app) • Otras opciones mixtas 20
21. ¿Cómo es un site con JS en cliente? 21
22. ¿Dónde está mi h1? 22
23. ¿Dónde está mi h1? 23
24. El inicio de la madriguera... 24
25. Diferencia principal Servidor Cliente • El servidor devuelve el archivo estático con todo montado para el navegador • El servidor devuelve una serie de archivos de HTML y JS que después el navegador tendrá que procesar y “montar” 25
26. Distribución porcentual de los envíos de smartphones a nivel mundial 26
27. Peso medio de JS 27
28. Adopción de JS 28
29. Tiempo en que un site es interactivo 29
30. Coste de JS 30
31. Adopción de Front-end JS 31
32. Adopción de Back-end JS 32
33. Depende quién lo ejecute el coste se lo lleva el servidor o el cliente 33
34. Coste = Tiempo de CPU = Electricidad = Dinero 34
35. 1.3 SEO 101 Lo básico
36. Procesos de un motor de búsqueda RASTREAR INDEXAR POSICIONAR Todo aquel proceso que tiene que ver con la accesibilidad del site y la obtención de información por parte de Googlebot. Multitud de procesos destinados a la comprensión del lenguaje, cálculos de relevancia, renderización de componentes y otros temas. Algoritmos encargados de procesar la “query” y cruzar los datos del índice (índex) con tal de devolver los resultados más relevantes. 36
37. La vida de una URL en el proceso de un motor de búsqueda
38. La vida de una URL en el proceso de un motor de búsqueda
39. La vida de una URL en el proceso de un motor de búsqueda
40. La vida de una URL en el proceso de un motor de búsqueda
41. La vida de una URL en el proceso de un motor de búsqueda
42. Proceso de indexación Raw HTML Procesamiento del contenido - Semántica - Duplicidad - Internacionalización - Tasa de actualización - … Similar al índice de las últimas páginas de un libro: una entrada para cada palabra de cada página web que se indexa.
43. ¿Que pasa cuando no hay contenido en el HTML porque lo ha de crear un JS en cliente? 43
44. Ahí es donde entra en juego WRS - Web Rendering Service 44
45. 2 Motores de búsqueda + JS El problema real
46. 2.1 Renderización WRS y segunda ola
47. Renderización 47
48. Googlebot es evergreen • Crawlea y renderiza usando la última versión disponible de Chromium • Googlebot renderiza con Chrome/Chromium • Soporta: ◦ ES6 y otras funcionalidades de JS ◦ IntersectionObserver para lazy load ◦ V1 APIs para Componentes Web 48
49. El proceso “típico”, primera ola de indexación Rastreo Renderizado Indexación 49
50. Segunda ola de indexación Primera ola Rastreo Segunda ola Indexación Renderización 50
51. La imagen completa 51
52. WRS HTML WRS DOM (Renderizado) Recursos 52
53. WRS con Puppetter 53
54. Tamaño del viewport 54
55. Pool manager • El servicio de renderizado usa varios chromiums “siempre activos” • Ese conjunto de chromiums esta dentro una “pool” que recibe ciertos datos de configuración del Orquestador 55
56. Renderizador • Cookies se sobreescriben • Fecha / tiempo determinado • Service Workers y Avisos de permisos desactivados • Las animaciones se comportan distinto 56
57. La imagen completa 57
58. 2.2 Desafíos de la renderización Fetching y JS
59. Desafíos Existen 2 desafíos: • Fetching • JavaScript 59
60. Fetching Los límites están en: • Robots.txt • Volumen de Crawl 60
61. Fetching 61
62. X20 = 62
63. Excesivo e ineficiente 63
64. Fetching Con tal de optimizar: • No obedecen las reglas de cacheo HTTP • No suelen pedir todos los recursos 64
65. Fetching 65
66. JavaScript El coste importa • Google limita el uso de CPU • Si hace falta interrumpirán un script • Un consumo excesivo de CPU impacta de forma negativa en la indexación 66
67. JavaScript - Errores típicos • • • • Robots.txt bloqueando recursos Recursos que no soporta Google Cloaking Minería de criptomonedas 67
68. 2.3 Configuración de renderización Empezando con buen pie
69. ¿Qué configuraciones existen? • • • • CSR = Client Side Rendering SSR = Server Side Rendering Dynamic Rendering Hybrid Rendering 69
70. Client Side Rendering • Todo el JS se procesa en cliente • El HTML viene vacío o con la estructura básica y se rellena en el navegador • Es la configuración más costosa para Google (y la que suele dar más problemas) 70
71. Client Side Rendering 71
72. Server Side Rendering • En el servidor hay una etapa extra que crea todo el HTML final evitando ese trabajo al navegador • Se manda un archivo totalmente estático • La opción preferida de Google, la menos costosa para ellos (y la que mejor suele funcionar) 72
73. Server Side Rendering • React → renderToString() o NextJS • Vue.js → Nuxt • Angular → Universal 73
74. CSR vs SSR SSR CSR • TTFB se incrementa • Mayor coste para el servidor • Necesidad de cacheado por componentes • Más amigable con los motores de búsqueda • Más rápido en server pero más lento en cliente • Dispositivos con poca potencia tendrán muchas dificultades • Nada amigable con los motores de búsquedas 74
75. CSR vs SSR 75
76. CSR vs SSR 76
77. Dynamic Rendering • Depende del user-agent se manda un archivo por construir (CSR) o estático (SSR) • Solución provisional para Google según su documentación • No se considera cloaking 77
78. Dynamic Rendering HTML “por construir” en CSR HTML “por construir” en CSR HTML estático Procesador 78
79. Procesadores dinámicos • Puppeteer • Rendertron • prerender.io 79
80. ¿Cómo implementarlo? 80
81. ¿Cómo implementarlo? 81
82. Hybrid rendering • Una parte del HTML ya viene pre-construída, sólo la más crítica o la más reutilizable • A través de la “rehidratación” rellenan los huecos con JS usando el DOM pre-cargado en servidor • Se pueden realizar customizaciones para adaptar elementos CSR + SSR 82
83. Hybrid rendering 83
84. Hybrid rendering 84
86. 2.4 Problemáticas con JS En lo que hay que fijarse
87. Links • Uno de los métodos principales para descubrir nuevas páginas • Si usamos CSR, muchos se descubrirán en la segunda ola de indexación • Depende cómo estemos “mostrando” esos links los tendrá en cuenta o no en el cálculo del link graph 87
88. Links <a href=”/page”>sencillo es bueno</a> <a href=”/page” onclick=”goTo(‘page’)”>Tambien está bien</a> 88
89. Links <a onclick=”goTo(‘page’)”>no, no hay href</a> <a href=”javascript:goTo(‘page’)”>no, falta enlace</a> <a href=”javascript:void(0)”>nope, falta enlace</a> <span onclick=”goTo(‘page’)”>no es el elemento HTML adecuado</span> <option value="page">no, elemento HTML erroneo</option> <a href=”#”>no hay enlace</a> 89
90. La URL en un <a> con un atributo href 90
91. Links en SPA • URLs con un hash # en su ruta son la misma URL para Google ◦ ejemplo.com/#category • La URL debe estar en un <a> con un href sin el hash (y por nuestro lado debemos implementar la lógica para mandar al usuario a otra página) 91
92. Links en SPA 92
93. Metadata • Sea la configuración que sea, es recomendable siempre devolver metadatos desde el servidor: ◦ Title ◦ Description ◦ Canonical ◦ Robots ◦ Hreflang 93
94. Tests con metadata 94
95. Tests con metadata document.querySelector('meta[name="robots"]').remove() const meta = document.createElement('meta'); meta.name = 'robots'; meta.content = 'noindex, follow'; document.head.appendChild(meta) 95
96. Tests con metadata 96
97. Página desindexada 97
98. Página desindexada 98
99. Tests con hreflang 99
100. Soft 404 • Una página de error que devuelve un estatus HTTP 200 ok • Una página de destino de una redirección que no tenga que ver con la página origen • Páginas sin rellenar o apenas con contenido 100
101. Soft 404 • En las SPA es típico encontrarse con el primer error (página de error cargada en cliente pero con un código 200 desde server) • ¿Cómo se soluciona? ◦ Redirect a una página de error tipo: /not-found (y devolviendo 404 o 410) ◦ Añadir un noindex 101
102. Cookies y detectar user agents • Googlebot no guarda estado ◦ Datos de sesión y almacenamiento local se borran por cada petición ◦ Borra cookies HTTP por request 102
103. Cookies y detectar user agents 103
104. Otros problemas típicos • Falta de datos estructurados • Problemas con imágenes (usar lazy load nativo siempre) • Componentes web 104
105. 3 Comprobaciones SEO Herramientas y buenas prácticas
106. Configuración • Definir configuración del framework ◦ SSR la más recomendada ▪ Definir framework para la renderización • En caso de no hacer SSR ◦ Definir elementos mínimos clave ◦ Contenido esencial ◦ Metas 106
107. Renderización https://chrome.googl e.com/webstore/deta il/view-rendered-sour ce/ejgngohbdedoaba nmclafpkoogegdpob 107
108. Mira como ve Google 108
109. Search console para validar el estado en el índice 109
110. Mira que URLs esta renderizando Google 110
111. Elimina el JS en cliente a ver como se ve 111
112. Crawlea con diferentes User-agent 112
113. Comprueba si necesitas Polyfills 113
114. Comprueba el resto de problemáticas • • • • • Enlaces Soft 404 Imágenes Datos estructurados etc 114
115. Gracias ! Enlaces de interés: https://twitter.com/NachoMascort https://github.com/NachoSEO https://gumroad.com/l/programacion-seo 115
116. Recursos ⬡ ⬡ ⬡ ⬡ ⬡ ⬡ ⬡ ⬡ ⬡ ⬡ ⬡ ⬡ ⬡ ⬡ ⬡ ⬡ ⬡ https://es.wikipedia.org/wiki/JavaScript https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model https://javascript.info/dom-nodes https://httparchive.org/reports/state-of-javascript?start=2016_11_15&end=latest&view=list https://v8.dev/blog/cost-of-javascript-2019 https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4 https://es.statista.com/estadisticas/600645/cuota-de-mercado-mundial-de-smartphones-por-fabricante/ https://www.youtube.com/watch?t=800&v=PFwUbgvpdaQ&feature=youtu.be https://es.semrush.com/blog/seo-javascript/ https://developers.google.com/search/docs/guides/javascript-seo-basics?hl=es https://youtu.be/bEet8sysV5s?t=1212 https://www.jcchouinard.com/what-is-rendering-for-google/ https://www.youtube.com/watch?v=58GhnR_-iWM https://medium.com/walmartglobaltech/the-benefits-of-server-side-rendering-over-client-side-rendering-5d 07ff2cefe8 https://developers.google.com/web/tools/puppeteer/articles/ssr https://stackoverflow.com/questions/51255949/dynamic-rendering-vs-hybrid-rendering https://developers.google.com/web/updates/2019/02/rendering-on-the-web 116
117. Recursos ⬡ ⬡ ⬡ ⬡ ⬡ ⬡ https://reactjs.org/docs/react-dom-server.html#rendertostring https://www.youtube.com/watch?t=1177&v=PFwUbgvpdaQ&feature=youtu.be https://ahrefs.com/blog/es/javascript-seo/ https://developers.google.com/search/docs/advanced/guidelines/links-crawlable?hl=es https://www.searchviu.com/en/javascript-seo-experiment-hreflang/ https://www.mecagoenlos.com/Posicionamiento/la-segunda-ola-de.php 117
118. Free templates for all your presentation needs For PowerPoint and Google Slides 100% free for personal or commercial use Ready to use, professional and customizable Blow your audience away with attractive visuals 118