Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
gatsby-plugin-sitemap
Advanced tools
Gatsby plugin that automatically creates a sitemap for your site
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.
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"
}
}
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.
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.
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.
Create a sitemap for your Gatsby site.
Please note: This plugin only generates output when run in production
mode! To test your sitemap, run: gatsby build && gatsby serve
.
npm install gatsby-plugin-sitemap
// In your gatsby-config.js
siteMetadata: {
// If you didn't use the resolveSiteUrl option this needs to be set
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.
You then can point your service (e.g. Google Search Console) at https://www.example.com/sitemap/sitemap-index.xml
.
You probably do not want to use the defaults in this plugin. Here's an example of the default output:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.net/blog/</loc>
<changefreq>daily</changefreq>
<priority>0.7</priority>
</url>
<url>
<loc>https://example.net/</loc>
<changefreq>daily</changefreq>
<priority>0.7</priority>
</url>
</urlset>
See the changefreq
and priority
fields? Those will be the same for every page, no matter how important or how often it gets updated. They will most likely be wrong. But wait, there's more, in their docs Google says:
- Google ignores
<priority>
and<changefreq>
values, so don't bother adding them.- Google reads the
<lastmod>
value, but if you misrepresent this value, we will stop reading it.
You really want to customize this plugin config to include an accurate lastmod
date. Checkout the example for an example of how to do this.
The default config
can be overridden.
The options are as follows:
output
(string = /sitemap
) Folder path where sitemaps are stored.createLinkInHead
(boolean = true) Whether to populate the <head>
of your site with a link to the sitemap.entryLimit
(number = 45000) Number of entries per sitemap file. A sitemap index (as sitemap-index.xml
) will always be created and multiple sitemaps are created for every entryLimit
increment (e.g under 45000 entries only sitemap-0.xml
will be created).excludes
(string[] = []) An array of paths to exclude from the sitemap. While this is usually an array of strings it is possible to enter other data types into this array for custom filtering. Doing so will require customization of the filterPages
function.query
(GraphQL Query) The query for the data you need to generate the sitemap. It's required to get the site's URL, if you are not fetching it from site.siteMetadata.siteUrl
, you will need to set a custom resolveSiteUrl
function. If you override the query, you may need to pass in a custom resolvePagePath
, resolvePages
to keep everything working. If you fetch pages without using allSitePage.nodes
query structure you will definitely need to customize the resolvePages
function.resolveSiteUrl
(function) Takes the output of the data query and lets you return the site URL. Sync or async functions allowed.resolvePagePath
(function) Takes a page object and returns the uri of the page (no domain or protocol).resolvePages
(function) Takes the output of the data query and expects an array of page objects to be returned. Sync or async functions allowed.filterPages
(function) Takes the current page and a string (or other object) from the exclude
array and expects a boolean to be returned. true
excludes the path, false
keeps it.serialize
(function) Takes the output of filterPages
and lets you return a sitemap entry. Sync or async functions allowed.The following pages are always excluded: /dev-404-page
,/404
&/offline-plugin-app-shell-fallback
, this cannot be changed even by customizing the filterPages
function.
const siteUrl = process.env.URL || `https://fallback.net`
// In your gatsby-config.js
module.exports = {
plugins: [
{
resolve: "gatsby-plugin-sitemap",
options: {
query: `
{
allSitePage {
nodes {
path
}
}
allWpContentNode(filter: {nodeType: {in: ["Post", "Page"]}}) {
nodes {
... on WpPost {
uri
modifiedGmt
}
... on WpPage {
uri
modifiedGmt
}
}
}
}
`,
resolveSiteUrl: () => siteUrl,
resolvePages: ({
allSitePage: { nodes: allPages },
allWpContentNode: { nodes: allWpNodes },
}) => {
const wpNodeMap = allWpNodes.reduce((acc, node) => {
const { uri } = node
acc[uri] = node
return acc
}, {})
return allPages.map(page => {
return { ...page, ...wpNodeMap[page.path] }
})
},
serialize: ({ path, modifiedGmt }) => {
return {
url: path,
lastmod: modifiedGmt,
}
},
},
},
],
}
string
Sync or async functions allowed.
Returns: string
- - site URL, this can come from the graphql query or another scope.
Param | Type | Description |
---|---|---|
data | object | Results of the GraphQL query |
string
If you don't want to place the URI in path
then resolvePagePath
is needed.
Returns: string
- - uri of the page without domain or protocol
Param | Type | Description |
---|---|---|
page | object | Array Item returned from resolvePages |
Array
This allows custom resolution of the array of pages. This also where users could merge multiple sources into a single array if needed. Sync or async functions allowed.
Returns: object[]
- - Array of objects representing each page
Param | Type | Description |
---|---|---|
data | object | results of the GraphQL query |
boolean
This allows filtering any data in any way.
This function is executed via:
allPages.filter(
page => !excludes.some(excludedRoute => thisFunc(page, excludedRoute, tools))
)
allPages
is the results of the resolvePages
function.
Returns: Boolean
- - true
excludes the path, false
keeps it.
Param | Type | Description |
---|---|---|
page | object | contains the path key { path } |
excludedRoute | string | Element from excludes Array in plugin config |
tools | object | contains tools for filtering { minimatch, withoutTrailingSlash, resolvePagePath } |
object
This function is executed by:
allPages.map(page => thisFunc(page, tools))
allpages
is the result of the filterPages
function. Sync or async functions allowed.
Kind: global variable
Param | Type | Description |
---|---|---|
page | object | A single element from the results of the resolvePages function |
tools | object | contains tools for serializing { resolvePagePath } |
FAQs
Gatsby plugin that automatically creates a sitemap for your site
The npm package gatsby-plugin-sitemap receives a total of 93,138 weekly downloads. As such, gatsby-plugin-sitemap popularity was classified as popular.
We found that gatsby-plugin-sitemap demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.