Cómo crear un mapa del sitio personalizado para su sitio Gatsby.js

Cuando se necesita una configuración fácil de implementar, es posible crear sitios estáticos con React usando Gatsby.js. Estos brindan una buena velocidad y una experiencia de desarrollo fluida. Gatsby ha estado creciendo constantemente con desarrolladores que lo utilizan para blogs, marketing y sitios de comercio electrónico.

Cada vez que creas un sitio, puedes ayudar a los rastreadores de los motores de búsqueda a mejorar las clasificaciones de búsqueda orgánica. Debes asegurarte de que los motores de búsqueda como Google puedan comprender la arquitectura de tu sitio e indexarlo de manera inteligente. Puedes hacer todo eso incluyendo un sitemap.xmlarchivo en la raíz de tu sitio.

Con la creciente popularidad de los sitios Gatsby.js y JAMstack, en este tutorial generará automáticamente un archivo de mapa del sitio XML personalizado en sus sitios web con Gatsby.

Mapa del sitio XML

Un sitio web se compone de varias páginas web como Acerca de, Contacto, Blog, Suscribirse, etc. Un archivo de mapa del sitio mantiene una lista de todas estas páginas para informar a los motores de búsqueda como Google sobre la organización del contenido de su sitio. Los rastreadores web de los motores de búsqueda como Googlebot leen este archivo y rastrean su sitio de manera inteligente.

En los primeros tiempos de la web, los mapas de sitio HTML, que eran listas con viñetas generadas manualmente, estaban de moda. Sin embargo, debido a su popularidad e importancia, los mapas de sitio se publican en formato XML en lugar de HTML, ya que su público objetivo son los motores de búsqueda y no las personas.

Entonces, un archivo de mapa del sitio XML se comunica con los motores de búsqueda sobre todas las páginas que existen en su sitio web.

Importancia de agregar un archivo de mapa del sitio

Si tenemos en cuenta la optimización de motores de búsqueda (SEO), los mapas de sitio son muy importantes. Sin embargo, no afectan a la clasificación de búsqueda. En cambio, si hay una página web que no está indexada, el mapa de sitio informa a los motores de búsqueda sobre esa página para que la indexen correctamente.

Los mapas de sitio son igualmente importantes tanto para los sitios nuevos como para los antiguos. Especialmente si su sitio es relativamente nuevo, se recomienda agregar uno, ya que es difícil para los motores de búsqueda encontrar publicaciones y páginas de un sitio nuevo. Debe facilitar al máximo el trabajo del motor de búsqueda para aprovecharlo al máximo.

Encontrará sitemap.xmlarchivos en la mayoría de los sitios web. Esto ayuda a los robots de los motores de búsqueda a controlar las distintas actualizaciones y, básicamente, todo lo que sucede en un sitio que debería indexarse.

Cómo agregar un mapa del sitio en Gatsby

Un aspecto destacado de Gatsby es su creciente colección de complementos que implementan la API de Gatsby a través de paquetes NPM simples.

Ahora, para crear un mapa del sitio no es necesario escribir varias líneas de código. Existe un complemento de Gatsby para generar el archivo del mapa del sitio llamado gatsby-plugin-sitemap.

Necesitará tener un sitio Gatsby en funcionamiento antes de continuar con este tutorial.

Instalación

Para instalar el gatsby-plugin-sitemappaquete, ejecute el siguiente comando en la carpeta raíz:

npm install --save gatsby-plugin-sitemap

Uso del complemento: gatsby-plugin-sitemap

Ahora que el complemento se ha instalado correctamente, es hora de añadirlo al gatsby-config.jsarchivo. Un breve recordatorio para quienes son nuevos en Gatsby: dentro del gatsby-config.jsarchivo encontrarán todas las opciones de configuración del sitio, que se encuentran en la carpeta raíz.

Una de estas opciones de configuración es para los complementos. Aquí encontrará una variedad de complementos que implementan las API de Gatsby. Algunos complementos se enumeran por nombre, mientras que otros también pueden aceptar opciones (y gatsby-plugin-sitemap también incluye opciones).

Entonces, agregue las siguientes líneas de código en su gatsby-config.jsarchivo:

gatsby-config.js

module.exports = {  siteMetadata: {    title: 'Your Site Title',    siteUrl: 'https://yoursite.com',  },  plugins: ['gatsby-plugin-sitemap'],}

Asegúrate de que dentro de siteMetadatati cambies el titley siteUrlde acuerdo a los detalles de tu proyecto.

Generar un archivo de mapa del sitio

Para crear un mapa del sitio, debe generar una compilación de producción e iniciar el servidor. En su terminal, escriba el siguiente comando y presione ENTER.

npm run build

Espere unos segundos y obtendrá un mapa del sitio funcional con Gatsby.

De forma predeterminada, el mapa del sitio se genera en la raíz de su sitio web, que es una carpeta llamada public. Cuando implemente su sitio, podrá acceder a él a través de /sitemap.xmly mostrará todas las páginas de su sitio a las que los usuarios pueden acceder actualmente.

Puede acceder al mapa del sitio de su sitio con la siguiente URL:

https://your-domain/sitemap.xml

El gatsby-plugin-sitemapcomplemento admite opciones personalizadas avanzadas, por lo que esta función predeterminada se puede modificar en consecuencia. Profundicemos un poco en estas opciones.

Opciones avanzadas para gatsby-plugin-sitemap

Admite gatsby-plugin-sitemapdistintas opciones avanzadas que puedes personalizar para tener más control sobre tus sitemap.xmlarchivos. Veamos algunas de ellas:

• output:El nombre de archivo predeterminado es . sitemap.xmlPuede utilizar la outputopción para cambiar el nombre del archivo de salida. Por ejemplo, output: '/some-other-sitemap.xml',la URL ahora se convierte en .https://your-domain/some-other-sitemap.xml
• exclude:Esta opción puede ayudarle a excluir cualquier enlace del mapa del sitio por cualquier motivo.
• query:Consulta GraphQL personalizada para obtener información como siteMetadata,,,, siteURLetc.allSitePage

También hay un par de opciones útiles para sitemapSizey sitemap index. Puedes visitar el repositorio oficial del complemento para obtener más información aquí.

Ejemplo de opciones personalizadas

Por ejemplo, en este tutorial, personalizamos las opciones del complemento para generar los datos que elijamos. Aquí, personalizamos la consulta GraphQL:

 {      resolve: `gatsby-plugin-sitemap`,      options: {        query: `{          site {            siteMetadata {              siteUrlNoSlash            }          }          allSitePage {            edges {              node {                path              }            }          }          allMarkdownRemark {            edges {              node {                fields {                  slug                }              }            }          }        }`,        serialize: ({ site, allSitePage, allMarkdownRemark }) = {          let pages = []          allSitePage.edges.map(edge = {            pages.push({              url: site.siteMetadata.siteUrlNoSlash + edge.node.path,              changefreq: `daily`,              priority: 0.7,            })          })          allMarkdownRemark.edges.map(edge = {            pages.push({              url: `${site.siteMetadata.siteUrlNoSlash}/${                edge.node.fields.slug              }`,              changefreq: `daily`,              priority: 0.7,            })          })          return pages        },      },    },

Aquí, usamos la queryopción para obtener datos para nuestro sitio siteque incluye información sobre siteMetadatay siteUrlNoSlash. Además, consultamos allSitePagepara obtener las rutas URL de todas las páginas del sitio que es para recuperar pathla propiedad para cada gráfico nodea través de todos los edges. Y finalmente, usamos el allMarkdownRemarkque lee archivos escritos en Markdown y luego los convierte en páginas HTML. Aquí obtenemos la sluginformación para cada publicación de Markdown desde dentro de la fieldpropiedad.

Hacia el final, hemos llamado a la serializefunción para mapear los datos que se obtienen para allSitePagey allMarkdownRemark. Cada uno devuelve una URL de página con changefreq: 'daily'y un priority: 0.7.

Esta fue una demostración de cómo jugar con opciones personalizadas para el gatsby-plugin-sitemap, puede hacerlo de acuerdo con los requisitos de su proyecto.

Puede acceder a una demostración del mapa del sitio en vivo para Gatsby.js aquí.

Conclusión

La generación de mapas de sitios puede ser más sencilla con Gatsby.js. El resultado de crear un archivo sitemap.xml gatsby-plugin-sitemapmuestra que la experiencia del desarrollador al usar Gatsby.js está mejorando.