Saltar al contenido

Crear Sitemap en tu web Gatsby

gatsby

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!