es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

SEO para URLs dinámicas en React JS

24 Jul, 2023 Programación

Estoy creando cientos de enlaces usando <links>, pero no puedo hacer SEO para ellos.

Estoy intentando crear mapas del sitio para estos enlaces, pero como son dinámicos, no puedo crear manualmente un archivo de mapa del sitio.

Este es el enlace:

<Link to={{pathname: <code>query/${itm._id}</code>, query: { id: itm._id },}} >
  <Alert className="question13">
  <h6>{itm.Name}</h6>
  </Alert>
</Link>

La ruta correspondiente para el enlace está aquí:

 <Route
exact
path="/Query/:catId"
render={(props) => (
<Query {...props} sign={userNAme} hide={SignIn} />
)}
/>

He utilizado Helmet para renderizar dinámicamente el título y la descripción de cada página:

<Helmet>
  <meta charSet="utf-8" />
  <title> {itm.Name}</title>
  <meta name="description" content={itm.Name} />
  <meta property="og:type" content="article" />
  <link rel="canonical" href={itm.Name} />
</Helmet>

https://wixten.com/

Este es el sitio web para el cual estoy intentando hacer SEO. Como puedes ver, si abres el sitio y añades una pregunta, se genera una nueva URL. No sé cómo hacer SEO para cada una de ellas.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Problema con el SEO de enlaces dinámicos

    Como experto en TI especializado en javascript, reactjs, SEO, sitemap y react-helmet, comprendo el problema que enfrentas con el SEO de los enlaces generados dinámicamente.

    Has mencionado que estás creando cientos de enlaces usando <links> pero no puedes realizar el SEO para ellos utilizando sitemaps, ya que son dinámicos y no se pueden crear manualmente.

    Para resolver este problema, puedes utilizar el paquete react-router-sitemap, el cual genera un sitemap para tus rutas dinámicas. Este paquete crea un sitemap basado en las rutas de react definidas en la aplicación.

    Aquí te explico cómo usarlo:

    1. Instala el paquete utilizando npm install react-router-sitemap.

    2. Importa los componentes necesarios en tu proyecto:

    import { createSitemap } from 'react-router-sitemap';
import routes from './routes'; // Define tus rutas en un archivo separado.
    1. Crea una función para generar el sitemap y llámala cuando sea necesario:
    function generateSitemap() {
  return createSitemap({
    hostname: 'https://wixten.com/', // Define el nombre de host de tu sitio web.
    routes: routes, // Pasa las rutas que deben incluirse en el sitemap.
    // Agrega cualquier opción adicional si es necesario.
  }).toString();
}
    1. Agrega el sitemap a tu servidor:
    app.get('/sitemap.xml', (req, res) => {
  res.header('Content-Type', 'application/xml');
  res.send(generateSitemap());
});

    Al utilizar react-router-sitemap, puedes crear sitemaps de forma dinámica para tus rutas de react y asegurarte de que tu sitio web esté optimizado para los motores de búsqueda.

    Además, veo que estás utilizando react-helmet para renderizar títulos y descripciones de páginas generados de forma dinámica. Esta es una excelente estrategia para SEO. Solo asegúrate de incluir palabras clave relevantes en el título y la descripción para que la página sea más descubrible para los motores de búsqueda.

    Espero que esto te ayude a resolver el problema con el SEO de los enlaces dinámicos.

Comments are closed.