(Astro) Create sitemap.xml Manually

A Sitemap assists search engines in easily crawling a website by designating its pages.

Astro provides a handy plugin @astrojs/sitemap to generate your sitemap.
However, you may not want a Sitemap Index (a sitemap that lists sub-sitemaps) created by @astrojs/sitemap, or you may want to handle the sitemap yourself.

In this post, I will explain how to create a direct sitemap in Astro.

Responding /sitemap.xml

In Astro, you can respond in XML format using a Response object as follows.

pages/sitemap.xml.ts

export async function GET() {
  let result = '';

  return new Response(result, {
    headers: {
      'Content-Type': 'application/xml',
    },
  });
}
ts

How to write a sitemap

Now all you need to do is write the content of the sitemap.
The most basic sitemap markup format is as follows. It’s quite intuitive, isn’t it?

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
      <loc>https://bepyan.me/</loc>
  </url>
</urlset>
xml

All blog post links should also be entered in this format.
Here, you can add the <lastmode> tag to allow the bot to prioritize the crawling of changed pages.

pages/sitemap.xml.ts

import { getCollection } from 'astro:content';

export async function GET() {
  const siteUrl = import.meta.env.SITE;
  const posts = await getCollection('post');

  const result = `  
<?xml version="1.0" encoding="UTF-8"?>  
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">  
  <url><loc>${siteUrl}/</loc></url>  
  <url><loc>${siteUrl}/posts/</loc></url>  
  ${posts
    .map((post) => {
      const lastMod = (post.data.updatedDate ?? post.data.date).toISOString();
      return `<url><loc>${siteUrl}${post.slug}/</loc><lastmod>${lastMod}</lastmod></url>`;
    })
    .join('\n')}  
</urlset>  
  `.trim();

  return new Response(result, {
    headers: {
      'Content-Type': 'application/xml',
    },
  });
}
ts

What is good to apply additionally

You can add related meta information to the site so that the crawler can easily detect the sitemap.

src/layouts/Layout.astro

<head>
  <link rel="sitemap" href="/sitemap.xml" />
</head>
html

public/robots.txt

User-agent: *
Allow: /
Sitemap: https://bepyan.me/sitemap.xml
txt

In Conclusion

After the work, access the http://localhost:4321/sitemap.xml path and check if the browser displays XML as shown in the image below.

If you want to know more about sitemaps, please refer to the link below.
https://support.google.com/webmasters/answer/7451001