¿Cómo generar un mapa del sitio en una aplicación MERN?

En este artículo, discutiremos cómo generar un mapa del sitio en una aplicación MERN. Pero antes de eso, ¿qué es un mapa del sitio y por qué lo necesitamos? Un mapa del sitio es un archivo que enumera las páginas, videos y otros archivos en su sitio web, así como sus relaciones. Los motores de búsqueda (como Google, Duckduckgo, Bing y otros) usan este archivo para ayudarlos a rastrear su sitio de manera más eficiente. Para obtener más información sobre los mapas del sitio, haga clic aquí .

Generar sitemap estático: Si el sitio web en el que estás trabajando tiene un número fijo de URL, por ejemplo, tu cartera. Puede generar un archivo sitemap.xml con la ayuda de cualquier herramienta en línea y colocar la carpeta en la carpeta src.

Paso 1: Visite https://www.xml-sitemaps.com/ y genere el archivo sitemap.xml.

Paso 2: Mueva el archivo a la carpeta pública de su aplicación de reacción.

 

Paso 3: Verifique los cambios visitando https://ahampriyanshu.com/sitemap.xml .

 

Paso 4: finalmente, agregue el mapa del sitio a su archivo robots.txt

User-agent: *
Allow: /
Sitemap: https://baseurl/sitemap.xml

Generar un mapa del sitio dinámico: hasta ahora hemos discutido la creación de un mapa del sitio con URL estáticas. Pero, ¿qué pasa si la cantidad de URL y el contenido de las URL existentes cambian de vez en cuando? Supongamos que estamos creando un clon GFG. Por lo tanto, nuestro mapa del sitio debe contener las URL de todos los artículos y las páginas importantes. 
Para esto, enviaremos un archivo de mapa del sitio desde nuestro backend recorriendo primero todos los registros requeridos de nuestra base de datos. Después de esto, agregaremos manualmente las URL de otras páginas importantes como acerca de, contacto, etc.

Paso 1: Para propósitos de demostración, estamos considerando un proyecto básico con tres archivos.

const express = require("express"),
    mongoose = require("mongoose"),
    todoRouter = require("./routers/todoRouter"),
    app = express();
app.use("/", todoRouter);
  
const port = 3000,
    db = 'mongodb://localhost/todo';
  
mongoose
    .connect(db)
    .then(conn => {
        console.log(`${db} connected`);
    });
  
app.listen(port, () => console.log(
    `Server listening on ${port}`));

const mongoose = require("mongoose"),
    todoSchema = new mongoose.Schema(
        {
            title: { type: String, unique: true },
        },
        { timestamps: true }
    );
  
module.exports = mongoose.model("Todo", todoSchema);

const express = require("express"),
    router = express.Router();
  
/* Todo Controller functions */
module.exports = router;

Paso 2: instale el paquete ‘sitemap’ para transmitir el búfer del mapa del sitio y escribir sus datos.

npm i sitemap

Paso 3: Cree el archivo sitemapRouter.js en el directorio de su enrutador. En este punto, su estructura de carpetas podría verse como

 

Paso 4: importa todas las dependencias requeridas.

const express = require("express"),
    { SitemapStream, streamToPromise } = require('sitemap'),
    Project = require("../models/projectModel"),
    date = new Date().toISOString(),
    zlib = require("zlib"),
    router = express.Router();

Paso 5: declarar un objeto con fines de almacenamiento en caché y establecer el contenido del encabezado para la solicitud dada.

let sitemap;
router.get('/', async function (req, res) {
    res.header('Content-Type', 'application/xml');
    res.header('Content-Encoding', 'gzip');
  
    // If we have a cached entry send it
    if (sitemap) return res.send(sitemap)
});
  
module.exports = router;

Paso 6: Ahora escribiremos todas las URL requeridas en nuestro mapa del sitio.

try {
  
    // Fetching project records and mapping it 
    // the desired URL pattern
    const data = await Project.find(),
        projects = data.map(({ title }) => `/todo/${title}`),
  
        // Base url of our site
        smStream = new SitemapStream(
            { hostname: 'https://demosite.com/' }),
        pipeline = smStream.pipe(zlib.createGzip());
  
    // Write project URL to the stream
    projects.forEach(
        item => smStream.write({
            url: item, lastmod: date, changefreq:
                'daily', priority: 0.7
        }));
  
    // Manually add all the other important URLs
    smStream.write({
        url: '/about', lastmod: date, changefreq:
            'monthly', priority: 0.9
    })
    smStream.write({
        url: '/contact', lastmod: date, changefreq: 'monthly',
        priority: 0.9
    })
  
    // Cache the response
    streamToPromise(pipeline).then(sm => sitemap = sm);
    smStream.end()
  
    // Stream write the response
    pipeline.pipe(res).on('error', e => { throw e });
} catch (err) {
    console.error(err)
    res.status(500).end()
}

Paso 7: Al final, sitemapRouter.js debería verse como

const express = require("express"),
    { SitemapStream, streamToPromise } = require('sitemap'),
    Todo = require("../models/todoModel"),
    date = new Date().toISOString(),
    zlib = require("zlib"),
    router = express.Router();
  
let sitemap;
  
router.get('/', async function (req, res) {
    res.header('Content-Type', 'application/xml');
    res.header('Content-Encoding', 'gzip');
  
    // If we have a cached entry send it
    if (sitemap) return res.send(sitemap)
  
    try {
  
        // Fetching todo records and mapping
        // it the desired URL pattern
        const data = await Todo.find(),
            todos = data.map(({ title }) => `/todo/${title}`),
  
            // Base url of our site
            smStream = new SitemapStream({ 
                hostname: 'https://demosite.com/' }),
            pipeline = smStream.pipe(zlib.createGzip());
  
        // Write todo URL to the stream
        todos.forEach(
            item => smStream.write({
                url: item, lastmod: date,
                changefreq: 'daily', priority: 0.7
            }));
  
        // Manually add all the other important URLs
        smStream.write({
            url: '/about', lastmod: date,
            changefreq: 'monthly', priority: 0.9
        })
        smStream.write({
            url: '/contact', lastmod: date,
            changefreq: 'monthly', priority: 0.9
        })
  
        // Cache the response
        streamToPromise(pipeline).then(sm => sitemap = sm);
        smStream.end()
  
        // Stream write the response
        pipeline.pipe(res).on('error', e => { throw e });
    } catch (err) {
        console.error(err)
        res.status(500).end()
    }
});
  
module.exports = router;

Paso 8: Verifique los cambios visitando {basename}/sitemap.xml .

 

Nota: Si tiene alguna dificultad o error al seguir los pasos anteriores, eche un vistazo a sitemapRouter.js

Paso 9: finalmente, agregue el mapa del sitio a su archivo robots.txt .

User-agent: *
Allow: /
Sitemap: https://baseurl/sitemap.xml