Estructura de un sitemap
El sitemap es un archivo xml que contiene listas de enlaces de todos los sitios webs de un dominio. Estos contienen la URL de estas páginas para que los rastreadores web puedan encontrarlas por ejemplo DuckDuckGo, Google, Yahoo, etc.
Estructura de un sitio web y su sitemap
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.yourdomain.com/</loc>
<lastmod>2025-09-02</lastmod>
</url>
</urlset>En la estructura del sitemap cada URL debe ir dentro de la etiqueta <url>, donde definimos la URL de la pagina es en la etiqueta <loc> y en <lastmod> la ultima actualización que se le hizo a la pagina.
Generar sitemap en Astro
Para generar nuestro sitemap en Astro de forma manual debemos crear un archivo llamado sitemap.xml.ts o sitemap.xml.js y exportar una función GET de la siguiente manera:
export async function GET() {
const siteUrl = import.meta.env.SITE;
const result = `
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>${siteUrl}/</loc>
</url>
</urlset>
`.trim();
return new Response(result, {
headers: {
"Content-Type": "application/xml",
},
});
}También es importante recordar que Astro cuenta con la integración @astrojs/ sitemap que genera el sitemap automáticamente, la generación del sitemap de forma manual solo es necesario cuando hay paginas SSR y por lo tanto necesitamos generar nuestro propio sitemap.
Y muy importante agregar el siguiente link al head de todas nuestra paginas, este dice en que ruta estará nuestro sitemap.xml:
<link rel="sitemap" href="/sitemap.xml" />Ahora veamos un ejemplo mas practico, construiremos el sitemap agregando las paginas de los artículos publicados de un blog.
import { getPosts } from "@/lib/posts";
export async function GET() {
const siteUrl = import.meta.env.SITE;
const posts = await getPosts();
const result = `
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>${siteUrl}/</loc>
</url>
${posts
.map((post) => {
const lastMod = post.updatedAt ?? post.createdAt;
return `<url>
<loc>${siteUrl}/blog/${post.slug}/</loc>
<lastmod>${lastMod}</lastmod>
</url>`;
})
.join("\n")}
</urlset>
`.trim();
return new Response(result, {
headers: {
"Content-Type": "application/xml",
},
});
}El código anterior generará algo parecido a esto:
Ejemplo de un sitemap