Create a sitemap with Remix.run

A sitemap is important if you have content on your website. It's a file that'll let the Search Engines know about all your content. It's often exposed at a domain.com/sitemap.xml route.

You can find all the documentation you need about sitemaps on sitemaps.org.

The TL;DR; version of it is that a sitemap looks like this :

This format will work in most cases.

Let's get started by creating a new route in our Remix app. We want the URL of our sitemap to be sitemap.xml.

To create this route we need to create a file in app/routes/[sitemap.xml].ts. The [] syntax is a convention in Remix routes to escape the content. This allows us to treat .xml as part of the URL.

You can learn more about this syntax in the Route File Convention.

In this route we'll just need to export a loader that returns an XML response.

This will make the sitemap.xml route available, and will return an empty XML response.

We now need to generate the sitemap content.

Let's start by defining the type of a Sitemap Entry using Typescript.