Web development and Tech news Blog site. WEBISFREE.com

HOME > nuxtjs

[nuxtjs] How to Easily and Quickly Create a Sitemap Using @nuxtjs/sitemap

Last Modified : 12 Oct, 2023 / Created : 12 Oct, 2023
236
View Count
There are instances where you need to create a sitemap for SEO. There are various methods to create a sitemap, but doing it manually can be time-consuming and require much effort. In such cases, you can easily create a sitemap using the @nuxtjs/sitemap module available in nuxtjs.

Let's take a closer look below.




Why is a Sitemap Necessary?
Creating and submitting a sitemap to search engines can enhance indexing and potentially increase traffic. Additionally, it can enable search engines to crawl your web pages more quickly and regularly. This can also lead to an increase in visitors.



Using @nuxtjs/sitemap


As mentioned earlier, if you are using the nuxtjs framework, sitemap creation is much easier. The @nuxtjs/sitemap module, when configured in a Nuxt.js application, enables the automatic creation of desired pages quickly and easily.


Installing @nuxtjs/sitemap


Next is the installation method. First, you must install the @nuxtjs/sitemap module via NPM or Yarn.
npm install @nuxtjs/sitemap

// or

yarn add @nuxtjs/sitemap

After installation, add @nuxtjs/sitemap to the modules in the nuxt.config.js file and configure it.

@ nuxt.config.js
export default {
  modules: [
    ...,
    '@nuxtjs/sitemap'
  ],
}

Now you need to configure for using the sitemap. Add the sitemap block to the nuxt.config.js file as follows.
sitemap: {
  path: '/sitemap.xml',
  hostname: 'https://mywebsite.com',
  cacheTime: 1000 * 60 * 15,
  gzip: true,
  generate: false, // Activate this what if using nuxt generate
  exclude: [
    '/secret',
    '/admin/**'
  ],
  routes: async () => {
    const routes = [] // Creation dynamic routes
    return routes
  }
}


Here's a brief explanation of the options used.

  • path: The path where the sitemap will be located, commonly used as /sitemap.xml
  • hostname: The main hostname of the application
  • cacheTime: Cache time of the sitemap (in milliseconds)
  • gzip: Whether to enable sitemap compression
  • generate: Whether to generate the sitemap when using nuxt generate to build the project
  • exclude: An array of routes to exclude from the sitemap (routes that are unnecessary for indexing)
  • routes: A function returning an array of routes (can be used to add dynamic routes)

One of the most important parts of the above options is creating dynamic routes. Let’s explore the method of creating dynamic routes further below.


Creating Dynamic Routes


Generally, one of the biggest advantages of @nuxtjs/sitemap is the ability to create dynamic routes. For instance, if there are 2000 posts stored, you can dynamically add and create them all at once.
// Creation dynamic routes with api call with axios
routes: async () => {
  const { data } = await axios.get('https://api.yourwebsite.com/posts');
  return data.map(post => `/blog/${post.slug}`);
}

Now all steps are completed. As created above, accessing https://mywebsite.com/sitemap.xml will display the sitemap.

Until here, we have looked at a way to easily create a sitemap in nuxtjs.
Perhaps you're looking for the following text as well?

    Previous

    How to change the query string using useRouter in NuxtJS