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.

¿Qué es 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.

¿Qué es 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.

¿Cuáles son las ventajas e inconvenientes de la implementación de React.js?

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.

¿Son compatibles las implementaciones técnicas de SEO con 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.

¿Cómo hacer SEO en React?.

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.

¿Qué problemas técnicos podemos tener para las implementaciones SEO en React js?.

Sobre los problemas técnicos 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.

¿Cúales son los problemas más comunes de posicionamiento web para react js?

Algunos problemas de SEO comunes en aplicaciones construidas con React.js incluyen:

• Renderizado en el lado del cliente: Ya que React.js se basa en el renderizado en el lado del cliente, los motores de búsqueda pueden tener dificultades para rastrear y indexar el contenido dinámico generado por la aplicación.
• Problemas con la arquitectura de urls: Si no se implementa correctamente, las urls en una aplicación de React.js puede causar problemas de SEO, como contenido duplicado o problemas de enlaces internos.
• Falta de soporte para el protocolo AJAX: Algunos motores de búsqueda aún no tienen soporte completo para el protocolo AJAX, lo que puede causar problemas al indexar el contenido dinámico generado por la aplicación.
• Problemas con los schemas estructurados: Si no se implementa correctamente, el etiquetado estructurado puede etiquetar contenido de forma incorrecta y generar problemas de interpretación por parte de los motores de búsqueda.
• Problemas con el contenido dinámico: Si no se optimiza correctamente, el contenido dinámico puede afectar negativamente el SEO, ya que los motores de búsqueda pueden tener problemas para rastrear y indexar el contenido dinámico generado por la aplicación.

¿Qué soluciones se recomiendan 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.

¿Cuáles son las prácticas más recomendables para implementar SEO en 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.

¿Cómo optimizar los títulos y las descripciones de las páginas en una aplicación de React?

Para optimizar los títulos y las descripciones de las páginas en una aplicación de React, puedes seguir estos pasos:

• Utilizar el componente “Helmet” de React para manejar los metadatos de las páginas, como el título y la descripción.
• Asegúrarse que los títulos y descripciones sean únicos, atractivos y llamativos para incentivar a los usuarios a hacer clic en tu sitio web.
• Testear y optimizar el CTR% de los títulos y descripciones para mejorar el rendimiento en los motores de búsqueda.

¿Cómo generar URLs amigables en una aplicación de React?

Para generar URLs amigables en una aplicación de React, puedes seguir estos pasos:

• Utiliza el componente “react-router” para manejar el enrutamiento en tu aplicación de React.
• Usar “react-router-dom” para configurar las rutas de tu aplicación y especificar los componentes que se deben mostrar para cada ruta.
• Implementar el componente “Route” para especificar las rutas y los componentes correspondientes.
• Utilizar el componente “Link” para crear enlaces que naveguen a través de las rutas de tu aplicación.
• Con la función “useParams” de “react-router-dom” puedes obtener los parámetros de la ruta actual.
• Utiliza la función “useHistory” de “react-router-dom” para navegar a través de las rutas de tu aplicación.
• Ten en cuenta las mejores prácticas para crear URLs amigables y legibles para los usuarios y los motores de búsqueda.
• Utiliza el componente “Redirect” para redirigir a los usuarios a una ruta específica en caso de que la ruta actual sea incorrecta o no exista.

¿Cómo implementar los datos estructurados en una aplicación de React?

Para implementar el etiquetado estructurado en una aplicación de React, puedes seguir estos pasos:

• Con la biblioteca “react-json-ld” se pueden generar etiquetas JSON-LD en tus componentes de React.
• Implementar el componente “JsonLd” de “react-json-ld” para especificar las etiquetas JSON-LD para cada página.
• Definir los datos estructurados en un formato JSON y pásalos como propiedades al componente “JsonLd”.
• Verificar los códigos para saber si el schema está correctamente implementado mediante las herramientas de Google como Rich Results Test o Search Console.
• Implementar el atributo “itemprop” en los elementos HTML para asociar los datos estructurados con el contenido correspondiente.
• Con el atributo “itemtype” en el elemento HTML podemos especificar el tipo de schema utilizado.
• Utiliza la biblioteca “schema-dts” para generar tipos de schema y tener un mejor control en el desarrollo.

¿Cómo puedo generar contenido dinámico y optimizado para SEO en una aplicación de React?

Para generar contenido dinámico y optimizado para SEO en una aplicación de React, tenemos:

• Usar técnicas de generación de contenido automatizado, como el uso de un CMS o una API para generar contenido dinámico y actualizado.
• Las siempre útiles técnicas de generación de metadatos automatizado, como utilizar el componente “Helmet” de React para generar títulos y descripciones de página únicos y relevantes.
• Las técnicas de generación de esquemas estructurados automatizado, como la biblioteca “react-json-ld” para generar esquemas estructurados automáticamente.
• Para la generación de enlaces automatizado, se utiliza el componente “Link” de React para generar enlaces internos relevantes.

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.