Si bien es cierto que React JS es una de las tecnologías más populares para el desarrollo de aplicaciones web, es importante destacar que el SEO es fundamental para mejorar la visibilidad y el posicionamiento de una página web en los resultados de búsqueda de los motores de búsqueda como Google.

El SEO es una parte fundamental del marketing digital y es esencial para atraer tráfico orgánico y aumentar la visibilidad de un sitio web. Si bien es cierto que la programación en React JS tiene sus ventajas, no debe ser una excusa para descuidar el SEO.

La mayoría de la gente usa Google para buscar información, por tanto cualquier proyecto web necesita estar optimizado para el SEO.

¿Cómo aparecer en los primeros resultados de Google?

SEO, optimización de motores de búsqueda, es un área grande y compleja. En este artículo, nos centraremos en React (o React.js como se llama formalmente) y su efecto en SEO. Pero para resumir el SEO, se trata de facilitar que Google encuentre el contenido adecuado para el usuario. Cuando un usuario realiza una búsqueda, Google intenta encontrar qué página es la más relevante para esa búsqueda específica.

Nadie conoce el algoritmo exacto de cómo Google clasifica qué página es la más relevante, ya que se trata de tecnología patentada, pero hay varios factores en los que casi todo el mundo está de acuerdo que afectan el ranking en Google. Ejemplos de dichos factores son qué otros sitios enlazan con el sitio, qué tan rápido es el sitio y una página que sea fácil de leer para el robot de rastreo de Google.

¿Qué es React y cómo afecta a tu SEO?

React es un framework de Javascript (aunque algunas personas prefieren llamarlo una biblioteca) que se puede usar para construir la interfaz de usuario de un sitio. Facilita la creación de sitios web y aplicaciones interactivos que se sienten rápidos. React le permite, por ejemplo, lograr esa «sensación de aplicación» de navegar entre páginas sin recargar, lo que aumenta la experiencia del usuario.

React le ofrece un SPA (aplicación de una sola página) que requiere Javascript para mostrar el contenido de la página. El problema es que el robot de rastreo de Google, que escanea todas las páginas de Internet, no es tan bueno como entender una página con javascript en comparación con una página que consta de código HTML normal.

Durante mucho tiempo, Google no pudo ver el contenido que se renderizó con Javascript y solía recomendar que el contenido se pudiera ver sin Javascript habilitado. Pero hace un par de años, Google anunció que su robot de rastreo ahora puede representar páginas con Javascript e indexarlas.

Entonces, ¿Javascript y SEO ya no son un problema?

Si y no. Es cierto que Google anunció en 2015 que ahora pueden renderizar e indexar contenido que requiera Javascript, por lo que, en teoría, no debería ser un problema. Sin embargo, la teoría y la práctica no siempre son iguales. La mayoría de los profesionales de SEO están de acuerdo en que a Google le cuesta más leer e indexar páginas que requieren Javascript en comparación con una que no requiere Javascript.

¿Debería evitar usar React por razones de SEO?

No absolutamente no. React.js, al igual que Angular.js o Vue.js, ayuda al desarrollador a crear una gran experiencia de usuario que es positiva para el SEO.

React y renderizado del lado del servidor

La clave para hacer que React sea más amigable con el SEO es asegurarse de que Google no tenga que usar Javascript para renderizar el contenido. Se puede lograr utilizando la representación del lado del servidor (la abreviatura es SSR).

Normalmente, React se ejecuta en su navegador web después de descargar todos los archivos del sitio web que está visitando (llamado Client Side Rendering). La representación del lado del servidor significa que ejecuta el código Javascript en el servidor antes de enviar los archivos al usuario por primera vez.

Eso significa que el visitante puede ver el contenido directamente sin tener que esperar a que React se ejecute primero. Puede hacer que la página sea un poco más rápida (especialmente en computadoras más antiguas) pero, lo que es más importante, significa que Google no necesita ejecutar Javascript para leer el contenido de la página.

¿Cómo se configura la representación del lado del servidor?

Puede ser complejo configurar la representación del lado del servidor en React si lo hace desde cero. Pero no pierdas la esperanza. Hay varios marcos que se basan en React, lo que facilita la configuración del renderizado del lado del servidor para una página de React. Dos marcos comunes para SSR son Gatsby.js y Next.js.

Gatsby.js

Gatsby.js es un marco de React para generar páginas estáticas donde genera todas las páginas en su computadora (o en una computadora en la nube) y luego envía las páginas pregeneradas a un servidor / servicio de almacenamiento en la nube como Amazon S3. Gatsby.js es una buena alternativa para páginas donde el contenido no necesita cambiar en tiempo real. Un ejemplo de sitios web que funcionan muy bien con Gatsby son los blogs y las páginas corporativas. Gatsby.js es menos óptimo para páginas con mucho contenido generado por el usuario, como páginas de foros.

Lea más sobre Gatsby.js en su página oficial.

Next.js

Next.js adopta un enfoque diferente al de Gatsby (incluso si tienen la posibilidad de generar páginas estáticas como Gatsby). Cuando un usuario visita una página por primera vez, Next.js presenta previamente la página antes de enviar los archivos al usuario. La gran ventaja de Next.js en comparación con Gatsby es que se genera cuando el usuario lo solicita lo que significa que el contenido siempre se actualiza en tiempo real, eso significa que Next.js es una gran opción para páginas con mucho contenido generado por el usuario. contenido como páginas de foros.

Lea más sobre Next.js en su sitio web oficial.

¿Debería utilizar React para su próximo proyecto de SEO?

La tecnología que debe usar siempre es específica del proyecto y lo que desea lograr (y otro factor es con qué pila de tecnología ya está familiarizado su equipo). Pero React es a menudo una muy buena opción para crear un sitio web compatible con SEO siempre que lo configure correctamente. En IngenioSEO tenemos muchos desarrolladores de React capacitados que pueden ayudarlo y asegurarse de que su sitio de React esté optimizado tanto para el usuario como para SEO.