SEO para React js

¿SEO para React.js? ¿Es posible? Previamente antes de usar Javascript, las webs eran creadas con un código (estático) HTML. El uso de Javascript permitió a desarrolladores web, añadir interactividad a los sitios web. Tanto en la navegación del usuario, como en las acciones que realiza éste en su tiempo de interacción.

En 2015, Google dió un paso adelante en el proceso de Javascript. Desde ese momento, la evolución ha sido bastante lenta. No sólo eso, los demás motores de búsqueda aún no han encontrado la forma de ejecutar Javascript. Actualmente Google renderiza mediante SWP (WRS), que tienen como base un navegador creado en 2015, Chrome 41. Renderizar las app web modernas con un navegador “obsoleto”afecta claramente al SEO. Como SEO Profesional espero poder aportar los conocimientos necesarios para facilitar la implementación de SEO para React js.

Introducción a Javascript.

JavaScript es un lenguaje de programación que permite realizar actividades como características interactivas en un sitio web , como mostrar actualizaciones de contenido en el momento, efectos de estilo dinámicos, animación interacción con mapas, animaciones gráficas 2D/3D etc. — puedes estar seguro que JavaScript está involucrado.
.
Junto a HTML, CSS, PHP y MySQL, Javascript es una de las tecnologías de desarrollo web más populares. Mientras el lenguaje HTML puede crear páginas estáticas, Javascript convierte a la web en dinámica. El crecimiento de JavaScript es obvio, con una gran cantidad de tecnologías derivadas como jQuery, AngularJS y React js . De las citadas, nos vamos a centrar en React JS.

Introducción a React js.

React js es una biblioteca Javascript, desarrollado como open source por Facebook, para crear interfaces de usuario con el objetivo de animar al desarrollo de aplicaciones en una sola página. Es ideal para que los desarrolladores puedan construir grandes aplicaciones web y en ellas, puedan cambiar los datos de forma periódica.

Las principales ventajas que presenta React js:

  • Es más fácil de aprender debido a su simplicidad en términos de sintaxis. Sólo precisa de conocimientos de lenguaje HTML y no precisa aprender DeepScript como en Angular.
  • Es muy flexible.
  • Tiene un DOM virtual (modelo de objeto de documento) que permite organizar documentos en formatos HTML, XHTML o XML en un árbol desde el cual es mejor aceptado por los navegadores web al analizar diferentes elementos de la aplicación web.
  • Si se Combina con ES6 / 7 puede trabajar con la carga alta de forma fácil.
  • Existe una jerarquía en los datos hacia abajo. Los elementos secundarios no pueden afectar los datos principales.
  • Al ser open source o código abierto 100%, obtiene muchas actualizaciones y mejoras diarias según las contribuciones de desarrolladores de todo el mundo.
  • Muy ligero. Los datos que se ejecutan en el lado del usuario se pueden representar fácilmente en el lado del servidor simultáneamente.
  • La migración entre varias versiones suele ser muy fácil, ya que Facebook proporcionar “codemods” para automatizar gran parte del proceso.

Por otra parte presenta un pequeño número de desventajas:

  • No posee documentación oficial, debido a la rapidez del desarrollo de React.js. Muchos desarrolladores realizan sus aportaciones de forma individual y un poco anárquica.
  • React js requiere un conocimiento profundo para integrar la interfaz de usuario en el marco de MVC.

Las principales empresas que usan React.js, a parte de: Facebook o Instagram, Netflix, New York Times, Yahoo, Whatsapp, Dropbox, Airbnb o Microsoft.

SEO para web react javascript

Posicionamiento SEO web para React js.

El posicionamiento SEO web desarrollado con React js se presenta como una tarea inicialmente compleja para todo profesional SEO, en cualquier tarea de implementación y consultoría. El objetivo principal de realizar el proceso de SEO para React js es obtener más visibilidad y tráfico. Para ello se debe optimizar el rendimiento del sitio web desarrollado en esta tecnología, minimizando toda desventaja que presenta las características de esta librería open source de Javascript.

Actualmente en SEO para React js, todo motor de búsqueda rastrea el contenido que se coloca en sus sitios web. El contenido del sitio web debe de estructurarse y formatearse de manera que sea comprensible para las bots.

Implementación de SEO para React js.

Para implementar SEO para React js, debemos de refrescar la memoria. En el pasado, un sitio web funcionaba de tal manera que el navegador necesitaba solicitar cada página por completo.Se generaba el HTML en el servidor, y se enviaba de vuelta en cada solicitud. Incluso si la página siguiente tiene muchos de los mismos elementos (menú, barra lateral, pie de página, …), el navegador seguía solicitando toda la nueva página y volvía a renderizar todo desde cero.

Con la introducción de nuevas tecnología, se presentó el desafío de simplificar el proceso y reducir el tiempo de carga. Las comunidades de desarrolladores presentaron aplicaciones de una sola página basadas en JS o SPA. Estos sitios web no vuelven a cargar todo el contenido en el sitio web, sino que solo actualizan el contenido que difiere de la página actual. Ésto mejora el rendimiento del sitio web de forma drástica a medida que se reduce la cantidad de datos que se tramitan. React JS es una de las tecnologías que se puede usar para crear SPA.

SPA o sitios web de una página. Se trata de un concepto muy simple y cómodo: presentar el sitio web en una única página muy larga. Es cierto que la navegación se vuelve sencilla, ya que solamente hay que desplazarse por la página subiendo o bajando, evitando las paginaciones que pueden incomodar al usuario y ralentizan la carga. Resulta especialmente atractiva para la navegación en smartphones y a los desarrolladores nos garantiza un aspecto moderno, económico y sencillo de implementar, pero que no olvidemos que también nos genera algunos quebraderos de cabeza de cara al posicionamiento SEO, por lo que tendremos que utilizar las SPA con cuidado.

Problemas de SEO para React js.

Sobre los problemas comunes SEO para React js, es obvio que la relación entre Javascript y SEO resulta, en la mayoría de los casos, compleja. Por ello en la implementación SEO surgen varios puntos a resolver.

Los procesos de rastreo y la indexación son lo más críticos. Normalmente Googlebot descarga un archivo HTML que encuentra, extrae los enlaces y los visita simultáneamente, y luego envía los recursos descargados al indexador. Pero cuando se trata de un sitio web basado en JavaScript, el proceso se vuelve un poco más complicado. Es como el proceso mencionado anteriormente, pero tarda mucho más y con un paso adicional en el proceso, porque parte del indexador debe realizar más trabajo al analizar y ejecutar el JavaScript, y los nuevos enlaces que se encuentran deben pasar al rastreador para chequearlos y luego enviarlos otra vez al indexador, lo que convierte el proceso en menos eficiente.

SEO para web React JS

Soluciones para SEO de sitios web basados ​​en React js.

Con los problemas descritos, se debe facilitar el rastreo de los motores de búsqueda a nuestros sitios web. Para ello, se plantean dos formas principales de resolver los problemas de SEO ​​para React js:

  1. Isomorphic React o Javascript Universal: Si se detecta que JavaScript está deshabilitado en el lado del cliente, Isomorphic JavaScript, también llamado Javascript Universal, se ejecuta en el lado del servidor y envía el contenido final al cliente. De esta manera, todos los archivos, propiedades y contenidos necesarios están disponibles cuando se carga la página. En el caso caso que JavaScript está habilitado, funciona como una aplicación dinámica con múltiples componentes. Los beneficios son claros: una carga más rápida comparado con webs tradicionales, más compatibilidad con navegadores más antiguos y diferentes rastreadores y una mayor experiencia de usuario (UX).
  2. Prerenderización: Otra de las soluciones que se podrían aplicar para SEO para React js, es prerenderizar su sitio web con la herramienta Prerender. Ésta usa la herramienta Headless Chrome para representar la página de la misma manera que un navegador. Prerender espera a que la página se cargue por completo y luego devolverá el contenido en HTML completo. Presenta varias ventajas: Permite que los motores de búsqueda rastreen correctamente el sitio web; se configura más fácilmente porque no hace falta que la base de código sea compatible con la representación del lado del servidor; Prerender no ejerce una carga excesiva al servidor, ya que es sólo un motor de renderizado de sitio web simple.

El objetivo de la implementación de ambas soluciones SEO para React js,  es servir contenido HTML digerible a rastreadores y navegadores. Ambos métodos utilizan un recurso de servidor intermediario para extraer el contenido solicitado y modificar el contenido HTML para que se envíen al usuario como el contenido de estado final en lugar de un código de plantilla. Esto significa que el contenido servido será un HTML completamente expandido que contendrá contenido y enlaces, los cuales adoran y entienden los rastreadores. Luego ejecutarán cualquier JavaScript y CSS más simples para comprender los cambios en la estructura de la página.

Algunos consejos para SEO para React js.

Para concluir el post, os señalo algunas consideraciones previas a tener en cuenta, para implementar SEO para React js de forma eficiente y eficaz:

  1. Las URL deben ser amigables. Deben parecerse a las URL estáticas con directorios y con palabras que describan el contenido para que puedan ser entendibles. Hay que tener en cuenta que algunas webs ​​en JavaScript contienen un hashtag en la URL, que Google probablemente no puede rastrear. Existen componentes de navegación para React, como React Router, para poder crear url únicas y rastreables.
  2. Se debe evitar colocar contenido importante detrás de un evento de JavaScript. Es posible que Google no siga los eventos “onclick” de ningún sitio. No se debe de usar los eventos onclick de JavaScript como un reemplazo para los enlaces internos.
  3. Se recomienda usar el procesamiento del Servidor. En lugar de cargar contenidos después de cargar HTML, todas las operaciones se llevan a cabo en el servidor y el navegador obtendrá HTML con toda la información. Usar el procesamiento del servidor, permitirá que parte del código se ejecute primero en su servidor. Esto significa que el servidor primero obtiene los datos de la API que se necesitan para ser incluidos en el HTML de la página inicial, y luego empaqueta esos datos y envía estos datos al navegador. De esta forma se está en un punto de partida donde ya tienen todos los datos. De otra forma, tendría comenzar desde cero,
  4. Generar e implementar el título y las etiquetas meta / head es complejo en React js. Se debe definir esas etiquetas dentro del componente y moverlos en el HEAD del documento tanto del lado del cliente como del servidor. Existen módulos como React helmet, react-meta-tags o react-document-meta, que nos pueden facilitar el proceso.

Espero que este post os haya servido para la implementación de SEO para React js. Os dejo esta infografía, donde destaco los puntos más importantes a tener en cuenta en el posicionamiento web SEO para React js. 

 

SEO para React js

Jaime