svelte:head pour les balises meta dynamiques
Injectez des balises et propres à la page dans l’en-tête du document.
svelte:head pour les balises meta dynamiques est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
L’élément svelte:head
Utilisez <svelte:head> pour injecter des éléments dans l’en-tête du document.
Définir le titre
À l’intérieur, placez des balises d’en-tête, comme celles du titre ou des métadonnées.
<svelte:head>
<title>{post.title}</title>
</svelte:head>Titres propres à chaque page
Chaque page peut définir son propre titre pour le référencement et le libellé de l’onglet.
Métadonnées dynamiques
Insérez des variables dans la description, les mots-clés et les balises OG.
<svelte:head>
<meta name="description" content={post.summary} />
</svelte:head>Compatible avec le SSR
svelte:head fonctionne pendant le SSR : les balises d’en-tête apparaissent dans le HTML initial destiné aux robots d’exploration.
Plusieurs blocs svelte:head
Vous pouvez avoir plusieurs blocs <svelte:head> dans un même composant.
Dans les mises en page
Définissez des valeurs par défaut dans les mises en page et remplacez-les page par page.
Éviter les balises en double
SvelteKit supprime les instances précédentes des balises uniques comme title lorsqu’une nouvelle est définie.
Open Graph
Ajoutez og:title, og:description et og:image pour obtenir des aperçus enrichis sur les réseaux sociaux (nous y reviendrons).
Liens canoniques
Définissez les URL canoniques dans svelte:head.
<link rel="canonical" href={canonicalUrl} />Bonnes pratiques de référencement
Des titres et des descriptions uniques pour chaque page améliorent sa visibilité dans les recherches.
Vérification rapide
Que fait svelte:head ?
Récapitulatif
<svelte:head> définit les balises d’en-tête propres à chaque page pour les titres, les métadonnées et les liens, lors du SSR comme de la navigation côté client.
Questions Fréquemment Posées
La leçon « svelte:head pour les balises meta dynamiques » est-elle gratuite ?
Oui — le texte complet de « svelte:head pour les balises meta dynamiques » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « svelte:head pour les balises meta dynamiques » ?
Injectez des balises et propres à la page dans l’en-tête du document. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « svelte:head pour les balises meta dynamiques » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- svelte:head pour les balises meta dynamiques
- OpenGraph et métadonnées Twitter Card
- Données structurées JSON-LD dans SvelteKit
- URL canoniques et génération de sitemap