SvelteKitBonnes pratiques

Référencement

L’aspect le plus important du référencement (SEO] est la création de contenu de qualité largement cité par d’autres ressources sur le web. Toutefois, il y a quelques considérations techniques permettant de créer des sites qui performent bien à ce niveau.

Clé-en-main

SSR

Même si les moteurs de recherche se sont améliorés depuis quelques années dans l’indexation de contenu rendu avec du code JavaScript côté client, le contenu rendu sur le serveur est indexé plus souvent et plus efficacement. SvelteKit utilise le SSR par défaut, et bien que vous puissiez le désactiver dans le hook handle, vous devriez le laisser activé à moins que n’ayez une bonne raison de ne pas le faire.

Le rendu de SvelteKit est très configurable et vous pouvez implémenter du rendu dynamique si nécessaire. Ce n’est généralement pas recommandé, puisque le SSR offre d’autres avantages que le référencement.

Performance

Des indicateurs comme les Core Web Vitals impactent le classment d’une page par les moteurs de recherche. Puisque Svelte et SvelteKit introduisent une surcouche minimale, ils rendent plus simple de créer des sites de haute performance. Vous pouvez tester les performances de votre site en utilisant les outils de Google PageSpeed Insights ou Lighthouse. Utiliser simplement certaines fonctionnalités clé comme le mode de rendu hybride qu’utilise SvelteKit par défaut, ou encore l’otpimisation de vos images, vous pouvez améliorer significativement la rapidité de votre site. Lisez la page sur les performances pour plus de détails.

URLs normalisées

SvelteKit redirige les chemins ayant des trailing slashes vers des chemins n’en ayant pas (ou inversement selon votre configuration), car les URLs dupliquées détériorent le référencement.

Mise en place manuelle

<title> et <meta>

Chaque page devrait avoir des éléments <title> et <meta name="description"> uniques et bien écrits dans un élément <svelte:head>. Des conseils sur comment écrire des titres et descriptions pertinentes, en plus d’autres suggestions sur comment rendre votre contenu compréhensible par les moteurs de recherche, sont disponibles dans la documentation Lighthouse SEO audits.

Un usage commun est de renvoyer les data concernant le référencement depuis vos fonctions load, puis de les utiliser (en tant que page.data) dans l’élément <svelte:head> de votre layout racine.

Sitemaps

src/routes/sitemap.xml/+server

export async function GETfunction GET(): Promise<Response>() {
	return new Responsevar Response: new (body?: BodyInit | null, init?: ResponseInit) => ResponseThe Response interface of the Fetch API represents the response to a request.
MDN Reference
(
		`
		<?xml version="1.0" encoding="UTF-8" ?>
		<urlset
			xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
			xmlns:xhtml="http://www.w3.org/1999/xhtml"
			xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0"
			xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
			xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
			xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"
		>
			<!-- les éléments <url> se déclarent ici -->
		</urlset>`.trim(method) String.trim(): stringRemoves the leading and trailing white space and line terminator characters from a string.
(),
		{
			headers(property) ResponseInit.headers?: HeadersInit | undefined: {
				'Content-Type': 'application/xml'
			}
		}
	);
}

AMP

Une réalité malheureuse du développement web moderne est qu’il est quelques fois nécessaire de créer une version Accelerated Mobile Pages (AMP) de votre site. SvelteKit vous permet de le faire en définissant l’option inlineStyleThreshold...

svelte.config

/** @type {import('@sveltejs/kit').Config} */
const configconst config: Config{import('@sveltejs/kit').Config}
 = {
	kit(property) Config.kit?: KitConfig | undefinedSvelteKit options.
https://svelte.dev/docs/kit/configuration
: {
		// puisque <link rel="stylesheet"> n'est pas
		// autorisé, inliner tous les styles
		inlineStyleThreshold(property) KitConfig.inlineStyleThreshold?: number | undefinedInline CSS inside a <style> block at the head of the HTML. This option is a number that specifies the maximum length of a CSS file in UTF-16 code units, as specified by the String.length property, to be inlined. All CSS files needed for the page that are smaller than this value are merged and inlined in a <style> block.

[!NOTE] This results in fewer initial requests and can improve your First Contentful Paint score. However, it generates larger HTML output and reduces the effectiveness of browser caches. Use it advisedly.

0
: Infinityvar Infinity: number
	}
};

export default configconst config: Config{import('@sveltejs/kit').Config}
;

..., en désactivant l’option csr de vos fichiers +layout.js / +layout.server.js...

src/routes/+layout.server

export const csrconst csr: false = false;

..., en ajoutant amp à votre fichier app.html...

<html amp>
...

..., et en transformant le HTML utilisant l’option transformPageChunk avec transform importé depuis @sveltejs/amp :

src/hooks.server

import * as ampimport amp from '@sveltejs/amp';

/** @type {import('@sveltejs/kit').Handle} */
export async function handlefunction handle(input: {
    event: RequestEvent;
    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;
}): MaybePromise<Response>{import('@sveltejs/kit').Handle}
({ event(parameter) event: RequestEvent<Record<string, string>, string | null>, resolve(parameter) resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response> }) {
	let bufferlet buffer: string = '';
	return await resolve(parameter) resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>(event(parameter) event: RequestEvent<Record<string, string>, string | null>, {
		transformPageChunk(property) ResolveOptions.transformPageChunk?: ((input: {
    html: string;
    done: boolean;
}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it's the final chunk. Chunks are not guaranteed to be well-formed HTML
(they could include an element's opening tag but not its closing tag, for example)
but they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.
input the html chunk and the info if this is the last chunk
: ({ html(parameter) html: string, done(parameter) done: boolean }) => {
			bufferlet buffer: string += html(parameter) html: string;
			if (done(parameter) done: boolean) return ampimport amp.transformfunction transform(html: string): string(bufferlet buffer: string);
		}
	});
}

import * as ampimport amp from '@sveltejs/amp';
import type { Handle(alias) type Handle = (input: {
    event: RequestEvent;
    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;
}) => MaybePromise<Response>
import HandleThe handle hook runs every time the SvelteKit server receives a request and
determines the response.
It receives an event object representing the request and a function called resolve, which renders the route and generates a Response.
This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).
reference } from '@sveltejs/kit';

export const handleconst handle: Handle: Handle(alias) type Handle = (input: {
    event: RequestEvent;
    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;
}) => MaybePromise<Response>
import HandleThe handle hook runs every time the SvelteKit server receives a request and
determines the response.
It receives an event object representing the request and a function called resolve, which renders the route and generates a Response.
This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).
reference = async ({ event(parameter) event: RequestEvent<Record<string, string>, string | null>, resolve(parameter) resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response> }) => {
	let bufferlet buffer: string = '';
	return await resolve(parameter) resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>(event(parameter) event: RequestEvent<Record<string, string>, string | null>, {
		transformPageChunk(property) ResolveOptions.transformPageChunk?: ((input: {
    html: string;
    done: boolean;
}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it's the final chunk. Chunks are not guaranteed to be well-formed HTML
(they could include an element's opening tag but not its closing tag, for example)
but they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.
input the html chunk and the info if this is the last chunk
: ({ html(parameter) html: string, done(parameter) done: boolean }) => {
			bufferlet buffer: string += html(parameter) html: string;
			if (done(parameter) done: boolean) return ampimport amp.transformfunction transform(html: string): string(bufferlet buffer: string);
		}
	});
};

To prevent shipping any unused CSS as a result of transforming the page to amp, we can use dropcss:

src/hooks.server

import * as ampimport amp from '@sveltejs/amp';
import dropcss(alias) module "dropcss"
import dropcss from 'dropcss';

/** @type {import('@sveltejs/kit').Handle} */
export async function handlefunction handle(input: {
    event: RequestEvent;
    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;
}): MaybePromise<Response>{import('@sveltejs/kit').Handle}
({ event(parameter) event: RequestEvent<Record<string, string>, string | null>, resolve(parameter) resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response> }) {
	let bufferlet buffer: string = '';

	return await resolve(parameter) resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>(event(parameter) event: RequestEvent<Record<string, string>, string | null>, {
		transformPageChunk(property) ResolveOptions.transformPageChunk?: ((input: {
    html: string;
    done: boolean;
}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it's the final chunk. Chunks are not guaranteed to be well-formed HTML
(they could include an element's opening tag but not its closing tag, for example)
but they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.
input the html chunk and the info if this is the last chunk
: ({ html(parameter) html: string, done(parameter) done: boolean }) => {
			bufferlet buffer: string += html(parameter) html: string;

			if (done(parameter) done: boolean) {
				let csslet css: string = '';
				const markupconst markup: string = ampimport amp
					.transformfunction transform(html: string): string(bufferlet buffer: string)
					.replace(method) String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)Replaces text in a string, using a regular expression or search string.
searchValue A string or regular expression to search for.
replaceValue A string containing the text to replace. When the {@linkcode searchValue} is a RegExp, all matches are replaced if the g flag is set (or only those matches at the beginning, if the y flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.
('⚡', 'amp') // dropcss ne peut pas gérer ce caractère
					.replace(method) String.replace(searchValue: {
    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;
}, replacer: (substring: string, ...args: any[]) => string): string (+3 overloads)Replaces text in a string, using an object that supports replacement within a string.
searchValue A object can search for and replace matches within a string.
replacer A function that returns the replacement text.
(/<style amp-custom([^>]*?)>([^]+?)<\/style>/, (match(parameter) match: string, attributes(parameter) attributes: any, contents(parameter) contents: any) => {
						csslet css: string = contents(parameter) contents: any;
						return `<style amp-custom${attributes(parameter) attributes: any}></style>`;
					});

				csslet css: string = dropcss(alias) module "dropcss"
import dropcss({ css(property) css: string, html(property) html: string: markupconst markup: string }).cssany;
				return markupconst markup: string.replace(method) String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)Replaces text in a string, using a regular expression or search string.
searchValue A string or regular expression to search for.
replaceValue A string containing the text to replace. When the {@linkcode searchValue} is a RegExp, all matches are replaced if the g flag is set (or only those matches at the beginning, if the y flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.
('</style>', `${csslet css: string}</style>`);
			}
		}
	});
}

import * as ampimport amp from '@sveltejs/amp';
import dropcss(alias) module "dropcss"
import dropcss from 'dropcss';
import type { Handle(alias) type Handle = (input: {
    event: RequestEvent;
    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;
}) => MaybePromise<Response>
import HandleThe handle hook runs every time the SvelteKit server receives a request and
determines the response.
It receives an event object representing the request and a function called resolve, which renders the route and generates a Response.
This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).
reference } from '@sveltejs/kit';

export const handleconst handle: Handle: Handle(alias) type Handle = (input: {
    event: RequestEvent;
    resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>;
}) => MaybePromise<Response>
import HandleThe handle hook runs every time the SvelteKit server receives a request and
determines the response.
It receives an event object representing the request and a function called resolve, which renders the route and generates a Response.
This allows you to modify response headers or bodies, or bypass SvelteKit entirely (for implementing routes programmatically, for example).
reference = async ({ event(parameter) event: RequestEvent<Record<string, string>, string | null>, resolve(parameter) resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response> }) => {
	let bufferlet buffer: string = '';

	return await resolve(parameter) resolve: (event: RequestEvent, opts?: ResolveOptions) => MaybePromise<Response>(event(parameter) event: RequestEvent<Record<string, string>, string | null>, {
		transformPageChunk(property) ResolveOptions.transformPageChunk?: ((input: {
    html: string;
    done: boolean;
}) => MaybePromise<string | undefined>) | undefinedApplies custom transforms to HTML. If done is true, it's the final chunk. Chunks are not guaranteed to be well-formed HTML
(they could include an element's opening tag but not its closing tag, for example)
but they will always be split at sensible boundaries such as %sveltekit.head% or layout/page components.
input the html chunk and the info if this is the last chunk
: ({ html(parameter) html: string, done(parameter) done: boolean }) => {
			bufferlet buffer: string += html(parameter) html: string;

			if (done(parameter) done: boolean) {
				let csslet css: string = '';
				const markupconst markup: string = ampimport amp
					.transformfunction transform(html: string): string(bufferlet buffer: string)
					.replace(method) String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)Replaces text in a string, using a regular expression or search string.
searchValue A string or regular expression to search for.
replaceValue A string containing the text to replace. When the {@linkcode searchValue} is a RegExp, all matches are replaced if the g flag is set (or only those matches at the beginning, if the y flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.
('⚡', 'amp') // dropcss ne peut pas gérer ce caractère
					.replace(method) String.replace(searchValue: {
    [Symbol.replace](string: string, replacer: (substring: string, ...args: any[]) => string): string;
}, replacer: (substring: string, ...args: any[]) => string): string (+3 overloads)Replaces text in a string, using an object that supports replacement within a string.
searchValue A object can search for and replace matches within a string.
replacer A function that returns the replacement text.
(/<style amp-custom([^>]*?)>([^]+?)<\/style>/, (match(parameter) match: string, attributes(parameter) attributes: any, contents(parameter) contents: any) => {
						csslet css: string = contents(parameter) contents: any;
						return `<style amp-custom${attributes(parameter) attributes: any}></style>`;
					});

				csslet css: string = dropcss(alias) module "dropcss"
import dropcss({ css(property) css: string, html(property) html: string: markupconst markup: string }).cssany;
				return markupconst markup: string.replace(method) String.replace(searchValue: string | RegExp, replaceValue: string): string (+3 overloads)Replaces text in a string, using a regular expression or search string.
searchValue A string or regular expression to search for.
replaceValue A string containing the text to replace. When the {@linkcode searchValue} is a RegExp, all matches are replaced if the g flag is set (or only those matches at the beginning, if the y flag is also present). Otherwise, only the first match of {@linkcode searchValue} is replaced.
('</style>', `${csslet css: string}</style>`);
			}
		}
	});
};

C’est une bonne idée d’utiliser le hook handle pour valider le HTML transformé en utilisant amphtml-validator, mais uniquement si vous pré-rendez vos pages, car ce traitement est très lent.

Modifier cette page sur Github llms.txt

précédent suivant

Accessibilité Foire À Questions