search

fedeya / remix-sitemap

Sitemap generator for Remix applications
https://npmjs.com/remix-sitemap
MIT License
99 stars 6 forks source link
remix sitemap

readme

Remix Sitemap

Version License: MIT CI

Sitemap generator for Remix applications

✨ Features

📚 Table Of Contents

🚀 Getting Started

Installation

npm i remix-sitemap

Usage

Runtime Generation

// 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
  });
}
Usage with sitemap[.]xml route (experimental)
1. Create a `lib/sitemap.ts` file ```ts // lib/sitemap.ts export const { experimental_sitemap, robots } = createSitemapGenerator({ siteUrl: 'https://example.com', // configure other things here }) ``` 2. Create a `sitemap[.]xml` route ```ts // app/routes/sitemap[.]xml.tsx import { routes } from '@remix-run/dev/server-build'; import { experimental_sitemap } from '~/lib/sitemap'; export const loader: LoaderFunction = async ({ request }) => { return await experimental_sitemap(request, routes); } ``` 3. Create a `robots[.]txt` route ```ts // app/routes/robots[.]txt.tsx import { robots } from '~/lib/sitemap'; export const loader: LoaderFunction = ({ request }) => { return robots(); } ```

Build time Generation

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" 
  }
}

📝 Guides

Generate Sitemap for Dynamic Routes

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' } ] })); };


### Exclude Route
```ts
// app/routes/private.tsx
import type { SitemapFunction } from 'remix-sitemap';

export const sitemap: SitemapFunction = () => ({
  exclude: true
})

Google: News, Image and Video

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'
    }
  }]
});

Splitting Sitemaps

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
}

Caching

you have two ways to cache the sitemap, the first one is using the Cache-Control header

This is only available in runtime generation

createSitemapGenerator({
siteUrl: 'https://example.com',
headers: {
'Cache-Control': 'max-age=3600'
}
})

and the second one is using the cache property in the config

createSitemapGenerator({
siteUrl: 'https://example.com',
cache: {
get: async () => {
return await redis.get('sitemap') || null;
},
set: async (sitemap) => {
await redis.set('sitemap', sitemap, 'EX', 3600);
}
}
})

📖 API Reference

Config

Runtime only

Build Time only

RobotsTxtOptions

👤 Author

Fedeya hello@fedeminaya.com

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

Acknowledgements