How to Add sitemap.xml File to Your Next.js App
A sitemap is a file that provides information about your content on your website. This includes which pages and files you think are more important along with when they were last updated. Search engines read this file to crawl your website more efficiently. In this blog we will learn how to add a sitemap.xml file to your Next.js App Router app.
Jordan Wu
4 min·Posted
Table of Contents
When Should You Create a Sitemap?
In many cases you shouldn't need to add a sitemap to your website. For example if your website has 500 pages or less, only counting pages that you need to be in search results. With a small website it's easy to link all your pages and have a web crawler find all your links starting from the home page.
You should create a sitemap if your website is large. A large website is more difficult to make sure that every page is linked by at least one other page on your website.
You should create a sitemap if your website is new and doesn't have any external links to it. Web crawlers crawl the web by following links from one page to another. As a result, having a sitemap will help get your pages discovered.
You should create a sitemap if you have lots of rich media content like video and images. This will provide web crawlers additional information to help understand the content on your page.
What is a sitemap.xml File?
A sitemap.xml file contains information about the pages on your website along with its media files. The size limit is 50 MB (uncompressed) or 50,000 URLs. If you have more URLs, you can break your sitemap into multiple sitemaps. The file must be UTF-8 encoded and the recommended location for the file is your website root location.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/</loc>
<lastmod>2005-01-01</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
If you want to learn more about the format take a look at sitemap protocol.
What Is an Image Sitemap?
Image sitemap helps crawlers find images on your website that otherwise would be missed such images fetched using JavaScript. You can create a separate image sitemap or add image sitemap tags to your existing sitemap.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>https://example.com/sample1.html</loc>
<image:image>
<image:loc>https://example.com/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>https://example.com/photo.jpg</image:loc>
</image:image>
</url>
<url>
<loc>https://example.com/sample2.html</loc>
<image:image>
<image:loc>https://example.com/picture.jpg</image:loc>
</image:image>
</url>
</urlset>
What is a Video Sitemap?
A video sitemap provides additional information about videos hosted on your website. This is a good way to help crawlers better understand the video content. You can create a separate image sitemap or add image sitemap tags to your existing sitemap.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://www.example.com/videos/some_video_landing_page.html</loc>
<video:video>
<video:thumbnail_loc>https://www.example.com/thumbs/123.jpg</video:thumbnail_loc>
<video:title>Grilling steaks for summer</video:title>
<video:description>
Alkis shows you how to get perfectly done steaks every time
</video:description>
<video:content_loc>
http://streamserver.example.com/video123.mp4
</video:content_loc>
<video:player_loc>
https://www.example.com/videoplayer.php?video=123
</video:player_loc>
<video:duration>600</video:duration>
<video:expiration_date>2021-11-05T19:20:30+08:00</video:expiration_date>
<video:rating>4.2</video:rating>
<video:view_count>12345</video:view_count>
<video:publication_date>2007-11-05T19:20:30+08:00</video:publication_date>
<video:family_friendly>yes</video:family_friendly>
<video:restriction relationship="allow">IE GB US CA</video:restriction>
<video:price currency="EUR">1.99</video:price>
<video:requires_subscription>yes</video:requires_subscription>
<video:uploader
info="https://www.example.com/users/grillymcgrillerson">GrillyMcGrillerson
</video:uploader>
<video:live>no</video:live>
</video:video>
<video:video>
<video:thumbnail_loc>https://www.example.com/thumbs/345.jpg</video:thumbnail_loc>
<video:title>Grilling steaks for winter</video:title>
<video:description>
In the freezing cold, Roman shows you how to get perfectly done steaks every time.
</video:description>
<video:content_loc>
http://streamserver.example.com/video345.mp4
</video:content_loc>
<video:player_loc>
https://www.example.com/videoplayer.php?video=345
</video:player_loc>
</video:video>
</url>
</urlset>
What is a News Sitemap?
If you are a news publisher, use a news sitemaps to tell Google about your news articles and additional information about them. Update your news sitemap with fresh articles as they're published and only include the recent URLs for articles that were created in the last two days. You can create a separate image sitemap or add image sitemap tags to your existing sitemap.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:news="http://www.google.com/schemas/sitemap-news/0.9">
<url>
<loc>http://www.example.org/business/article55.html</loc>
<news:news>
<news:publication>
<news:name>The Example Times</news:name>
<news:language>en</news:language>
</news:publication>
<news:publication_date>2008-12-23</news:publication_date>
<news:title>Companies A, B in Merger Talks</news:title>
</news:news>
</url>
</urlset>
How to combine sitemap extensions
Sitemap extensions are used to understand the xml metadata content in your sitemap.xml file. This is used when you combine multiple sitemaps like news articles, images, and videos.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<!-- rest of the sitemap -->
Create sitemap.xml File in Next.js App Router
Add a sitemap.(xml|js|ts) file to your app directory, for example app/sitemap.ts path.
app/sitemap.tsimport { MetadataRoute } from 'next'
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: 'https://acme.com',
lastModified: new Date(),
changeFrequency: 'yearly',
priority: 1,
},
{
url: 'https://acme.com/about',
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.8,
},
{
url: 'https://acme.com/blog',
lastModified: new Date(),
changeFrequency: 'weekly',
priority: 0.5,
},
]
}
This will output the following:
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://acme.com</loc>
<lastmod>2023-04-06T15:02:24.021Z</lastmod>
<changefreq>yearly</changefreq>
<priority>1</priority>
</url>
<url>
<loc>https://acme.com/about</loc>
<lastmod>2023-04-06T15:02:24.021Z</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://acme.com/blog</loc>
<lastmod>2023-04-06T15:02:24.021Z</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
</urlset>
Add sitemap.xml to Your robots.txt File
You would want to add your sitemap.xml file to your robots.txt file. This helps crawlers know where your sitemap.xml location is. Check out How to Add robots.txt File to Your Next.js App
How to Test Your sitemap.xml File
You can submit your sitemap to Google Search Console using the Sitemaps report. Other methods would be to use the Search Console API to programmatically submit a sitemap or Add sitemap.xml to Your robots.txt File. Keep in mind it would take a few days for your sitemap to be indexed and it's best to include your sitemap.xml to robots.txt to allow for indexing.
