Dynamically Driven - Generating Sitemap and Feed XML for Your Nuxt.js Website

June 16, 2022 Dykraf

How to create a dynamic XML sitemap and feed files for your NuxtJS Website for a better SEO performance support

Web Story

Setup NuxtJS project and node modules

NuxtJS modules provide a bunch of utilities for developers to use right in their web development projects. Some of them are Sitemap and Feed modules which I use in some of my projects.

Node modules for Sitemap and Feed

The required node module packages to add to your project are @nuxtjs/sitemap and @nuxtjs/feed. From the terminal, you could just type yarn add @nuxtjs/sitemap @nuxtjs/feed, and will be added to your node_modules immediately.

Write functions for all the XMLs static generation files

Next, write a utility helpers library for functions just like the one that will be used in this post to get any NuxtJS Dynamic routes in the project. These functions will be called on the nuxt.config.js file to generate the available Dynamic Routes that will be translated into .xml files.

./utils/routing.js

const CONSTANTS = require('../config/constants')
const UTILS = require('../utils/index')
const { BASE_URL, NAME, TITLE } = CONSTANTS

module.exports = {
  createRoutes: async () => {
    const routes = []
    const authors = []
    let posts = []
    let tags = []

    const { $content } = require('@nuxt/content')

    /* Posts */
    if (posts === null || posts.length === 0) {
      posts = await $content('blogs').without(['body']).fetch()
    }

    /* Post Tags */
    if (tags === null || tags.length === 0) {
      tags = await $content('tags').fetch()
    }

    /* Posts */
    for (const post of posts) {
      authors.push(post.author.name)
      routes.push(`/blog/${post.slug}`)
    }

    /* Posts Authors */
    for (const author of authors.filter(function (item, index, inputArray) {
      return inputArray.indexOf(item) === index
    })) {
      routes.push(`/blog/author/${author}`)
    }

    /* Post Tags */
    for (const tag of tags) {
      routes.push(`/blog/tag/${tag.name.replace(' ', '_')}`)
    }

    /* Monthly Archived */
    for (const month of UTILS.yearMonthNameSlug()) {
      routes.push(`/archive/${month.slug}`)
    }

    return routes.sort()
  },
  createFeeds: () => {
    const baseUrlArticles = `${BASE_URL}/blog`
    const baseLinkFeedArticles = ''

    const feedFormats = {
      rss: { type: 'rss2', file: 'feed.xml' },
      json: { type: 'json1', file: 'feed.json' }
    }

    const createFeedArticles = async function (feed) {
      feed.options = {
        title: 'Dykraf.com',
        description: TITLE,
        link: baseUrlArticles,
        webMaster: NAME,
        managingEditor: NAME,
        copyright: '2021'
      }

      const { $content } = require('@nuxt/content')
      const blogs = await $content('blogs').without(['body']).fetch()

      blogs.forEach((blog) => {
        const url = `${baseUrlArticles}/${blog.slug}`

        feed.addItem({
          title: blog.title,
          id: `${blog.createdAt}-${blog.slug}-${blog.author.name}`,
          link: url,
          date: new Date(blog.createdAt),
          description: blog.description
        })
      })
    }

    return Object.values(feedFormats).map(({ file, type }) => ({
      path: `${baseLinkFeedArticles}/${file}`,
      type,
      create: createFeedArticles
    }))
  }
}

NuxtJS config default setup and include the feed XML generator

From the NuxtJS nuxt.config.js file, I am including the Dynamic Routes from the node modules packages I had installed earlier.

./nuxt.config.js

import { createRoutes, createFeeds } from './utils/routing'

export default {
  /*
   ** Nuxt target
   ** See https://nuxtjs.org/api/configuration-target
   */
  target: 'static',
  generate: {
    routes: createRoutes,
    fallback: true
  },
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://github.com/nuxt-community/feed-module
    '@nuxtjs/feed',
    // Doc: https://github.com/nuxt/content
    '@nuxt/content',
    // Doc: https://sitemap.nuxtjs.org/guide/setup
    '@nuxtjs/sitemap'
  ],
  /* Feed module */
  feed: createFeeds,
  /* Sitemap module */
  sitemap: {
    hostname: BASE_URL,
    gzip: true,
    routes: createRoutes,
    defaults: {
      changefreq: 'daily',
      priority: 1,
      lastmod: new Date()
    }
  }
}

NuxtJS Dynamic Sitemap

NuxtJS Dynamic Feed

From this set up you could access the NuxtJS Dynamic Sitemap and Feed from http://localhost:3000/sitemap.xml and http://localhost:3000/feed.xml.

Test the feed on Feed reader from Chrome

If you open up the URL http://localhost:3000/feed.xml from the chrome browser, it will automatically detect the feed and prompt you to follow and subscribe to the feeds. That's it! If Every time the website has new content, it will automatically notify you via chrome notification.

NuxtJS Dynamic Feed on Chrome Browser

Add other features to support Website SEO

You can add other features to your Nuxt.js website such as AMP module that integrate well enough into your current project and boost your website SEO.

If you already implement the SEO on-page lists and AMP in your website. You will have the lists of JSON Schemas and other SEO enhancements including Sitemap and Feed that you already implement also consider valid by the Google search engine console.

Enhancement Analytic in Google Search Console

There is an AMP Web Stories feature to support you with excellent feeds with animation and other media supports. Nuxt.js already supports this AMP web stories feature. This will impact your website to be on discover and featured on the Google search engine. Hey, even this website has an AMP page with AMP Web Stories version.

Here is a sample of AMP Stories impressions and clicks in Google Search Console. Story Discover Analytic in Google Search Console

Publish your Website

There are several ways to publish and deploy your website, you could use any hosting service provider or use free static website hosting like Vercel and Netlify.

I have been using these hosting service provider for quite some time for publish several of my web projects. As a web developer, these hosting providers have been extremely helpful in terms of hosting my static websites.

Thank you for reading this post, hope this will inspire you.

Topics

Recent Blog List Content:

Archive