Cuando trabajamos con React nos encontramos con que la aplicación o web se carga en un único archivo html que, dinámicamente con JavaScript, va modificando su contenido y URLs para mostrar lo que en cada momento se requiera. Esto significa que el HTML inicial de cualquier página es el mismo y tiene una estructura similar a la siguiente:

Contenido del index.html en un proyecto con React

Ejemplo de index.html en un proyecto con React

Hasta hace unos años, esto significaba que Google era incapaz de ver el contenido de cada una de las páginas y necesitábamos soluciones alternativas para poder pre-renderizar el HTML en servidor y poder servir un contenido que Google sí pueda leer y rastrear (y, por lo tanto, indexar y posicionar). No obstante, esto ya no es así y Googlebot es capaz de ejecutar JavaScript y obtener el HTML renderizado que ven las usuarias en el navegador. ¡Genial! Pues ya podemos generar contenido que, aunque se cargue dinámicamente con JavaScript, Google leerá e indexará. Y quizás pueda parecer que con esto acaba el artículo de hoy, y nada más lejos de la realidad 😉 Hay ciertos elementos que no hemos mencionado hasta ahora y que tienen un peso importante cuando implementamos una estrategia SEO: las etiquetas del head.

Si revisamos la primera imagen del post, vemos que React lo que hace es modificar la etiqueta div que tiene un id=»root». Es decir, React puede modificar el contenido de cada una de las páginas (con su correspondiente URL gracias a React Router) modificando el contenido de ese div, pero no hemos dicho nada de que modifique contenido fuera de ese div. Y ya sabemos que en SEO también prestamos atención a una serie de etiquetas que están en el head, como por ejemplo:

  • Title
  • Meta Description
  • Meta Robots
  • Link Canonical

Para verlo con un ejemplo, hemos hecho esta pequeña web dinámica con datos extraídos de una API pública en la que hay un listado de naves de Star Wars y, para cada una de ellas, una ficha con información específica de la nave.

Lista de naves de Star Wars

Lista de naves de Star Wars

Detalle de nave de Star Wars

Detalle de nave de Star Wars

Si nos fijamos, el title y la description son los mismos para todas y cada una de las páginas debido a la configuración por defecto que definimos en el archivo index.html (primera imagen del post). En este caso:

  • Title: Star Wars API Site
  • Meta Description: Discover the Star Wars Starships with this website created with SWAPI and React.

Como ya os podéis imaginar, esto es un problema y a Google le dificulta la tarea de entender cuál es la temática de cada una de nuestras páginas. Y peor se pone la cosa si necesitamos que alguna de ellas no sea indexable, por ejemplo. La buena noticia es que podemos modificar esto gracias a React Helmet, un componente que el equipo de desarrollo puede añadir al proyecto de React y que permite modifcar, entre otras, las etiqutas antes mencionadas 🙂 ¡Ojo! Para evitar que se duplique la etiqueta meta description hay que modificar el archivo index.html (primera imagen de este post) y añadir el siguiente atributo en la etiqueta meta description: «data-react-helmet=»true» en el index.html.

Añadir atributo para sobreescribir etiqueta con React Helmet

Con React Helmet instalado, en cada una de las páginas de React podemos definir la información de las etiquetas del head que necesitemos añadiéndolas entre etiquetas Helmet:

React Helmet en la página /starships

Pero también nos permite, por ejemplo, crear patrones para páginas que se generan dinámicamente en función de las peticiones a una API. Este es el caso de las fichas de naves en la web de Star Wars que estamos usando para este ejemplo:

Patrón de title y description con React Helmet

Patrón de title y description con React Helmet

En este último caso, estamos generando un patrón que coge información de cada nave para crear un title y una meta description específicos para cada ficha. Puedes comprobar las diferencias en titles y meta descriptions entre esta ficha (sin React Helmet) y esta otra (con React Helmet). Recuerda que al ser contenido que se modifica por JavaScript, debes inspeccionar el HTML renderizado (Botón derecho > Inspeccionar) en vez de ver el HTML original (Botón derecho >  Ver código fuente de la página). De lo contrario, verás el title y description que por defecto hemos definido en el index.html 😉

Esperamos que este artículo os resulte de utilidad y os ayude a trabajar el SEO en proyectos desarrollados con React.