Dynamic sitemaps in NuxtJS

NUXT SSR

Sitemaps are a very important tool for SEO now. They help search engines direct their crawlers to the pages you want. Google defines sitemaps as below in their documentation.

“A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Search engines like Google read this file to crawl your site more efficiently.”

So now that we understand the importance of sitemaps, how can we implement them in our dynamic site? Let’s say you have a blogging site. You probably have an API or some kind of CMS that you use to fetch the blogs. After getting your data you will render it in your template. These pages are dynamically rendered and are built when a user visits them. This scenario works for most modern web frameworks now. With this approach comes the problem of how can I dynamically generate a sitemap for all my blog pages?

I built my site using NuxtJS in SSR mode. My solution when I faced this problem was NuxtJS server-side middleware. To use server middlewares in NuxtJS we create a serverMiddleware directory in the root of the project. After this, we create a sitemap directory to include all of the files needed for our sitemap middleware.

The first file in our sitemap directory is going to be index.js. This file is a basic express app initialization and bootstrapping.

In line 4 you can see I imported a routes.js file that will handle the routing of this express app.

So what this router does is, capture sitemap.xml and sitemap/blogs.xml and generate the sitemaps accordingly. For sitemap.xml we have two static pages that we want to index so we add those to the sitemapIndex. sitemap/blogs.xml is where the dynamic pages come in. I have an API where I fetch all blogs. After I get the blogs I loop all blogs and I build my sitemapIndex using the blogs slug and createdAt date. After building the sitemapIndex the next step is parsing this index into a proper XML format that GoogleBot recognizes.

So in parser.js I set up an XML from the loc, lastmod, and priority properties of the sitemapIndex. Now that we have our sitemap ready we have to include our server middleware in our nuxt config.

nuxt.config.js
serverMiddleware: [
'~/serverMiddleware/sitemap']

And now we have a dynamic sitemap that changes whenever we add a new blog or delete it. We can now submit this sitemap in our google search console for google to discover our pages.

Disclaimer: You have to host your site in hosting services that support server-side rendering with NodeJS servers like Vercel for this to work.

Let me know if you have any questions or comments and see you in the next one. 😉

--

--

--

A web and app developer based in Addis Ababa, Ethiopia. I work with technologies like VueJs, Laravel, and ExpressJs. Website: https://abdulazizy.tech/

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What Makes ReactJS So Awesome?

(4) An easy framework for thinking in Redux (and setting up for Redux Thunk)

Importing All Images in Javascript for ReactJS

React Continuous Deployments with AWS CodePipeline

Utils are a blackhole

6 open source repos to develop easily installable JSX components

If you can get with… this … I can get with constructor functions

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abdulaziz Yesuf

Abdulaziz Yesuf

A web and app developer based in Addis Ababa, Ethiopia. I work with technologies like VueJs, Laravel, and ExpressJs. Website: https://abdulazizy.tech/

More from Medium

100% FREE : Built Your Own Blender Render Farm with Google Colab

Premiere Pro and Media Encoder Integration | Adobe Bridge Tutorial

Decompiling and repacking Electron Apps

Introducing Atomcal bots