The Sitemap

Et XML-sitemap hjælper google eller andre søgemaskiner, med at crawle din hjemmeside hurtigt og gøre den synlig for dine fremtidige brugere.

Hvad viser et XML-sitemap?

Ligesom et RSS-feed Et sitemap viser en hjemmesides vigtigste sider og undersider.

Et XML-sitemap viser en hjemmesides vigtigste sider, hvilket sikrer, at søgemaskiner kan finde og crawle dem. Sitemaps hjælper også med at forstå din hjemmesidestruktur, hvilket gør det nemmere at navigere på dit websted. Det bruges af Googlebot, BingBot, DuckDuckBot og andre søgemaskiner til at fortælle dem, hvilke sider der er tilgængelige.

HTML sitemap.

Et HTML-sitemap betjener besøgende på webstedet. Sitemaps inkluderer hver side på hjemmesiden – fra hovedsiderne til lavere niveausider og kan opfattes som en velorganiseret indholdsfortegnelse.

Sådan opretter du et.

I sitemap.xml.js skal vi udfylde XML’en med dynamiske data. Vi vil bruge links fra vores ruter. For at opnå det skal vi lave en API, der får ruterne. get() funktion, som returnerer ruterne.

The API:

Opret en get-posts.js fil i mappen lib

get-posts.js

Udfyld den med disse data:

Husk at ændre stien til den korrekte placering, hvor dine indlæg er placeret.

export async function getPosts() {
	const posts = await Object.entries(import.meta.globEager('/blog/**/*.md'))
		// get post metadata
		.map(([, post]) => post.metadata)
		// sort by date
		.sort((a, b) => (a.date < b.date ? 1 : -1));

	return posts;
}

Opret sitemap-filen

Tilføj en ny fil i ruter, og navngiv den sitemap.xml.js

sitemap.xml.js

I sitemap.xml.js importerer du API’en og giv webstedsvariablen en værdi:

import { getPosts } from '$lib/get-posts';
export const website = 'https://lazydev.online';

Så skal vi udfylde XML med dynamiske data. Vi vil bruge links fra vores ruter. For at opnå det skal vi oprette en get() funktion, som returnerer ruterne.

import { getPosts } from '$lib/get-posts';
export const website = 'https://lazydev.online';

export async function get() {
	const posts = await getPosts();
	const body = posts;

	return {
		body
	};
}

Nu får vi ikke /about og /kontakt siderne. Lad os tilføje /about og /contact, - ‘home’ som i /-ruten, vi tilføjer senere.

Disse kan også importeres som objekter fra en konfigurationsfil

For nemheds skyld hardkoder vi dem:

import { getPosts } from '$lib/get-posts';
export const website = 'https://lazydev.online';

export async function get() {
	const posts = await getPosts();
	const pages = [`about`, `contact`];
	const body = posts;

	return {
		body
	};
}

Tilføjelse af http-headerne.

Da vi ønsker at undgå 404 og få et output, når vi går til localhost:3000/rss.xml, skal vi tilføje to http-headere:

Cache-Control-headeren og Content-Type-headeren.

The Cache-Control Header:

En cache-kontrol-header er en HTTP-header, der bruges til at specificere browser-caching-politikker i både klientanmodninger og serversvar. Politikker inkluderer, hvordan en ressource cachelagres, hvor den er cachelagret og dens maksimale alder inden udløb.

Indstil udløbstiden med s-maxage Her er den sat til en time:

const headers = {
	'Cache-Control': 'max-age=0, s-maxage=3600'
};

return {
	headers
};

The Content-Type Header:

Vi vil gerne fortælle browseren, at vi leverer vores sitemap i xml.

Det gør vi ved at tilføje: application/xml til Content-Type-headeren:

Ligesom:

const headers = {
	'Content-Type': 'application/xml'
};

return {
	headers
};

Headeren skulle nu se sådan ud:

const headers = {
	'Cache-Control': 'max-age=0, s-maxage=3600',
	'Content-Type': 'application/xml'
};
return {
	headers
};

Sådan her:

import { getPosts } from '$lib/get-posts';
export const website = 'https://lazydev.online';

export async function get() {
	const posts = await getPosts();
	const pages = [`blog`, `about`, `contact`];
	const body = posts;

	const headers = {
		'Cache-Control': 'max-age=0, s-maxage=3600',
		'Content-Type': 'application/xml'
	};
	return {
		headers,
		body
	};
}

Tilføj derefter xml sitemap-strukturen efter get-funktionen:

const sitemap = (posts, pages) => `<?xml version="1.0" encoding="UTF-8" ?>
<urlset
  xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
  xmlns:xhtml="https://www.w3.org/1999/xhtml"
  xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
  xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
  xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
>
  <url>
    <loc>${website}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  ${pages
		.map(
			(page) => `
  <url>
    <loc>${website}/${page}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  `
		)
		.join('')}
  ${posts
		.map((post) =>
			post.isPrivate
				? null
				: `
  <url>
    <loc>${website}/posts/${post.slug}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  `
		)
		.join('')}
</urlset>`;

I sitemap.xml.js:

sitemap.xml.js

Og tilføj det i get-funktionen ved at ændre const body = posts; til const body = sitemap(indlæg, sider);

import { getPosts } from '$lib/get-posts';
export const website = 'https://lazydev.online';

export async function get() {
	const posts = await getPosts();
	const pages = [`blog`, `about`, `contact`];
	const body = sitemap(posts, pages);

	const headers = {
		'Cache-Control': 'max-age=0, s-maxage=3600',
		'Content-Type': 'application/xml'
	};
	return {
		headers,
		body
	};
}

Det endelige resultat skulle se sådan ud:

import { getPosts } from '$lib/get-posts';
export const website = 'https://lazydev.online';

export async function get() {
	const posts = await getPosts();
	const pages = [`about`, `newsletter`, `privacy-policy`];
	const body = sitemap(posts, pages);

	const headers = {
		'Cache-Control': 'max-age=0, s-maxage=3600',
		'Content-Type': 'application/xml'
	};
	return {
		headers,
		body
	};
}

const sitemap = (posts, pages) => `<?xml version="1.0" encoding="UTF-8" ?>
<urlset
  xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
  xmlns:xhtml="https://www.w3.org/1999/xhtml"
  xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
  xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
  xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
>
  <url>
    <loc>${website}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  ${pages
		.map(
			(page) => `
  <url>
    <loc>${website}/${page}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  `
		)
		.join('')}
  ${posts
		.map((post) =>
			post.isPrivate
				? null
				: `
  <url>
    <loc>${website}/posts/${post.slug}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  `
		)
		.join('')}
</urlset>`;

Tjek det ud ved at gå til localhost:3000/sitemap.xml

Voila