Hola!
En esta entrada vamos a ver como añadir un sitemap a tu web hecha con Gatsby, este sitemap te vale para cualquier proyecto hecho con Gatsby da igual si tu web está conectada a un wp o coge los datos de un xml , json etc etc.
Tener un Sitemap de tu web es útil para el SEO. A la hora de que los buscadores indexen tu sitio y no se pierdan es util que tengas un sitemap.
Afortunadamente para ti, añadir un mapa a un proyecto de Gatsby.js es increíblemente fácil! muy muy simple.
Instalación
Este post asume que ya tienes un proyecto de Gatsby configurado, y que estás listo para editarlo. Si necesitas ayuda para llegar a ese punto, por favor sigue el tutorial de introducción en el post de crear una web con Gatsby
Instalar el plugin
Como probablemente te darás cuenta más temprano que tarde, ¡hay un montón de plugins útiles y oficiales de Gatsby! Siempre es una buena idea mirar a través de la sección de plugins en el sitio oficial cuando se construyen nuevos proyectos. Para nuestro mapa del sitio, haremos uso de un plugin oficial gatsby-plugin-sitemap.
Esta es la única nueva dependencia que estamos añadiendo a nuestro proyecto, así que vamos a añadirla así:
$ npm install gatsby-plugin-sitemap
Añade el plugin a tu configuración de Gatsby:
Y ahora todo lo que queda por hacer es añadir el plugin de sitemap a nuestro archivo gatsby-config.js, y opcionalmente configurarlo.
Antes de añadir el plugin, tenemos que asegurarnos de que el objeto siteMetadata tiene un valor siteUrl válido:
Editamos el fichero gatsby-config.js
siteMetadata: {
siteUrl: `https://www.codifica.me`,
},
Importante: ¡No te saltes este paso! Por defecto, este plugin usa el valor ‘siteMetadata’ para construir las urls de su mapa de sitio.
A continuación, un poco más abajo dentro del archivo gatsby-config.js, añadimos el plugin en nuestro array de plugins.
plugins: [
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `./sitemap.xml`,
exclude: [`/otras`]
}
},
]La forma más fácil de añadir el plugin no implica ninguna configuración extra, y creará automáticamente los elementos del mapa de sitio para cada página de nuestro sitio. Este ‘método sin configuración’ incluye todas las páginas, por lo que igual necesitas un poco de configuración adiccional.
Opciones de configuración
De acuerdo con la documentación del plugin, hay varias opciones disponibles para personalizar la generación de nuestro mapa del sitio.
consulta: (Consulta GraphQL) Esta es una consulta GraphQL utilizada para obtener los datos necesarios para generar el mapa del sitio. Se utiliza por defecto para obtener el valor site.siteMetadata.siteUrl que hemos establecido anteriormente, y todas las páginas disponibles. La consulta por defecto tiene este aspecto, y rara vez necesitarás añadir mas cosas:
query: `
{
site {
siteMetadata {
siteUrl
}
}
allSitePage {
edges {
node {
path
}
}
}
}`Conclusión
Los sitemaps son una parte importante de cualquier sitio web para la correcta indexación en los motores de búsqueda, y especialmente para los sitios más nuevos con un bajo número de backlinks. Es un paso que a menudo se pasa por alto, pero puede acelerar drásticamente el proceso de indexación y que así tu sitio web salga antes en los buscadores.
Afortunadamente, con Gatsby y sus increíbles plugins de sitempas, podemos añadir sitemaps a nuestros proyectos en poco tiempo!