SEO para React JS

SEO para React JS

¿Qué es React JS? React JS es una librería javascript, desarrollada en “opensource” o código abierto por Facebook, por eso es tan popular. Esta tecnología está orientada a la creación de las Single Page Application, o webs que sólo se refrescan una vez si no cambia el contenido, por lo que son increíblemente más rápidas. JavaScript permite realizar interacciones más complejas que las webs antiguas. Dejamos de lado las webs antiguas por ser estáticas y desarrolladas en HTML por las Single Page Applications. Las principales ventajas de React son:

• Fácil de aprender debido a su sintaxis
• Utiliza componentes que facilita el mantenimiento de las aplicaciones. Se elaboran con la composición de varios componentes y con un comportamiento, una vista y un estado.
• Tiene DOM virtual que organiza toda la información en un árbol
• La jerarquía de datos facilita que los elementos secundarios no afecten a los primarios
• Es código opensource por lo que se actualiza constantemente
• Es más ligero puesto que se carga simultáneamente en el lado del servidor y del cliente

¿Qué son las Single Page Application? En este tipo de webs todo lo que se muestra y se procesa está dentro de la misma página web, siendo desde un único archivo desde donde se procesa todo. Estas aplicaciones web trabajan de una manera distinta, dando mayor peso del lado del cliente y restando peso de la parte del servidor. Esto significa que antes era el servidor quien enviaba el archivo HTML con la petición del usuario y ahora, en las SPA, recibir el HTML conlleva más desarrollo. Problemática para SEO El rastreo y la indexación de estos sites se vuelve difícil para Google ya son páginas casi en blanco, donde con la petición del usuario al servidor sólo se recibe un archivo con JavaScript. A pesar de los avances de Google en el rastreo y la interpretación de JS, los bots no son todavía capaces de ejecutar el JavaScript y además, la gestión de los datos HTML complica la situación. Para que Google interprete correctamente la web debemos de recibir un archivo HTML con toda la metadata. La gestión de esta petición complica el desarrollo técnico de estas webs incrementando las peticiones al servidor. Soluciones SEO para sites con React

• ¿Cómo ayuda Isomorphic React al SEO?

SI el JavaScript está deshabilitado en el lado del cliente, se ejecuta en el lado del servidor enviando el contenido final al cliente. Si en cambio está habilitado funciona como una aplicación dinámica con múltiples componentes. La carga es infinitamente más rápida y la mejora en la experiencia de usuario es también notable respecto a las webs tradicionales.

• ¿De qué manera ayuda el Prerendering al SEO?

Esta solución representa la página como un navegador. El prerenderizado esperará a que la página esté completamente cargada para devolver al usuario el contenido HTML. Esto permite que la web sea correctamente rastreada por los bots y elimina la problemática de las páginas con React JS para SEO. Consejos a tomar en una web con React Debemos tener en cuenta algunos aspectos si queremos implementar correctamente el SEO para React Js.

• En el sistema de enrutado cada URL tiene un nombre y ese nombre debe ser lo más “amigable” posible describiendo correctamente el contenido de cada página.
• Las metaetiquetas son difíciles de generar en React, por lo que se deben generar dentro del componente en el head del documento tanto del lado del cliente como del servidor.
• Usar el procesamiento del servidor para facilitar los datos HTML al navegador.
• Evitar poner contenido importante detrás de un evento de JavaScript ya que es posible que Google no siga los eventos onclick del sitio.