ホーム > Gatsby > How to add lastmod to sitemap in React framework Gatsby
Gatsby

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.

⇨ 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

Please Provide Feedback
We would appreciate your feedback on this article. Feel free to leave a comment on any relevant YouTube video or reach out through the contact form. Thank you!