Mapas del sitio XML

Los mapas del sitio son la forma más fácil de comunicarte con Google. Indican las URLs que pertenecen a tu sitio web y cuándo se actualizan, para que Google pueda detectar fácilmente contenido nuevo y rastrear tu sitio de manera más eficiente.

Aunque los mapas del sitio XML son los más conocidos y utilizados, también pueden crearse mediante RSS, Atom o incluso archivos de Texto si prefieres la máxima simplicidad.

Un mapa del sitio es un archivo donde proporcionas información sobre las páginas, videos y otros archivos de tu sitio, así como las relaciones entre ellos. Motores de búsqueda como Google leen este archivo para rastrear tu sitio de manera más inteligente.

Según Google:

Podrías necesitar un mapa del sitio si:

• Tu sitio es muy grande. Como resultado, es más probable que los rastreadores web de Google pasen por alto algunas de tus páginas nuevas o recientemente actualizadas.
• Tu sitio tiene un gran archivo de páginas de contenido que están aisladas o no están bien enlazadas entre sí. Si las páginas de tu sitio no se referencian naturalmente entre sí, puedes listarlas en un mapa del sitio para asegurarte de que Google no pase por alto algunas de ellas.
• Tu sitio es nuevo y tiene pocos enlaces externos. Googlebot y otros rastreadores web navegan siguiendo enlaces de una página a otra. Como resultado, Google podría no descubrir tus páginas si ningún otro sitio las enlaza.
• Tu sitio tiene mucho contenido multimedia (video, imágenes) o aparece en Google News. Si se proporciona, Google puede considerar información adicional de los mapas del sitio para la búsqueda, cuando sea apropiado.

Aunque los mapas del sitio no son obligatorios para un buen rendimiento en los motores de búsqueda, pueden facilitar el rastreo e indexación a los bots, por lo que tu contenido se detectará más rápido y se clasificará en consecuencia.

Se recomienda encarecidamente usar mapas del sitio y hacerlos dinámicos a medida que se agrega nuevo contenido a tu sitio web. Los mapas del sitio estáticos también son válidos, pero pueden ser menos útiles para Google, ya que no sirven para el descubrimiento constante de contenido.

Cómo agregar mapas del sitio a un proyecto de Next.js

Hay dos opciones:

Manual: Si tienes un sitio relativamente simple y estático, puedes crear manualmente un archivo sitemap.xml en el directorio public de tu proyecto:

   <!-- public/sitemap.xml -->
   <xml version="1.0" encoding="UTF-8">
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <url>
       <loc>http://www.example.com/foo</loc>
       <lastmod>2021-06-01</lastmod>
     </url>
   </urlset>
   </xml>

Dinámico: Si tu sitio es dinámico, puedes aprovechar getServerSideProps para generar un mapa del sitio XML bajo demanda.

Podemos crear una nueva página dentro del directorio pages, como pages/sitemap.xml.js. El objetivo de esta página será consultar nuestra API para obtener datos que nos permitan conocer las URLs de nuestras páginas dinámicas. Luego escribiremos un archivo XML como respuesta para /sitemap.xml.

Aquí tienes un ejemplo que puedes probar:

//pages/sitemap.xml.js
const EXTERNAL_DATA_URL = 'https://jsonplaceholder.typicode.com/posts';
 
function generateSiteMap(posts) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     <!--Establecemos manualmente las dos URLs que ya conocemos-->
     <url>
       <loc>https://jsonplaceholder.typicode.com</loc>
     </url>
     <url>
       <loc>https://jsonplaceholder.typicode.com/guide</loc>
     </url>
     ${posts
       .map(({ id }) => {
         return `
       <url>
           <loc>${`${EXTERNAL_DATA_URL}/${id}`}</loc>
       </url>
     `;
       })
       .join('')}
   </urlset>
 `;
}
 
function SiteMap() {
  // getServerSideProps hará el trabajo pesado
}
 
export async function getServerSideProps({ res }) {
  // Hacemos una llamada API para recopilar las URLs de nuestro sitio
  const request = await fetch(EXTERNAL_DATA_URL);
  const posts = await request.json();
 
  // Generamos el mapa del sitio XML con los datos de las publicaciones
  const sitemap = generateSiteMap(posts);
 
  res.setHeader('Content-Type', 'text/xml');
  // Enviamos el XML al navegador
  res.write(sitemap);
  res.end();
 
  return {
    props: {},
  };
}
 
export default SiteMap;

Lecturas adicionales

• Google: Aprende sobre mapas del sitio
• Google: Visión general sobre rastreo e indexación