Si está creando un sitio web con Next.js, probablemente desee que los motores de búsqueda descubran e indexen sus páginas de manera eficiente. Una forma de mejorar este proceso es creando un mapa del sitio. Un mapa del sitio es un archivo que enumera todas las URL de su sitio web, lo que ayuda a los motores de búsqueda como Google a rastrear e indexar su sitio más rápido.

En esta guía, explicaremos cómo instalar y configurar next-sitemap en un proyecto Next.js. También cubriremos los beneficios de tener un mapa del sitio e incluiremos código de muestra con una aplicación Next.js "Hello World" para ilustrar cómo funciona.

Beneficios de utilizar el siguiente mapa del sitio

Antes de sumergirnos en el proceso de instalación, analicemos brevemente los beneficios clave de utilizar el siguiente mapa del sitio:

1. SEO mejorado: un mapa del sitio bien estructurado ayuda a los motores de búsqueda como Google a descubrir sus páginas de manera más eficiente, lo que genera una mejor indexación y clasificaciones de búsqueda potencialmente más altas.

2. Rastreo más rápido: al proporcionar a los motores de búsqueda una hoja de ruta de su sitio web, les permite rastrear e indexar sus páginas más rápido.

3. Manejo de rutas dinámicas: para sitios web con rutas dinámicas, el siguiente mapa del sitio facilita la generación de URL para contenido dinámico, lo que garantiza que todas sus páginas sean reconocibles.

4. Mapas del sitio personalizados: el siguiente mapa del sitio le permite personalizar sus mapas del sitio con opciones como establecer prioridad, cambiar la frecuencia e incluso excluir ciertas páginas.

Paso 1: instalar el siguiente mapa del sitio

Para comenzar, necesitarás instalar el paquete next-sitemap en tu proyecto Next.js. Ejecute el siguiente comando en su terminal:

npm install next-sitemap

O, si estás usando Yarn:

yarn add next-sitemap

Paso 2: crear el archivo de configuración next-sitemap.js

Después de instalar el paquete, el siguiente paso es crear un archivo de configuración llamado next-sitemap.config.js en la raíz de su proyecto. Este archivo contendrá configuraciones para generar su mapa del sitio.

Aquí tienes una configuración básica:

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000', // Your website's URL
  generateRobotsTxt: true, // (Optional) Generates a robots.txt file
  sitemapSize: 7000, // Number of URLs per sitemap file
}

En el código anterior, especificamos la URL base de su sitio usando siteUrl. La opción generateRobotsTxt genera un archivo robots.txt junto con el mapa del sitio, y sitemapSize determina la cantidad de URL que se incluirán en cada archivo de mapa del sitio.

Paso 3: actualice package.json con el script de mapa del sitio

Ahora necesitarás agregar un script a tu archivo package.json para generar el mapa del sitio cada vez que crees tu proyecto.

Aquí se explica cómo hacerlo:

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

Esto garantizará que después de cada compilación, el mapa del sitio se genere automáticamente según su configuración.

Paso 4: crear y generar el mapa del sitio

Ahora que todo está configurado, ejecute el siguiente comando para construir su proyecto y generar el mapa del sitio:

npm run build

O con hilo:

yarn build

Una vez completada la compilación, se generará un archivo sitemap.xml (y opcionalmente un archivo robots.txt) en la carpeta public/ de su proyecto. Estos archivos contendrán todas las URL de su aplicación Next.js, listas para ser rastreadas por los motores de búsqueda.

Ejemplo: aplicación Next.js "Hello World" con el siguiente mapa del sitio

Para demostrar cómo funciona el siguiente mapa del sitio, creemos una aplicación Next.js sencilla "Hola mundo". Aquí hay una página básica de Next.js:

// pages/index.js
export default function Home() {
  return (
    

      
Hello World
      
Welcome to my Next.js app!
    
  );
}

Ahora, configura tu next-sitemap.config.js así:

// next-sitemap.config.js
module.exports = {
  siteUrl: process.env.SITE_URL || 'http://localhost:3000',
  generateRobotsTxt: true,
};

A continuación, agregue lo siguiente a su paquete.json:

{
  "scripts": {
    "build": "next build",
    "postbuild": "next-sitemap"
  }
}

Después de ejecutar npm run build, encontrará su mapa del sitio en el directorio public/, que contiene la URL de su página de inicio "Hola mundo".

Demostración en vivo

Mi sitio web https://rajeshkumaryadav.com utiliza este paquete para generar automáticamente el mapa del sitio en el proceso de compilación. A continuación se muestra el archivo robot.txt que contiene sitemap.xml

https://rajeshkumaryadav.com/robots.txt
https://www.rajeshkumaryadav.com/sitemap.xml
https://www.rajeshkumaryadav.com/sitemap-0.xml

Conclusión

Al seguir los pasos descritos en esta guía, ahora ha integrado el siguiente mapa del sitio en su proyecto Next.js. Esta herramienta proporciona una manera fácil de generar un mapa del sitio y un archivo robots.txt, lo que puede mejorar significativamente el SEO de su sitio web y garantizar que los motores de búsqueda puedan descubrir de manera eficiente todo su contenido.

¡Con esta configuración, estás en camino de hacer que tu aplicación Next.js sea más amigable para los motores de búsqueda y esté mejor indexada!