How to add lastmod to sitemap in React framework Gatsby
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
⇨ Click here for the table of contents for React articles
I will write about how to add lastmod to the sitemap of React framework Gatsby and include the last modified date in the sitemap.
The package used is
"gatsby-plugin-sitemap": "^2.11.0",
Assuming that the sitemap is already implemented.
Also, assuming that the rewritedAt update time is recorded in the md files.
Conclusion
Modify gatsby-config.js.
{
resolve: 'gatsby-plugin-sitemap',
options: {
query: `
{
site {
siteMetadata {
siteUrl: url
}
}
allSitePage(
filter: {
path: { regex: "/^(?!/404/|/404.html|/dev-404-page/)/" }
}
) {
edges {
node {
path
}
}
}
allMarkdownRemark(
filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
) {
edges {
node {
fields {
slug
}
frontmatter {
date
rewritedAt
}
}
}
}
}
`,
output: '/sitemap.xml',
serialize: ({ site, allSitePage, allMarkdownRemark }) =>
allSitePage.edges.map(
edge => {
const pages = allMarkdownRemark.edges;
const index = pages.findIndex(
x => edge.node.path.indexOf(x.node.fields.slug) != -1
);
var date;
if (index != -1) {
if (pages[index].node.frontmatter.rewritedAt) {
date = new Date(pages[index].node.frontmatter.rewritedAt);
} else {
date = new Date(pages[index].node.frontmatter.date);
}
} else {
date = new Date();
}
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const lastmod = `${year}-${month}-${day}`;
if (year == 1970) {
return {
// If there is no update time in the md file
url: site.siteMetadata.siteUrl + edge.node.path,
};
} else {
return {
// When there is an update or creation date
url: site.siteMetadata.siteUrl + edge.node.path,
lastmod: lastmod,
};
}
}
)
}
},
Explanation
The original code for generating the sitemap
It seemed to loop through all the URLs generated in the blog with map
and loop through the sitemap with that URL.
This part was generating the URL in the sitemap.
url: site.siteMetadata.siteUrl + edge.node.path,
So, within the map
, we search for posts with the same slug as the path and, if there is the same slug, we put the update time if rewritedAt exists.
Otherwise, we put the date as the update time.
That's how we did it. It's a bit of a brute force.
(If you're implementing it on a larger site, you may need to search in more detail.)
Adding the data to be retrieved
allMarkdownRemark(
filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
) {
edges {
node {
fields {
slug
}
frontmatter {
date
rewritedAt
}
}
}
}
Add a list of md files for posts to retrieve the data needed to generate the sitemap.
The necessary information is slug, date, and rewritedAt.
Searching for posts with the same slug as the URL within the map
edge => {
// List of pages
const pages = allMarkdownRemark.edges;
// Search if the path contains the page's slug
const index = pages.findIndex(
x => edge.node.path.indexOf(x.node.fields.slug) != -1
);
var date;
// If it contains, update time or creation time (rewritedAt may be null)
if (index != -1) {
if (pages[index].node.frontmatter.rewritedAt) {
date = new Date(pages[index].node.frontmatter.rewritedAt);
} else {
date = new Date(pages[index].node.frontmatter.date);
}
} else {
// If it's not included, it's basically a page with room for improvement. If you want the correct update time, you need to think about this. If thinking about it is troublesome, is it better for these pages to not have an update time entered?
date = new Date();
}
As mentioned in the comments, we search for the post's slug created in Markdown and the URL path, and define the date we want to include in lastmod.
Just need to format it to be loaded into the sitemap
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const lastmod = `${year}-${month}-${day}`
if (year == 1970) {
return {
// If there is no update time in the md file
url: site.siteMetadata.siteUrl + edge.node.path,
}
} else {
return {
// When there is an update or creation date
url: site.siteMetadata.siteUrl + edge.node.path,
lastmod: lastmod,
}
}
lastmod will be loaded in a format like 2021-08-22
, so we format it that way and we're done.
If rewritedAt and date are not in the md file, the year will be 1970, so only the URL is sent at that time.
⇨ How to create a sitemap with Laravel [SEO measures]
⇨ It seems unnecessary to have priority and changefreq in the sitemap
Postscript
It was quite a brute force approach, but I managed to implement it somehow.
Based on the search results from Stack Overflow and others, it seems like everyone is implementing it with determination, so I also implemented it with determination.
lastmod is a relatively important tactile sensation in the sitemap (a valid means of determining whether the quality of the article is new or not), so it was troublesome, but I implemented it.
However, (this is just a rumor) it seems that such items in the sitemap may lose credibility (crawlers may not trust if the page they crawled and read is different), so it is good to implement it carefully and correctly.
I also want to implement it for individual pages and specific pages sometime.
That's all!!!
If you have any questions, corrections, etc., please feel free to contact me on Twitter!
Popular Articles
Deploying a PHP7.4 + Laravel6 Project to AWS EC2
Related Articles
Made an "Angry Face Grading App" using React Native + CloudVision