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

```js 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.