Estoy tratando de crear un sitio web usando React.js (usando React Router, no u Next.js). liveitcourses.com es el nombre del sitio web que aún está en progreso.
Pero me enfrento a un problema extraño. En cada página del sitio web cada vez que intento ver la "fuente de vista", el cuerpo de la etiqueta se muestra vacío. Me temo que si no muestra el contenido del cuerpo en la fuente de vista, los motores de búsqueda no podrán rastrear mis páginas, por lo tanto, tendrá un impacto negativo en el SEO.
Empecé React hace unas semanas. ¿Es el comportamiento normal de React o debo corregirlo? Si mi comprensión es correcta, ¿cómo puedo hacer que mi sitio web sea rastreable para los motores de búsqueda? Por favor recomiende.
Aquí está el HTML, la etiqueta del cuerpo está vacía mientras que el título y otras etiquetas meta están presentes:
<html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Learn IT courses online in interactive and live classes."/><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"/><title>Best online IT courses based on live classes and interactive programming sessions</title><script defer="defer" src="/static/js/main.80f62ed5.js"></script><link href="/static/css/main.53eb7892.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>Así es React, una librería para hacer SPA (Single Page Application), donde todo se maneja vía JavaScript en el navegador. Para una aplicación hecha completamente con React, de hecho, el servidor envía esta plantilla HTML vacía con scripts para ejecutar. Puede usar la herramienta de inspección para ver su contenido después de que se ejecuten.
Y sí, es malo para el SEO, ya que los Crowlers de los motores de búsqueda tienen prisa (hay un tiempo limitado para una página). Si eso es algo que importa para su aplicación, debería probar Next.js , Gatsby ... o usar Server Side Rendering como se conoce desde hace décadas con PHP, Node.js...
Reactjs está procesando código javascript con procesamiento en el cliente, por lo que si ve el código fuente, no puede verlo. si hace clic en F12 y elige la pestaña de elementos, puede ver que el código se procesa pero desde cargar el archivo js. Entonces, si desea SEO para el rendimiento, debe elegir SSR (representación del lado del servidor), en reactjs es next.js, en vuejs es nuxt.js.