Sitemap generator for Remix applications
- Runtime Generation
- Build time Generation (Experimental)
- Generate
robots.txt - v2 Route Convention Support
npm i remix-sitemapFor generate the sitemap we have 2 ways.
// entry.server.tsx
import { createSitemapGenerator } from 'remix-sitemap';
// Step 1. setup the generator
const { isSitemapUrl, sitemap } = createSitemapGenerator({
siteUrl: 'https://example.com',
generateRobotsTxt: true
// configure other things here
})
export default async function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
// Step 2. add the sitemap response
if (isSitemapUrl(request))
return await sitemap(request, remixContext);
let markup = renderToString(
<RemixServer context={remixContext} url={request.url} />
);
responseHeaders.set('Content-Type', 'text/html');
return new Response('<!DOCTYPE html>' + markup, {
status: responseStatusCode,
headers: responseHeaders
});
}Create a remix-sitemap.config.js file at the project root
/** @type {import('remix-sitemap').Config} */
module.exports = {
siteUrl: 'https://example.com',
generateRobotsTxt: true
// configure other things here
}Add a script using remix-sitemap to package.json to run after build.
For example if you are using npm-run-all
{
"scripts": {
"build": "npm-run-all build:*",
"build:remix": "remix build",
"build:sitemap": "remix-sitemap"
}
}This library is a little inspired in next-sitemap so the config is pretty much the same
| Property | Description |
|---|---|
| siteUrl | Base url of your website |
| changefreq (optional) | Change frequency. Default daily |
| priority (optional) | Priority. Default 0.7 |
| autoLastmod (optional) | Add <lastmod/> property. Default true |
| sitemapBaseFileName (optional) | The name of the generated sitemap file before the file extension. Default "sitemap" |
| alternateRefs (optional) | multi language support by unique url. Default [] |
| outDir (optional) | The directory to create the sitemaps files. Default "public" |
| generateRobotsTxt (optional) | Generate robots.txt file. Default false |
| robotsTxtOptions.policies (optional) | Policies for generating robots.txt |
| robotsTxtOptions.additionalSitemaps (optional) | Add additionals sitemaps to robots.txt |
| format (optional) | Format the sitemap for better view. Default false |
| size (optional) | Max size of the sitemap. |
| generateIndexSitemap (optional) | Generate index sitemap. Default true (build time only) |
If you are using build time generation, the request will be empty
// app/routes/posts.$slug.tsx
import type { SitemapFunction } from 'remix-sitemap';
export const sitemap: SitemapFunction = ({ config, request }) => {
const posts = await getPosts();
return posts.map(post => ({
loc: `/posts/${post.slug}`,
lastmod: post.updatedAt,
exclude: post.isDraft, // exclude this entry
// acts only in this loc
alternateRefs: [
{
href: `${config.siteUrl}/en/posts/${post.slug}`,
absolute: true,
hreflang: 'en'
},
{
href: `${config.siteUrl}/es`,
hreflang: 'es'
}
]
}));
};// app/routes/private.tsx
import type { SitemapFunction } from 'remix-sitemap';
export const sitemap: SitemapFunction = () => ({
exclude: true
})Url set can contain additional sitemaps defined by google. These are Google news, image or video.
You can add these sitemaps in sitemap function by adding the news, images or videos property.
export const sitemap: SitemapFunction = () => ({
images: [{ loc: 'https://example.com/example.jpg' }],
news: [{
title: 'Random News',
date: '2023-03-15',
publication: {
name: 'The Example Times',
language: 'en'
}
}]
});If you have a lot of urls, you can split the sitemap in multiple files. You can do this by setting the size property in the config.
This is only available in build time generation
/** @type {import('remix-sitemap').Config} */
module.exports = {
siteUrl: 'https://example.com',
size: 10000
}👤 Fedeya [email protected]
- Website: fedeminaya.com
- Twitter: @fedeminaya
- Github: @fedeya
- LinkedIn: @federico-minaya
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ⭐️ if this project helped you!