What is gatsby-plugin-sitemap?
The gatsby-plugin-sitemap package is a Gatsby plugin that generates a sitemap for your Gatsby site. This helps search engines to better crawl your site and understand its structure.
What are gatsby-plugin-sitemap's main functionalities?
Basic Sitemap Generation
This feature allows you to generate a basic sitemap for your Gatsby site. The sitemap will be output to the specified path, in this case, '/sitemap.xml'.
{
"resolve": "gatsby-plugin-sitemap",
"options": {
"output": "/sitemap.xml"
}
}
Custom Query for Sitemap
This feature allows you to customize the query used to generate the sitemap. You can specify which pages to include in the sitemap by modifying the GraphQL query.
{
"resolve": "gatsby-plugin-sitemap",
"options": {
"query": `{
site {
siteMetadata {
siteUrl
}
}
allSitePage {
nodes {
path
}
}
}`,
"output": "/sitemap.xml"
}
}
Excluding Specific Pages
This feature allows you to exclude specific pages from the sitemap. You can provide an array of paths that should not be included in the generated sitemap.
{
"resolve": "gatsby-plugin-sitemap",
"options": {
"exclude": [
"/path/to/page",
"/another/path/to/page"
],
"output": "/sitemap.xml"
}
}
Customizing Sitemap Entries
This feature allows you to customize the entries in the sitemap. You can specify additional properties like 'changefreq' and 'priority' for each URL.
{
"resolve": "gatsby-plugin-sitemap",
"options": {
"serialize": ({ site, allSitePage }) =>
allSitePage.nodes.map(node => {
return {
url: `${site.siteMetadata.siteUrl}${node.path}`,
changefreq: `daily`,
priority: 0.7,
}
}),
"output": "/sitemap.xml"
}
}
Other packages similar to gatsby-plugin-sitemap
sitemap
The 'sitemap' package is a general-purpose sitemap generator for Node.js. It provides more flexibility and can be used with any Node.js project, not just Gatsby. However, it requires more manual setup compared to gatsby-plugin-sitemap.
next-sitemap
The 'next-sitemap' package is a sitemap generator specifically designed for Next.js projects. It offers similar functionalities to gatsby-plugin-sitemap but is tailored for the Next.js framework.
react-router-sitemap
The 'react-router-sitemap' package generates sitemaps for React Router-based applications. It is useful for projects that use React Router for navigation, providing a way to create sitemaps based on the routes defined in the application.
gatsby-plugin-sitemap
Create a sitemap for your Gatsby site.
Install
npm install --save gatsby-plugin-sitemap
How to Use
siteMetadata: {
siteUrl: `https://www.example.com`,
},
plugins: [`gatsby-plugin-sitemap`]
Above is the minimal configuration required to have it work. By default, the
generated sitemap will include all of your site's pages, except the ones you exclude.
Options
The defaultOptions
here can be overridden.
We ALWAYS exclude the following pages: /dev-404-page/
,/404
&/offline-plugin-app-shell-fallback/
, this cannot be changed.
Example:
siteMetadata: {
siteUrl: `https://www.example.com`,
},
plugins: [
{
resolve: `gatsby-plugin-sitemap`,
options: {
output: `/some-other-sitemap.xml`,
exclude: ["/category/*", `/path/to/page`],
query: `
{
site {
siteMetadata {
siteUrl
}
}
allSitePage {
edges {
node {
path
}
}
}
}`
}
}
]
NOTE: This plugin only generates output when run in production
mode! To test your sitemap, run: gatsby build && gatsby serve