Sitemaps are a great way of helping search engines understand your website. While modern search engines primarily rely on links to create their search indexes, this can leave lesser-known sites at a disadvantage due to a lack of external backlinks.
Search engines will look for a sitemap.xml file at the root directory of your website, and if it exists, it will parse that file to find any links it did not previously index.
When generating a sitemap, you should be following the schema defined on http://sitemaps.org.
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.example.org/path</loc>
</url>
</urlset>
Many of the JAMstack frameworks have plugins that can generate a sitemap for you. Still, if the framework you chose doesn't have one, or if you'd prefer to minimize dependencies, it's easy to create a sitemap after running your workflow's site generation step. I'll use Nuxt in this example, but the code can be easily modified to fit your stack.
Nuxt creates a dist folder on static site generation, with .html files for each route within the website. Knowing this, I can write a script that will search that directory for HTML files and generate XML nodes for each unique page.
const fs = require('fs')
const { resolve } = require('path')
const glob = require('glob')
const sitemap = resolve(__dirname, 'dist', 'sitemap.xml')
const nodes = [
'<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">'
]
glob('dist/**/index.html', (err, files) => {
if (err) { throw err }
files.forEach((f) => {
nodes.push(`<url><loc>https://jessie.codes${f.replace('dist', '').replace('index.html', '')}</loc></url>`)
})
nodes.push('</urlset>')
fs.writeFile(sitemap, nodes.join(''), (err) => {
if (err) { throw err }
})
})
Since I built my site using JavaScript, I can use npm's ability to create a post hook that will run after the generate script. Every time a new page is added, the sitemap will automatically be updated, allowing search engines to update their index for my website even if no external backlinks exist.
{
"scripts": {
"generate": "nuxt generate",
"postgenerate": "node ./sitemap.js"
}
}
Originally published on jessie.codes