SEO en React ¿Son enemigos? Spoiler: No, pero hay que hablarlo - Episodio 38

SEO en react

SEO en React?

Menudo debate que hay que poner encima de la mesa para hablarlo alto y claro!

Índice
  1. Quería que Google entendiera mi web. Y React me respondió con una pantalla en blanco.🗓 Diario de un SaaS
  2. 🧠 Qué descubrí sobre SEO en React
  3. 📸 Ejemplo de lo que Google ve
  4. 🔍 Explorando opciones: CSR, SSR, SSG
    1. 🔸 CSR (Client-Side Rendering)
    2. 🔸 SSR (Server-Side Rendering)
    3. 🔸 SSG (Static Site Generation)
  5. 🤔 ¿Migrar a Next.js o buscar otra solución?
  6. 💡 La solución temporal (pero efectiva) para SEO en React: react-helmet-async
  7. 🧪 Cómo lo comprobé
  8. 🛑 Lo que me frenó (y me hizo dudar)
  9. 🧠 Lecciones aprendidas
    1. 🔹 React no odia el SEO. Solo necesita ayuda.
    2. 🔹 Entender cómo rastrea Google cambia tu forma de desarrollar
    3. 🔹 Empezar por algo, luego mejorar
  10. 🎯 Próximo paso
  11. 📌 Cierre

Quería que Google entendiera mi web. Y React me respondió con una pantalla en blanco.🗓 Diario de un SaaS

Desde el principio tuve claro que mi SaaS no podía ser invisible.

Necesitaba que las fichas de piezas fueran encontrables.

O sea, que Google entendiera qué había detrás de cada URL, y que si alguien buscaba un "rotor pieza XYZ"...

¡Mi web saliera ahí!

Pero entonces me encontré con una verdad incómoda:

React no es SEO-friendly por defecto.

🧠 Qué descubrí sobre SEO en React

React usa renderizado del lado del cliente (CSR, Client-Side Rendering).

Es decir, eso significa que cuando entras a una página, el servidor no entrega HTML completo.

Sino que da una especie de contenedor vacío con una etiqueta <div id="root">, y después... el navegador ejecuta JavaScript para construir todo.

El resultado: la mayoría del contenido llega después de que el HTML haya sido cargado.

O sea... un mojón para mí!

Para un usuario humano, no hay problema: ve la página cargada tras unos segundos.

Pero los buscadores no siempre son tan pacientes.

¿Y qué ve Google en ese primer HTML vacío?

  • A veces, nada.
  • A veces, solo el título genérico de la app.
  • A veces, indexa mal o se salta las páginas dinámicas.

📸 Ejemplo de lo que Google ve

Con una app React clásica, sin Helmet ni SSR, el código fuente de cualquier ruta es algo así:

<html>
  <head>
    <title>Mi App React</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="main.js"></script>
  </body>
</html>

Eso es lo que ve Googlebot en su primer intento de rastreo.

Y si ese main.js tarda en ejecutarse o hay errores... tu contenido no existe para Google.

🔍 Explorando opciones: CSR, SSR, SSG

🔸 CSR (Client-Side Rendering)

  • ✅ Rápido de desarrollar.
  • ❌ Malo para SEO.
  • ❌ El contenido llega después de que cargue JavaScript.
  • ⚠️ Google puede no indexar bien rutas dinámicas.

🔸 SSR (Server-Side Rendering)

  • ✅ Entrega HTML completo desde el servidor.
  • ✅ Mejor para SEO.
  • ⚠️ Requiere herramientas como Next.js o frameworks más complejos.
  • ⚠️ Aumenta el tiempo de desarrollo.

🔸 SSG (Static Site Generation)

  • ✅ Ideal para contenido estático (blogs, páginas que no cambian mucho).
  • ⚠️ No tan útil si el contenido depende del usuario o es dinámico.

Yo estaba usando Create React App (CRA) y tenía renderizado del lado del cliente.

Era cómodo, pero limitado.

En pocas palabras, una mierda para el SEO.

🤔 ¿Migrar a Next.js o buscar otra solución?

Migrar a Next.js habría supuesto reescribir mi app desde cero.

O sea, casi la palmo.

Cambiar la estructura de carpetas, aprender sus convenciones, gestionar rutas de forma distinta...

Y lo peor...

Perder tiempo de desarrollo sin garantía de que Google me indexara mejor.

No estaba listo para ese salto.

Y claro, quería una solución práctica y ligera.

💡 La solución temporal (pero efectiva) para SEO en React: react-helmet-async

Después de investigar (y preguntar a la IA), encontré react-helmet-async, una librería que permite añadir metadatos dinámicos dentro de componentes React.

Ejemplo:

import { Helmet } from 'react-helmet-async';

export default function PiezaDetalle({ pieza }) {
  return (
    <>
      <Helmet>
        <title>{pieza.titulo} - Mi Almacén de Relojería</title>
        <meta name="description" content={pieza.descripcion} />
      </Helmet>
      <h1>{pieza.titulo}</h1>
      <p>{pieza.descripcion}</p>
    </>
  );
}

Con esto, cada vez que un usuario entra a una ficha de producto, el navegador actualiza el título y la descripción, y Googlebot (si tiene soporte de JavaScript) puede capturarlo.

¿Es perfecto?

No.

Pero es mejor que no hacer nada.

🧪 Cómo lo comprobé

Usé herramientas como:

Y noté que:

  • Los títulos cambiaban dinámicamente.
  • Las descripciones aparecían correctas.
  • Las páginas cargaban más rápido si usaba react-helmet-async bien.

Soluciones para SEO en React

🛑 Lo que me frenó (y me hizo dudar)

  • ¿Y si Google sigue viendo HTML vacío?
  • ¿Y si me gasto meses montando el sistema y luego nadie lo encuentra?
  • ¿Y si mi arquitectura ya está mal desde el principio?

Pero aprendí algo importante: no hace falta tener el stack perfecto desde el inicio.

O sea, puedes empezar simple, validar, mejorar.

🧠 Lecciones aprendidas

🔹 React no odia el SEO. Solo necesita ayuda.

No es lo ideal para contenido orientado a buscadores, pero hay herramientas que lo acercan bastante.

🔹 Entender cómo rastrea Google cambia tu forma de desarrollar

Suerte que llevo en SEO desde el 2006 de forma autodidacta.

Algo que siempre modela mi forma de ver webs y las webapps y hace que siempre esté pensando también en cómo lo haría un SEO.

🔹 Empezar por algo, luego mejorar

No necesitas SSR para tener algo indexable.

Ya que con Helmet es una buena puerta de entrada.

🎯 Próximo paso

  • Implementar Helmet en cada ficha de pieza
  • Explorar opciones de pre-render o build dinámico si el tráfico crece
  • Documentar los títulos y descripciones clave por categoría

📌 Cierre

Hoy sé que React y SEO no son enemigos.

Solo tienen personalidades distintas: uno es dinámico, el otro estructurado.

Y como toda relación, se trata de comunicarse mejor.

No hace falta migrar todo a Next.js ni reescribir desde cero.

A veces, lo que necesitas es simplemente ponerle un casco (Helmet) a tu app.

💬 ¿Tú también pensabas que React y SEO no podían convivir?

¿Qué trucos usaste tú?

¿Helmet, prerender, Next...?

Cuéntamelo en comentarios, que de esto aprendemos todos.

 

Si quieres conocer otros artículos parecidos a SEO en React ¿Son enemigos? Spoiler: No, pero hay que hablarlo - Episodio 38 puedes visitar la categoría Proyecto-IA.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir