Gatsby Sitemap and RSS — Search Engine Discovery and Syndication

Learn how to generate XML sitemaps and RSS feeds in Gatsby for search engine discovery and content syndication with automatic build-time generation.

In this lesson, you'll install and configure sitemap and RSS feed plugins for your Gatsby site.

What You'll Learn

How to configure gatsby-plugin-sitemap for XML sitemaps, gatsby-plugin-feed for RSS feeds, customize output, and submit to search engines.

Why It Matters

Sitemaps help search engines discover all your pages. RSS feeds let users subscribe to your content. Both are essential for content-driven sites.

flowchart LR
    A[Gatsby Build] --> B[Sitemap Plugin]
    A --> C[RSS Plugin]
    B --> D[sitemap.xml]
    B --> E[sitemap-index.xml]
    C --> F[rss.xml]
    D --> G[Google Search Console]
    F --> H[Feed Readers]
    style B fill:#639,color:#fff
    style C fill:#4a148c,color:#fff

Sitemap Installation

npm install gatsby-plugin-sitemap

// gatsby-config.js
module.exports = {
  siteMetadata: {
    siteUrl: 'https://tutorials.dodatech.com'
  },
  plugins: ['gatsby-plugin-sitemap']
};

Output: A sitemap.xml file is generated at the root of your site with all pages listed. For sites with 50,000+ pages, it generates a sitemap index.

Sitemap Customization

Exclude pages and customize priority:

// gatsby-config.js
module.exports = {
  siteMetadata: { siteUrl: 'https://example.com' },
  plugins: [
    {
      resolve: 'gatsby-plugin-sitemap',
      options: {
        excludes: ['/app/*', '/admin/*', '/draft/*'],
        query: `
          query {
            allSitePage {
              nodes {
                path
              }
            }
          }
        `,
        resolvePages: ({ allSitePage }) => {
          return allSitePage.nodes.map(page => ({
            path: page.path,
            changefreq: 'weekly',
            priority: page.path === '/' ? 1.0 : 0.7,
            lastmod: new Date().toISOString()
          }));
        }
      }
    }
  ]
};

Output: The sitemap excludes client-only routes (/app/*, /admin/*) and sets different priorities for pages.

RSS Feed Installation

npm install gatsby-plugin-feed

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: 'DodaTech Tutorials',
    description: 'Learn web development and security',
    siteUrl: 'https://tutorials.dodatech.com',
    author: 'DodaTech'
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-feed',
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
                author
              }
            }
          }
        `,
        feeds: [
          {
            serialize: ({ query }) => {
              return query.allMarkdownRemark.nodes.map(node => ({
                title: node.frontmatter.title,
                description: node.excerpt,
                date: node.frontmatter.date,
                url: `${query.site.siteMetadata.siteUrl}${node.fields.slug}`,
                guid: `${query.site.siteMetadata.siteUrl}${node.fields.slug}`,
                custom_elements: [{ 'content:encoded': node.html }]
              }));
            },
            query: `
              {
                allMarkdownRemark(sort: { frontmatter: { date: DESC } }, limit: 20) {
                  nodes {
                    html
                    excerpt
                    fields { slug }
                    frontmatter { title date }
                  }
                }
              }
            `,
            output: '/rss.xml',
            title: 'DodaTech Tutorials RSS Feed'
          }
        ]
      }
    }
  ]
};

Output: An rss.xml file with the 20 most recent blog posts, including full HTML content. Feed readers can subscribe to this URL.

Multiple RSS Feeds

Create separate feeds for different content types:

feeds: [
  {
    output: '/blog/rss.xml',
    title: 'Blog Posts',
    query: `{ allMarkdownRemark(
      filter: { frontmatter: { type: { eq: "blog" } } }
      sort: { frontmatter: { date: DESC } }
    ) { nodes { ... } } }`
  },
  {
    output: '/tutorials/rss.xml',
    title: 'Tutorials',
    query: `{ allMarkdownRemark(
      filter: { frontmatter: { type: { eq: "tutorial" } } }
      sort: { frontmatter: { date: DESC } }
    ) { nodes { ... } } }`
  }
]

Output: Separate RSS feeds for blog posts and tutorials, each at their own URL.

Submitting to Search Engines

Add sitemap reference to robots.txt:

// static/robots.txt
User-agent: *
Allow: /
Sitemap: https://tutorials.dodatech.com/sitemap-index.xml

Submit to Google Search Console and Bing Webmaster Tools.

Common Mistakes

1. Missing siteUrl in siteMetadata: Both plugins require siteUrl to generate absolute URLs. Without it, URLs are relative and don't work.
2. Not excluding client-only routes: Client-only routes (like /app/*) shouldn't be in the sitemap. Exclude them with excludes.
3. RSS feed without full content: Include custom_elements: [{ 'content:encoded': node.html }] for full-content feeds readers prefer.
4. Not updating lastmod: If you use changefreq or priority, ensure lastmod reflects the actual last modified date.
5. Too many feed items: RSS readers handle 20-50 items well. Don't include all 1000+ posts in a single feed.

Practice Questions

1. What plugin generates XML sitemaps? Answer: gatsby-plugin-sitemap. It automatically lists all pages in sitemap.xml.

2. What configuration is required for both sitemap and RSS plugins? Answer: siteMetadata.siteUrl must be set to your production URL. Both plugins use it to generate absolute URLs.

3. How do you exclude certain paths from the sitemap? Answer: Use the excludes option with glob patterns: ['/app/*', '/draft/*'].

4. What does gatsby-plugin-feed serialize? Answer: It converts query results into RSS XML entries. You define the serialize function that maps query nodes to RSS fields.

Challenge

Create a site with multiple content sections (blog, tutorials, docs, news). Generate separate RSS feeds for each section and a combined feed. Create a sitemap that excludes draft pages.

Mini Project

Set up a Gatsby site with sitemap and RSS configured. Submit the sitemap to Google Search Console. Verify both sitemap.xml and rss.xml work correctly.

FAQ

What's Next

Learn about Gatsby PWA to turn your Gatsby site into a Progressive Web App with offline support.