Sitemap para blogs con Gatsby Remark

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

Una de las cosas que no trae por defecto el starter, pero necesaria si nos preocupa el SEO lo más mínimo, sería 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, con plugins como gatsby-plugin-sitemap.

Siguiendo la documentación sólo habría que instalar el plugin

npm install gatsby-plugin-sitemap

y añadiendo 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 sólo 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 está ahora 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 para mejorarlo sería añadirle algunos datos más a estas entradas jugando un poco con la configuración del plugin, y 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 last update 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](https://github.com/juanlugm/gatsby-starter-blog-samples/tree/sitemap)