Sitemap para blogs con Gatsby Remark

Siguiendo los tutoriales de Gatsby oficiales, puedes crear fácilmente un sitio que genere su contenido a partir de páginas Markdown. Además, puedes utilizar Gatsby-starter-blog y tener prácticamente el trabajo hecho para levantar un blog en un minuto.

Una de las cosas que no trae por defecto el starter, pero que es necesaria si nos preocupa el SEO aunque sea mínimamente, es la generación de un Sitemap. Así que, si estás interesado en aprender cómo crear un sitemap para tu blog, sigue leyendo.

Esto es bastante sencillo gracias a plugins como gatsby-plugin-sitemap.

Siguiendo la documentación, solo tendrás que instalar el plugin:

npm install gatsby-plugin-sitemap

Y añadir gatsby-plugin-sitemap a tu lista de plugins en gatsby-config.js.

Una cosa importante a tener en cuenta es que este plugin se ejecuta solo al hacer build. De modo que no verás tu sitemap al hacer develop. Para probarlo, tendrás que usar el siguiente comando.

gatsby build && gatsby serve

Como podrás ver, simplemente añadiendo este plugin verás que tu blog ahora está sirviendo dos nuevos ficheros xml.

http://localhost:9000/sitemap-index.xml
http://localhost:9000/sitemap-0.xml

El primero, como dice su nombre, es un índice, y apunta en este caso al único fichero de sitemap ya que el sitio no tiene muchas páginas todavía (sitemap-0.xml).

Pero si observamos el sitemap generado, veremos que tampoco es perfecto. Se limita a mostrar todas las páginas disponibles, sin más.

Una forma sencilla de mejorarlo sería añadirle algunos datos más a estas entradas jugando un poco con la configuración del plugin. Para ello, vamos a cambiar la entrada gatsby-plugin-sitemap por:

{
    resolve: `gatsby-plugin-sitemap`,
    options: {
      query: `{
        site {
          siteMetadata {
            siteUrl
          }
        }
        allSitePage {
          nodes {
            path
          }
        }
        allMarkdownRemark {
          edges {
            node {
              fields {
                slug
              }
              frontmatter {
                date(formatString: "YYYY-MM-DD")
              }
            }
          }
        }        
      }`,
      resolvePages: ({
        allSitePage: { nodes: allPages },
        allMarkdownRemark: { edges: allMarkdownEdges },
      }) => {
        const markdownNodeMap = allMarkdownEdges.reduce((acc, edge) => {
          acc[edge.node.fields.slug] = edge.node.frontmatter
          return acc
        }, {})
        return allPages.map(page => {
          return { ...page, ...markdownNodeMap[page.path] }
        })
      },
      serialize: ({ path, date }) => {
        return {
          url: path,
          changefreq: `daily`,
          priority: 0.7,
          lastmod: date,
        }
      },
    },
}

Esto tomará de la entrada del blog el campo date, y asignará además prioridad 0.7 y frecuencia de cambio diaria. Si quisiéramos tomar esos datos del documento markdown, podríamos conseguirlo siguiendo los mismos pasos que haremos con la fecha.

El script tomará la fecha de última actualización de la fecha que aparece al comienzo del documento en formato Markdown, incluiremos lo siguiente:

---
title: Título de la entrada
date: 2023-01-10 20:57:00 +0100
description: Descripción de la entrada

---

El texto de tu entrada del blog...

Si quisiéramos parametrizar algún campo más, por ejemplo, el campo priority, sería tan sencillo como agregarlo a la cabecera de los artículos, como hicimos con la fecha.

---
title: Título de la entrada
date: 2023-01-10 20:57:00 +0100
priority: 0.3
description: Descripción de la entrada

---

El texto de tu entrada del blog...

Y modificar ligeramente la configuración del plugin de sitemap. El primer cambio en la query, para añadir el campo dentro del objeto frontmatter:

frontmatter {
    date(formatString: "YYYY-MM-DD")
    priority
}

Y el segundo cambio en el apartado de "serialize". Igualmente añadiendo el campo como entrada y asignándolo al objeto. Por último, para no perder el valor por defecto, podemos utilizar el operador lógico || para asignar 0.7 si no está explícitamente definido en el artículo.

serialize: ({ path, date, priority }) => {
    return {
    url: path,
    changefreq: `daily`,
    priority: priority || 0.7,
    lastmod: date,
    }
},

Puedes ver el código completo en esta rama de mi repo de ejemplos de Gatsby juanlugm/gatsby-starter-blog-samples/tree/sitemap