Improving the SEO of a NuxtJs site using the Site Map Module

Introduction

If you’re not too familiar with NuxtJs, it’s a new framework or abstraction that sits on top of VueJs to make it super easy to build static or SSR sites. The framework has been gaining a lot of traction and just recently had a 1.0.0-rc3 release. I have been using the framework for the vuejsradar.com and slowly testing and adding in new features as they come in. A great part about NuxtJs is the module system which allows 3rd party libraries to be hooked in easily to extend the default feature set.

Up until this post, one feature I have been needing is a way to generate sitemaps to register with google webmaster tools. Fortunately, thanks to the hardwork of Pooya Parsa and Nico Pennec we now have an official @nuxtjs/sitemap module.

In this post I’ll show you how I setup the sitemap module for this site. Of course defer to the readme from the repo if anything differs here.

Install the module

npm install @nuxtjs/sitemap

All NuxtJs modules are prefixed by @nuxtjs and live in the same repo

Add Module to Config

Edit nuxt.config.js

modules: [
  '@nuxtjs/sitemap'
]

Test your build

npm run dev

When I first tried out the sitemap module I kept getting errors at this point. Turns out that my version of node was incompatible and in despearate need of an update. If you do run into any issues here, you might want to look at doing the same.

Add URLs to sitemap

Adding your URLs to the sitemap is really easy, especially if the structure of your site is fairly basic as mine is.

For example, I essentially just copy the same values in the general routes attribute. Also, you can specify the path to the actual sitemap file that will be generated or served (depends on if your site is SSR or static). Notice below that we also set generate: false to test things out. This let us test the sitemap out but this will be true before deployment so the xml file is created.

['@nuxtjs/sitemap', {
  path: '/sitemap.xml',
  generate: false,
  routes: [
    '/static-vue-cms-part-1',
    '/static-vue-cms-part-2',
    '/static-vue-cms-part-3',
    '/intro-to-nuxt-js-modules',
    '/deploying-nuxt-to-netlify',
    '/seo-for-nuxt-meta-tags',
    '/tips-for-integrating-vuejs-to-legacy-site',
    '/tips-for-clean-vuejs-code',
    '/setting-up-sitemap-module-for-nuxtjs-seo'
  ]
}]

I recommend you preview the URL at this point, ensure it’s showing up properly like below.

At this point, if all is good you are set to go. Deploy your site and point google to your new sitemap.

Cleaning up routes for generated sites

One thing that is evident at this point is the redundancy of the routes array. I have the same set of values being used for the Nuxt.Js config and the module. It’s a simple fix for now, I define this at the top of the config file and reuse it.

const routes = [
  '/',
  '/static-vue-cms-part-1',
  '/static-vue-cms-part-2',
  '/static-vue-cms-part-3',
  '/intro-to-nuxt-js-modules',
  '/deploying-nuxt-to-netlify',
  '/seo-for-nuxt-meta-tags',
  '/tips-for-integrating-vuejs-to-legacy-site',
  '/tips-for-clean-vuejs-code',
  '/setting-up-sitemap-module-for-nuxtjs-seo'
]

module.exports = {
  generate: {
    routes: routes
  },
  modules: [
  ['@nuxtjs/sitemap', {
    path: '/sitemap.xml',
    generate: true,
    routes: routes
  }]
  ]
}

Configuring Routes Further

This is nice, but lets say you want to provide more details which help search engines index your site better? This is pretty easy, as the docs show you can do this by providing a set of attributes instead of a basic URL string.

 routes: [
    {
      url: '/page/2',
      changefreq: 'daily',
      priority: 1,
      lastmodISO: '2017-06-30T13:30:00.000Z'
    }
  ]

But if you’re doing what I’m doing, and sharing a shared routes array value you’ll have to be more creative. You could try something like this:

const routes = [
 ...
]

const siteMapRoutes => () {
 return routes.map((currRoute) => {
   return {
     {
       url: currRoute,
       changefreq: 'daily',
       priority: 1,
       lastmodISO: '2017-06-30T13:30:00.000Z'
     }      
   }
 }
}

A basic map function to inject some more specific sitemap details to each route. This assumes of course that all your pages have the same priority, change frequency etc. For the most part, all my pages are the same, but if you do need to configure each page differently than I would recommend another solution. Perhaps pulling this data from the vuex store would be more appropriate or wherever you define the actual post data.

Wrapping Up

That wraps up this short introduction to the @nuxtjs/sitemap module. I highly recommend using it if you run a NuxtJs site and want to get all your pages indexed properly.