svelte:head für dynamische Meta-Tags
Fügen Sie seitenspezifische - und -Tags in den Dokumentkopf ein.
svelte:head für dynamische Meta-Tags ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Das svelte:head-Element
Verwenden Sie <svelte:head>, um Elemente in den Dokument-Head einzufügen.
Den Titel festlegen
Fügen Sie darin beliebige Head-Tags wie title oder meta ein.
<svelte:head>
<title>{post.title}</title>
</svelte:head>Seitenspezifische Titel
Jede Seite kann für SEO und Tab-Beschriftungen ihren eigenen Titel festlegen.
Dynamische Meta-Daten
Interpolieren Sie Variablen in description, keywords und OG-Tags.
<svelte:head>
<meta name="description" content={post.summary} />
</svelte:head>SSR-kompatibel
svelte:head funktioniert während des SSR, sodass Head-Tags im initialen HTML für Crawler erscheinen.
Mehrere svelte:head-Blöcke
Sie können mehrere <svelte:head>-Blöcke in einer Komponente haben.
In Layouts
Legen Sie Standardwerte in Layouts fest und überschreiben Sie sie pro Seite.
Doppelte Tags vermeiden
SvelteKit entfernt frühere Instanzen eindeutiger Tags wie title, wenn später ein neues festgelegt wird.
Open Graph
Fügen Sie og:title, og:description und og:image für umfangreiche Vorschauen in sozialen Netzwerken hinzu (als Nächstes behandelt).
Canonical-Links
Legen Sie kanonische URLs in svelte:head fest.
<link rel="canonical" href={canonicalUrl} />SEO-Best Practices
Eindeutige Titel und Beschreibungen pro Seite verbessern die Sichtbarkeit in Suchmaschinen.
Kurze Überprüfung
Was bewirkt svelte:head?
Zusammenfassung
<svelte:head> legt seitenspezifische Head-Tags für Titel, Meta-Daten und Links sowohl beim SSR als auch bei der clientseitigen Navigation fest.
Häufig gestellte Fragen
Ist die Lektion „svelte:head für dynamische Meta-Tags“ kostenlos?
Ja — der vollständige Text von „svelte:head für dynamische Meta-Tags“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „svelte:head für dynamische Meta-Tags“?
Fügen Sie seitenspezifische - und -Tags in den Dokumentkopf ein. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „svelte:head für dynamische Meta-Tags“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- svelte:head für dynamische Meta-Tags
- OpenGraph- und Twitter-Card-Meta-Tags
- JSON-LD-Strukturdaten in SvelteKit
- Kanonische URLs und Sitemap-Generierung