remix-sitemap
Advanced tools
Sitemap generator for Remix applications
npm i remix-sitemap
For 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'
})
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',
// 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" |
| optionalSegments (optional) | possible values of optional segments |
| alternateRefs (optional) | multi language support by unique url. Default [] |
| outDir | The directory to create the sitemaps files. Default "public" |
If you are using build time generation, the request in
generateEntrieswill be empty
// app/routes/posts.$slug.tsx
import type { SitemapHandle } from 'remix-sitemap';
export const handle: SitemapHandle = {
sitemap: {
async generateEntries(request) {
const posts = await getPosts();
return posts.map(post => {
return {
loc: `/posts/${post.slug}`,
lastmod: post.updatedAt,
// acts only in this loc
alternateRefs: [
{
href: 'https://en.example.com',
hreflang: 'en'
},
{
href: 'https://es.example.com',
hreflang: 'es'
}
]
}
})
}
}
};
// app/routes/private.tsx
import type { SitemapHandle } from 'remix-sitemap';
export const handle: SitemapHandle = {
sitemap: {
exclude: true
}
};
Url set can contain additional sitemaps defined by google. These are Google news, image or video.
You can add these sitemaps in generateEntries
export const handle: SitemapHandle = {
sitemap: {
async generateEntries() {
return [
{
loc: '/news/random-news',
images: [{ loc: 'https://example.com/example.jpg' }],
news: [{
title: 'Random News',
date: '2023-03-15',
publication: {
name: 'The Example Times',
language: 'en'
}
}]
}
]
}
}
}
with optional segments layouts to has a static data like the languages you can add values to sitemap config
this is just an example for multiple language it is recommended to use the
alternateRefsproperty
// app/routes/($lang).tsx
import type { SitemapHandle } from 'remix-sitemap';
export const handle: SitemapHandle = {
sitemap: {
values: ['en', 'es']
}
};
and the routes inside get the automapping with all of the defined values
for example
routes/($lang)/blog.tsx -> https://example.com/blog
-> https://example.com/en/blog
-> https://example.com/es/blog
this also works with dynamic routes within the optional segment, with the values defined in the optional segment route you can avoid to returning the repeated entries with the optional segments in your generateEntries
also if you don't have a layout for the optional segment, you can define it in the global config with the optionalSegments property
const { isSitemapUrl, sitemap } = createSitemapGenerator({
siteUrl: 'https://example.com',
optionalSegments: {
'($lang)': ['en', 'es']
}
})
For avoid the default behaviour of the optionalSegments you can disable it with the addOptionalSegments property on the handle
// app/routes/($lang)/blog.$slug.tsx
export const handle: SitemapHandle = {
sitemap: {
addOptionalSegments: false
}
}
👤 Fedeya hello@fedeminaya.com
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ⭐️ if this project helped you!
FAQs
Sitemap generator for Remix applications
The npm package remix-sitemap receives a total of 437 weekly downloads. As such, remix-sitemap popularity was classified as not popular.
We found that remix-sitemap demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.