svelte:head för dynamiska metataggar
Infoga sidspecifika - och -taggar i dokumentets head.
svelte:head för dynamiska metataggar är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Elementet svelte:head
Använd <svelte:head> för att infoga element i dokumentets head.
Ange titeln
Här kan du lägga in valfria head-taggar, till exempel title eller meta.
<svelte:head>
<title>{post.title}</title>
</svelte:head>Titlar per sida
Varje sida kan ange sin egen titel för SEO och fliketiketter.
Dynamisk metadata
Interpolera variabler i description-, keywords- och OG-taggar.
<svelte:head>
<meta name="description" content={post.summary} />
</svelte:head>Anpassat för SSR
svelte:head fungerar under SSR, så head-taggarna finns i den ursprungliga HTML-koden för sökmotorernas sökrobotar.
Flera svelte:head-block
Du kan ha flera <svelte:head>-block i samma komponent.
I layouter
Ange standardvärden i layouter och skriv över dem per sida.
Undvik duplicerade taggar
SvelteKit tar bort tidigare instanser av unika taggar som title när en senare instans anges.
Open Graph
Lägg till og:title, og:description och og:image för utförliga förhandsvisningar i sociala medier (detta tas upp härnäst).
Kanoniska länkar
Ange kanoniska URL:er i svelte:head.
<link rel="canonical" href={canonicalUrl} />Bästa praxis för SEO
Unika titlar och beskrivningar per sida förbättrar synligheten i sökresultat.
Snabb kontroll
Vad gör svelte:head?
Sammanfattning
<svelte:head> anger sidspecifika head-taggar för titlar, metadata och länkar vid både SSR och navigering på klienten.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”svelte:head för dynamiska metataggar” gratis?
Ja – hela texten till ”svelte:head för dynamiska metataggar” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”svelte:head för dynamiska metataggar”?
Infoga sidspecifika - och -taggar i dokumentets head. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”svelte:head för dynamiska metataggar”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?
Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- svelte:head för dynamiska metataggar
- OpenGraph- och Twitter Card-metadata
- JSON-LD-strukturerade data i SvelteKit
- Kanoniska URL:er och generering av webbplatskarta