How to generate sitemap with qwik js (static and dynamic)

Last updated : 2023-10-27

An XML sitemap is a file that lists all the important content on your website, such as pages, files, and images. An XML sitemap helps search engines like Google to crawl and index your website more efficiently.

In this post, you will learn how to create an XML sitemap for your website built with Qwik.js, a JavaScript framework that allows you to create modern and fast web applications.

1. Generating an XML sitemap in Qwik (at compile time)

Thanks to Qwik's Static site adapter, you can generate static sites using this framework. If you are using this adapter, when you build the project, an sitemap.xml file will automatically be generated in the root directory, containing all the static routes you have predefined.

How do I add non-static pages to the sitemap?

If you have routes that won't be generated statically at compile time (SSG), they won't be added to your sitemap.xml file. I'll explain below how to generate dynamic sitemaps in Qwik.

2. Sitemap XML in Qwik (Dynamically on the Server (SSR))

By default, Qwik uses server-side rendering for rendering all the pages of a website. In these cases, the sitemap should be generated dynamically when the sitemap route is requested.

Fortunately, achieving this with Qwik is straightforward:

Create a route for the sitemap and add an index.tsx file.

txt

src
  routes
    sitemap-0.xml // The folder should end with .xml
      index.tsx

Code to generate the XML sitemap with Qwik.

tsx

import { type RequestHandler } from "@builder.io/qwik-city";
import { BASE_URL } from "~/helpers/consts";

export const onRequest: RequestHandler = async (requesEvent): Promise<any> => {
  // It is assumed that prisma is a previously configured and connected Prisma object to a database.

  const posts = await prisma.post.findMany();
  
 // Next, an XML document representing a sitemap for search engines is generated.

  const content = `
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  ${posts.map(
    (post) => `<url>
  <loc>${BASE_URL}${post.slug}</loc>
  <lastmod>${post.last_publication_date}</lastmod>
  <priority>0.7</priority>
  </url>`
  )}
</urlset>
`;
  // An HTTP response with the XML content of the sitemap is created.
  const response = new Response(content, {
    status: 200,
    headers: {
      "Content-Type": "application/xml",
      "xml-version": "1.0",
      encoding: "UTF-8",
    },
  });
  
 // Here, we send the response.
  return requesEvent.send(response);
};

The code imports the RequestHandler and BASE_URL modules from their respective packages. RequestHandler is an interface used to handle HTTP requests in the context of a web application created with Qwik, and BASE_URL is a constant that stores the base URL for constructing sitemap URLs.
The onRequest function is a request handler (middleware) provided by Qwik. This function will execute when an HTTP request is made to the route. The requestEvent parameter represents the incoming request.
The posts variable is populated with a set of post data retrieved from the database using Prisma. This assumes that prisma is a previously configured and connected Prisma instance to a database.
Next, an XML document representing a sitemap is generated. In this case, the sitemap contains a list of post URLs, each with the URL, last modification date, and priority.
An HTTP response is created using the Response class. The sitemap content is set as the response body. Additionally, an HTTP status of 200 (OK) is set, and headers indicating that the content is in XML format are defined.
Finally, the response is sent back to the client who made the request using requestEvent.send(response).

Once you have created your XML sitemap, you can submit it to Google for consideration when crawling and indexing your website.

Date Error in Search Console

If when submitting the sitemap in Google Search Console, you receive an error related to the date format of each URL, what you need to do is convert the string into a YYYY-MM-DD format.

Thank you for reading.

Creating an XML sitemap for your Qwik-built website is relatively straightforward. An XML sitemap helps improve the visibility and ranking of your website on search engines like Google.

I hope this article has been helpful to you. If you liked it, please share it, or reach out to me on Twitter with your questions or suggestions.

Juneiker Castillo freelance web developer

I am Juneiker Castillo, a passionate front-end web developer deeply in love with programming and creating fast, scalable, and modern websites—a JavaScript enthusiast and a React.js lover ⚛️.

About me