Nuxt sitemap adds unwanted spaces in the tags URL during the dynamic sitemap.xml generatation for Nuxt content website

[Aravinda93]

Details

I have a Nuxt content based application for which I have added the Nuxt sitemap dependency. Everything works fine and can generate the sitemap.xml file during the npm run generate or nuxt generate command. But facing a small issue when generating the URLs for the tags in the .md markdown files in /content/index.md files.

I have also created the sample project on CodeSandBox for the reproduction. As you can observe in the Sitemap.xml there are various URLs with spaces after localhost:3000/tags. How to fix this?

I have a few tags in my .md files; if the tags have spaces, then the spaces are retained in the generated URL within the sitemap.xml file. Can you please let me know how to fix this?

I have a Nuxt content website with some of the markdown files in /content/index.md with tags such as:

  navigation:
  linkTitle: "Introduction"
  tags : ["Testing tools", "performance tests", "process automation", "supply chain management", "load tests"]
    

I am generating the sitemap.xml using the nuxtjs/sitemap with ssr:true. During the generation of the sitemap it generates the URL with spaces http://localhost:3000/tags/performance tests. Since it generates the URL with spaces they are invalid but URLs are valid when I navigate to them then they are present with spaces:

 <url>
    <loc>http://localhost:3000/tags/performance tests</loc>
    <xhtml:link rel="alternate" href="http://localhost:3000/tags/performance tests" hreflang="x-default" />
    <xhtml:link rel="alternate" href="http://localhost:3000/tags/performance tests" hreflang="en" />
</url>

How to ensure the sitemap adds appropriate spaces and checks for valid URLs before generating the sitemap.xml using Nuxt Sitemap and replacing the spaces with URL-safe characters.

http://localhost:3000/tags/performance%20tests

Following is my complete nuxt.config.js file for the project:

Complete nuxt.config.js file

export default {
  modules: [
    "@nuxtjs/tailwindcss",
    "unplugin-fonts/nuxt",
    "@nuxtjs/i18n",
    "@nuxtjs/color-mode",
    "@nuxt/image",
    "@nuxt/content",
    "@nuxtjs/sitemap",
  ],

  site: {
    url: process.env.NUXT_PUBLIC_SITE_URL || 'http://localhost:3000/',
    name: "Test Application"
  },

  compatibilityDate: "2024-07-10",


  //To support and display the .md files from /content using @nuxt/content
  content: {
    // To highlight the code sections using the theme
    highlight: {
      theme: {
        default: "aurora-x",
        dark: "everforest-dark",
        sepia: "monokai",
      },
      langs: ["json", "xml", "java", "shell"],
    },
    
    markdown: {
      remarkPlugins: ["remark-reading-time"], //To get the reading time for each .md file in /content
      anchorLinks: false, // Do not underline and highlight the h2, h3, h4 etc
    }
  },

  ssr: true,

  app: {
    head: {
      link: [
        {
          rel: "icon",
          type: "image/x-icon",
          href: `/img/favicon.ico`,
        },
      ],
    },
  },

  buildModules: [
    {
      vue: {
        config: {
          assetDirs: ["assets", "public"],
        },
      },
    },
  ],

  runtimeConfig: {
    apiSecret: "123",
    public: {},
  },

  components: [
    {
      path: "~/components",
      pathPrefix: false,
    },
  ],

  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },

  i18n: {
    locales: [
      {
        code: "en",
        files: ["en.json", "en-extended.json"],
      },
    ],
    lazy: true,
    langDir: "./locales",
    defaultLocale: "en",
  },
};

How to avoid adding spaces during the URL creation for the tags? Is there a way to replace the spaces?

[harlan-zw]

This is fixed in v6.0.0 of the sitemap module, I'll release a bump to Nuxt SEO soon which will include this version.

[Aravinda93]

@harlan-zw Thanks a lot. I used the v6.0.0; it's working fine and replacing the tags link with %20.

But I want to know if I want to replace them with my custom characters like - or _. Can we customize the tag's URL in the sitemap.xml file generation during the nuxt generate or npm run generate?

[harlan-zw]

You should just name the markdown files using these characters or use the frontmatter to configure.

---
sitemap:
  loc: /whatever/you/want
---

This is mostly a non-concern for the module though.

[Aravinda93]

@harlan-zw

Thanks a lot for the quick response. I am not adding anything under the sitemap for my markdown or .md files. I have the tags under the navigation of the files and the sitemap is automatically picking the things. Following is my example index.md file:

---
title: "Docs Start"
description: Startomg the Docs Description
navigation:
    linkTitle: "Introduction"
    tags : ["event hash", "Testing tools", "Hill side", "carrot brush", "typesetting industry", "generator tool"]
head:
  meta:
    - name: 'keywords'
      content: 'event hash, Testing tools, Hill side, carrot brush, typesetting industry, generator tool'
sitemap:
  loc: /introduction
  lastmod: 2024-08-30
  changefreq: quaterly
  priority: 0.9
---

@harlan-zw
Based on your recent fix the tags URL spaces are replaced by the %20 automatically. So I want to know if I can replace it with my custom character. As you mentioned one quick fix would be to replace the spaces in my .md files tags with - like event-hash, Testing-tools, etc. But is there some way I can customize during the nuxt generate by intercepting thetags URL generation?

[Aravinda93]

@harlan-zw

I have created a small reproducible project on CodeSandbox for your reference.

[harlan-zw]

Sorry, but this is not related to the sitemap module so I don't have capacity to help you debug this further.

You should modify your navigation code to transform the string slug however you like.