react-static-plugin-sitemap
A React-Static plugin for exporting sitemap information.
Installation
In an existing react-static site run:
$ yarn add react-static-plugin-sitemap
Then add the plugin to your static.config.js
:
export default {
plugins: ['react-static-plugin-sitemap'],
}
Usage
-
A config.siteRoot
is required for this plugin to work properly, since sitemap's are required to use full
-
Each route in your site will createt a <url>
item in the sitemap
-
By default, the url's <loc>
tag will be set to the prefixed path of each route.
-
All property/value pairs under a route's sitemap
object will be used as xml tags for that route, eg.
export default {
siteRoot: 'https://hello.com'
}
const routes = [
{
path: '/blog/post/1',
sitemap: {
hreflang: [
{language:'x-default', url: '/blog/post/1'},
{language:'en', url: '/blog/post/1'},
{language:'de-DE', url: '/de/blog/post/1'},
],
lastmod: '10/10/2010',
priority: 0.5,
'image:image': {
'image:loc': `https://raw.githubusercontent.com/react-static/react-static/master/media/react-static-logo-2x.png`,
'image:caption': 'React Static',
},
},
},
{
path: '/blog/draft/2',
sitemap: {
noindex: true
},
},
]
Would result in the following XML:
<?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" xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://hello.com/blog/post/1/</loc>
<lastmod>10/10/2010</lastmod>
<priority>0.5</priority>
<image:image>
<image:loc>https://raw.githubusercontent.com/react-static/react-static/master/media/react-static-logo-2x.png</image:loc>
<image:caption>React Static</image:caption>
</image:image>
<xhtml:link rel="alternate" hreflang="x-default" href="https://hello.com/blog/post/1/" />
<xhtml:link rel="alternate" hreflang="en" href="https://hello.com/blog/post/1/" />
<xhtml:link rel="alternate" hreflang="de-DE" href="https://hello.com/de/blog/post/1/" />
</url>
</urlset>
With Options
export default {
plugins: [
[
'react-static-plugin-sitemap',
{
getAttributes: route => ({
customXmlAttribute: route.customProperty,
}),
},
],
],
}