Optimizar un sitio web construido con JavaScript requiere un enfoque diferente al de los sitios tradicionales. Los frameworks como Angular, Vue y React generan páginas que Google procesa en dos fases, lo que puede afectar directamente el posicionamiento si no se toman las precauciones adecuadas.
¿Qué son las SPA y PWA y por qué importan para el SEO?
Los sitios construidos con estos frameworks se clasifican en dos categorías principales. Las SPA o Single Page Applications son sitios que cargan toda la información en una sola página sin necesidad de refrescar el navegador [0:22]. Se usan tanto en portales de noticias como en plataformas de cursos. Por otro lado, las PWA o Progressive Web Apps se comportan más como aplicaciones móviles nativas que como sitios web convencionales [0:50]. Ambos tipos manejan contenido muy dinámico que cambia constantemente, lo que los hace más robustos pero también más complejos para los motores de búsqueda.
A diferencia de los sitios construidos con PHP o Python, que cargan la información de manera más clásica, los sitios en JavaScript tienen un trato especial por parte de Google [1:15]. Un ejemplo claro se observa con voice123.com: cuando Google rastrea el sitio, lo muestra de forma incompleta, mientras que al visitarlo directamente en el navegador, todo el contenido carga correctamente.
¿Cómo rastrea Google los sitios hechos con JavaScript?
El algoritmo de Google sigue un proceso particular con estos sitios. Primero rastrea el sitio web sin ejecutar el JavaScript [1:46]. Luego lo coloca en una cola de renderizado antes de indexarlo. En esta etapa, Google no cuenta con toda la información del sitio, por lo que no se puede garantizar un buen posicionamiento inicial [2:15].
Después de un tiempo, Google vuelve a rastrear el sitio ejecutando el JavaScript, lo indexa nuevamente y entonces sí lo posiciona con toda la información disponible [2:35]. Este proceso en dos fases significa que un sitio en JavaScript puede tardar más en alcanzar buenas posiciones en comparación con uno tradicional.
¿Qué factores técnicos se deben cuidar en sitios JavaScript?
Existen varios elementos fundamentales que deben verificarse al auditar o construir un sitio con estos frameworks.
¿Por qué las URLs únicas son esenciales?
- Cada página debe tener una URL única, aunque el sitio no se recargue visualmente [2:55].
- Las metaetiquetas deben ser únicas por página: cada una necesita su propio título SEO y meta description [3:07].
- Sin esta diferenciación, se cae en el problema de contenido duplicado que perjudica el posicionamiento.
¿Cómo deben manejarse los enlaces y las rutas?
- Los enlaces deben usar el elemento a href en lugar de otros elementos HTML [3:30].
- No se deben usar eventos de JavaScript para manejar las URLs, ya que Google podría no interpretarlos correctamente [3:42].
- Es necesario implementar routers para gestionar las URLs del sitio [4:00].
- Se deben evitar las URLs con el símbolo numeral (#), una práctica muy común en JavaScript que dificulta la indexación [4:18].
Para facilitar la gestión de metaetiquetas en estos frameworks, se pueden utilizar herramientas como Meta Service, Helmet o Vue Meta [4:25], que ayudan a que cada página quede correctamente optimizada.
¿Qué opciones de renderizado avanzado existen?
Hay dos estrategias avanzadas para discutir con el equipo de desarrollo:
- El renderizado dinámico muestra a Google la versión completa del sitio, mientras que al usuario le carga progresivamente según su interacción [4:42].
- El renderizado en el servidor (server-side rendering) entrega toda la información desde el backend, sin depender de que el JavaScript se ejecute en el navegador del usuario [5:00].
Ambas opciones mejoran significativamente la forma en que Google procesa el contenido y pueden marcar la diferencia entre un sitio invisible y uno bien posicionado.
Si estás trabajando con un sitio en JavaScript o planeas crear uno, comparte estos puntos con tu desarrollador desde el inicio del proyecto. ¿Qué framework estás usando y qué desafíos has encontrado con su indexación?
