Google no ve tu sitio web como tú lo ves. Cuando rastrea una página, lee primero el código antes que el diseño, y ahí es donde el HTML semántico y el uso correcto de JavaScript deciden si tu contenido se posiciona o queda invisible. Si trabajas SEO técnico, esto te interesa.

¿Cómo lee Google un sitio web construido con HTML, CSS y JavaScript?

Los sitios web se muestran en el navegador gracias a tres tecnologías que cumplen funciones distintas. Saber qué hace cada una te ayuda a entender qué ve realmente el buscador.

• HTML: estructura el contenido con etiquetas como h1, h2 a h6 para subtítulos y p para párrafos. Es lo que Google lee primero [01:55].
• CSS: aporta el diseño visual. Si lo desactivas, ves el contenido sin estilo, solo texto e imágenes [01:20].
• JavaScript: agrega funcionalidades como reproducir un video o cargar elementos dinámicos. Si lo desactivas, esas funciones desaparecen [00:52].

Cuando un sitio depende demasiado de JavaScript para mostrar su contenido, el rastreador puede llegar a una página vacía. Por eso el HTML semántico, es decir, usar la etiqueta correcta para cada elemento, es la base para que Google entienda jerarquías y temas [02:30].

¿Qué es el HTML semántico? Es la práctica de usar etiquetas HTML que describan el contenido que envuelven: h1 para el título principal, h2 a h6 para subtítulos y p para párrafos. Sin esto, Google no distingue qué es importante en la página.

¿Cuáles son las tres fases del proceso de rastreo de Google?

El rastreo no es un solo paso. Google sigue un flujo que se complica cuando hay mucho JavaScript de por medio.

1. Descubrimiento de URLs: Google encuentra direcciones y las pone en una cola de rastreo [03:15].
2. Rastreo e indexación: entra al sitio, identifica títulos, subtítulos y párrafos, los procesa y los lleva al índice [03:30].
3. Cola adicional para JavaScript: si el contenido se carga en el navegador y no en el servidor, Google manda la página a una segunda fila para renderizar el JavaScript, lo que retrasa la indexación [04:05].

La consecuencia práctica es directa: los sitios que dependen de JavaScript en el front-end suelen tener problemas de posicionamiento porque Google tarda mucho más en ver su contenido [04:30].

¿Cómo verifico si los elementos de mi sitio cargan sin JavaScript?

Aquí entra la parte práctica. Necesitas comprobar si tu contenido está disponible para Google incluso cuando el JavaScript no se ejecuta.

Usa la extensión Web Developer

Instala la extensión Web Developer desde la tienda de tu navegador, fíjala en la barra de herramientas y úsala para hacer dos pruebas rápidas [05:30].

• Haz clic en disable JavaScript y recarga la página. Si queda en blanco, hay un problema [06:00].
• Desactiva también el CSS para confirmar si los elementos HTML están presentes pero ocultos por estilos [06:15].

En el caso de ClickUp, al desactivar JavaScript y CSS los elementos seguían cargando: títulos, imágenes y texto aparecían correctamente. Eso es señal de un sitio sano para SEO [06:30].

Revisa la versión cacheada por Google

Escribe en la barra de navegación cache: seguido de la URL y presiona enter. Verás la versión que Google logró guardar. Si aparece en blanco, el buscador no pudo leer el contenido [06:50].

¿Qué pasa si mi sitio carga solo con JavaScript? Google puede no ver tu contenido en el primer rastreo y enviarlo a una cola adicional, lo que retrasa la indexación y afecta el posicionamiento. La solución se negocia con desarrollo, no desde SEO.

¿Cómo se ve un sitio con problema crítico de JavaScript?

Un ejemplo claro aparece al buscar Angular websites. Angular es un framework para construir sitios con JavaScript. Al entrar al portal de desarrolladores de un banco alemán con JavaScript activado, todo carga normal. Al desactivarlo y recargar, aparece el mensaje "Este sitio web requiere JavaScript" [07:45].

Si además consultas la versión con cache: y la URL, el resultado es una página totalmente en blanco. Ese sitio estaría en estado crítico para SEO y necesita optimización urgente [08:20].

La buena noticia es que existen formas de servir el contenido sin depender del navegador, como el renderizado en el servidor. No es tarea del SEO programarlo, pero sí señalarlo y negociarlo con el equipo de desarrollo para mover esos factores a un estado OK como el de ClickUp [08:50].

¿Cómo identifico la tecnología con la que está construido un sitio?

Antes de diagnosticar, necesitas saber qué framework o stack usa la página. En los recursos de la clase encuentras una herramienta adicional que detecta las tecnologías de cualquier sitio web. Con ese dato sabrás si estás frente a un sitio en Angular, React u otro entorno que dependa de JavaScript para renderizar [09:15].

Haz la verificación con el sitio que estás trabajando ahora mismo. Aplica el flujo: instala Web Developer, desactiva JavaScript, revisa el caché de Google e identifica la tecnología. Si encuentras un problema, cuéntalo en los comentarios para revisarlo en conjunto.