OpenGraph- und Twitter-Card-Meta-Tags
Fügen Sie og:- und twitter:-Meta-Tags für umfangreiche Vorschauen von Links in sozialen Medien hinzu.
OpenGraph- und Twitter-Card-Meta-Tags ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Warum OG-Tags
Open-Graph-Meta-Daten liefern sozialen Plattformen wie Facebook, LinkedIn und Slack umfangreiche Vorschauen beim Teilen von Links.
Erforderliche OG-Tags
og:title, og:description, og:image und og:url sind die wichtigsten Tags.
<svelte:head>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imageUrl} />
<meta property="og:url" content={url} />
</svelte:head>Bildgröße
1200x630 ist die empfohlene OG-Bildgröße für die beste Darstellung auf verschiedenen Plattformen.
Twitter Cards
Twitter berücksichtigt OG-Tags, verfügt aber zusätzlich über eigene twitter:-Meta-Daten für mehr Kontrolle.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />Card-Typen
Twitter unterstützt die Cards summary, summary_large_image, app und player.
Validieren
Verwenden Sie Facebooks Sharing Debugger und Twitters Card Validator, um eine Vorschau Ihrer Tags anzuzeigen.
Absolute URLs
OG-Bild-URLs müssen absolut sein; relative Pfade funktionieren nicht.
Seitenspezifische Anpassung
Legen Sie OG-Tags pro Artikel, Produkt oder Profil fest, um kontextreiche Vorschauen zu erstellen.
Doppelte Standardwerte vermeiden
Stellen Sie websiteweite Standardwerte im Root-Layout bereit und überschreiben Sie sie pro Seite.
Caching
Soziale Plattformen speichern OG-Daten im Cache. Verwenden Sie deren Debugger, um den Cache zu aktualisieren.
Auswirkungen in der Praxis
Umfangreiche Vorschauen erhöhen die Klickraten bei in sozialen Netzwerken geteilten Inhalten deutlich.
Kurze Überprüfung
Warum müssen OG-Bild-URLs absolut sein?
Zusammenfassung
Fügen Sie OG- und Twitter-Meta-Daten in <svelte:head> ein und verwenden Sie absolute Bild-URLs für umfangreiche Vorschauen in sozialen Netzwerken.
Häufig gestellte Fragen
Ist die Lektion „OpenGraph- und Twitter-Card-Meta-Tags“ kostenlos?
Ja — der vollständige Text von „OpenGraph- und Twitter-Card-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 „OpenGraph- und Twitter-Card-Meta-Tags“?
Fügen Sie og:- und twitter:-Meta-Tags für umfangreiche Vorschauen von Links in sozialen Medien hinzu. 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 2 von 4.
Wie lange dauert die Lektion „OpenGraph- und Twitter-Card-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