:: Benjamin Geets

Créer un sitemap avec SvelteKit

Créer la route

Ajouter un fichier, dans votre dossier routes, 'sitemap.xml.js' (ou .ts). Cela va donc créer la route domain.com/sitemap.xml.

Préparer le endpoint

Dans SvelteKit, pour que votre point d'API fonctionne, vous devez créer une fonction correspondant à ce que vous voulez que le point fasse (get/post/...)

Donc :

export async function get() {

}

Maintenant, on va préparer le contenu de notre réponse pour qu'il soit bien compris. On indique dans notre return que la réponse sera du XML et que le body renverra notre variable sitemap.

J'y ai aussi ajouté les balises de base d'un fichier XML, au milieu duquel on va greffer les liens.

export async function get() {
    let sitemap = `<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">`
    //On ajoute les liens ici!
    sitemap = sitemap + "</urlset>"
    return {
        headers: {
            'content-type': "application/xml"
                },
        body: sitemap
    };
}

Ajouter le contenu

On n'a plus qu'à ajouter chaque lien au milieu du sitemap, chaque lien étant constitué de la sorte:

<url><loc>LIEN</loc></url>

Cette partie dépendra donc de ce que vous voulez ajouter à votre sitemap. Dans l'exemple, il s'agit du portfolio de Galand Tristan. J'ajoute donc l'index, le /a-propos, le /portfolio et je crée une boucle qui va ajouter un lien pour chaque élément de son portfolio (que je retrouve via mon API).

const DOMAIN = "https://galandtristan.be";

export async function get() {
    const res = await fetch(`${DOMAIN}/api/portfolio`)
    const data = await res.json()
    const portfolio = data.portfolio
    let sitemap = `<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">`
    sitemap = sitemap + `<url><loc>${DOMAIN}</loc></url>`
    sitemap = sitemap + `<url><loc>${DOMAIN}/portfolio</loc></url>`
    sitemap = sitemap + `<url><loc>${DOMAIN}/a-propos</loc></url>`
    await portfolio.forEach(project=>{
        sitemap = sitemap + `<url><loc>${DOMAIN}/portfolio/${project.slug}</loc></url>`
    })
    sitemap = sitemap + "</urlset>"
    return {
        headers: {
            'content-type': "application/xml"
                },
        body: sitemap
    };
}

Et voilà, votre sitemap.xml est fonctionnel.

sveltesveltekitjamstack