Anleitung: Open Graph Tags implementieren

Open Graph Tags implementieren – so steuern Sie die Vorschau auf Facebook & Co.

Warum Open Graph wichtig ist

Was Open Graph leistet

Open Graph ist ein Protokoll von Facebook, das Ihnen die Kontrolle über die Darstellung Ihrer Inhalte in sozialen Netzwerken gibt. Ohne korrekte Meta-Tags entscheidet Facebook selbst, welcher Titel, welches Bild und welche Beschreibung in der Vorschau erscheinen – und das Ergebnis ist selten optimal.

Mit Open Graph Tags definieren Sie präzise, wie Ihre Seite aussieht, wenn sie geteilt wird. Das betrifft nicht nur Facebook, sondern auch LinkedIn, WhatsApp und andere Plattformen, die das Protokoll nutzen.

{/* BILD: Screenshot einer Facebook-Vorschau mit und ohne Open Graph Tags im Vergleich */}

Technische Voraussetzungen

Ihr Server muss gzip und deflate Kompression unterstützen. Ohne diese Kodierungen liest Facebook die Tags nicht korrekt aus. Die meisten modernen Webhoster erfüllen diese Anforderung standardmäßig – prüfen Sie im Zweifel die Server-Konfiguration.

Open Graph Tags richtig einsetzen

Grundlegendes Markup für Artikel

Die meisten geteilten Inhalte sind Blogartikel, News oder Ratgeber. Dafür verwenden Sie og:type="article". Das Markup kommt in den <head>-Bereich Ihrer Seite:

<meta property="og:title" content="Ihr prägnanter Seitentitel" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://www.ihredomain.de/pfad" />
<meta property="og:image" content="https://www.ihredomain.de/bild.jpg" />
<meta property="og:description" content="Kurze, präzise Beschreibung in 1–2 Sätzen." />
<meta property="fb:app_id" content="IhreAppID" />

Die URL muss kanonisch sein

Nutzen Sie in og:url immer die bereinigte, kanonische URL – ohne UTM-Parameter, Session-IDs oder Tracking-Anhänge. Facebook verwendet diese URL als eindeutige Referenz.

Der Titel bleibt ohne Branding

Verzichten Sie auf Firmennamen oder Markenergänzungen im og:title. Schreiben Sie den Titel so, dass er auch ohne Kontext funktioniert. Optimal sind 60–90 Zeichen.

Die Beschreibung hebt den Nutzen hervor

Formulieren Sie in og:description ein bis zwei Sätze, die den Inhalt zusammenfassen oder den Mehrwert klar benennen. Keine Keyword-Aufzählung, keine Füllsätze.

Das Bild muss technisch sauber sein

Verwenden Sie für og:image ein Bild mit 1200 × 628 Pixel. Dieses Format wird von Facebook bevorzugt und erscheint in allen Ansichten scharf. Kleinere Bilder werden skaliert und verlieren an Qualität.

Die wichtigsten Open Graph Properties im Überblick

Pflicht-Tags für jede Seite

PropertyFunktion`og:url`Kanonische URL ohne Parameter oder Tracking-Codes`og:title`Seitentitel, prägnant und ohne Branding`og:description`Kurzbeschreibung in 1–2 Sätzen, die Nutzen oder Inhalt erklärt`og:image`Vorschaubild, idealerweise 1200 × 628 Pixel`og:type`Art des Inhalts, z. B. `article`, `website`, `productfb:app_id`Facebook App ID für Insights und Traffic-Analyse

Zusätzliche Tags für erweiterte Kontrolle

Je nach Inhalt können Sie weitere Properties nutzen:

og:locale – Sprache und Region, z. B. de_DE
og:site_name – Name Ihrer Website (erscheint zusätzlich zum Titel)
article:published_time – Veröffentlichungsdatum bei Artikeln
article:author – Autor-Profil auf Facebook
og:video – Video-URL, falls der Inhalt ein Video enthält

Facebook App ID einrichten

Warum Sie eine App ID brauchen

Die fb:app_id verbindet Ihre Website mit Facebook Insights. Dort sehen Sie, wie viel Traffic über Facebook kommt, welche Inhalte geteilt werden und wie Nutzer mit Ihren Links interagieren.

App ID erstellen

Gehen Sie zum Facebook Developer Dashboard unter http://developers.facebook.com
Legen Sie eine neue App an (Typ: „Business” oder „Consumer”)
Kopieren Sie die App ID aus dem Dashboard
Fügen Sie sie in das Tag <meta property="fb:app_id" content="IhreAppID" /> ein

{/* BILD: Screenshot des Facebook Developer Dashboards mit markierter App ID */}

Validierung und Testing

Open Graph Tags prüfen

Verwenden Sie den Facebook Sharing Debugger unter http://developers.facebook.com/tools/debug . Geben Sie Ihre URL ein – das Tool zeigt, wie Facebook die Tags ausliest, und weist auf Fehler hin.

Häufige Fehlerquellen

Bild-URL ist nicht öffentlich erreichbar (z. B. durch Firewall blockiert)
Server unterstützt gzip oder deflate nicht
Tags liegen nicht im <head>-Bereich
Mehrfache Tags desselben Typs ohne korrekte Struktur
Bild ist zu klein oder im falschen Format

Cache aktualisieren

Facebook cached Open Graph Daten. Nach Änderungen nutzen Sie den Debugger, um den Cache manuell zu leeren und die neue Vorschau zu erzwingen.

Auswirkung auf Traffic und Klickrate

Messbare Vorteile optimierter Vorschauen

Korrekt ausgezeichnete Inhalte erzielen auf Facebook durchschnittlich höhere Click-Through-Rates. Das Vorschaubild zieht Aufmerksamkeit, der präzise Titel weckt Interesse, die Beschreibung liefert Kontext.

Längere Verweildauer durch passende Erwartungen

Nutzer, die durch eine optimierte Vorschau auf Ihre Seite kommen, wissen bereits, was sie erwartet. Das reduziert Absprünge und erhöht die Verweildauer – beides Signale, die auch Google positiv wertet.

{/* BILD: Diagramm mit CTR-Vergleich: mit vs. ohne Open Graph Tags */}

Umsetzung in gängigen CMS

WordPress

Nutzen Sie Plugins wie Yoast SEO oder Rank Math. Beide bieten Felder für alle wichtigen Open Graph Properties. Die Tags werden automatisch in den <head>-Bereich eingefügt.

Ohne Plugin: Manuell im Theme

Fügen Sie die Meta-Tags in die header.php Ihres Themes ein. Nutzen Sie PHP-Variablen, um Titel, URL und Bild dynamisch zu befüllen:

<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:url" content="<?php the_permalink(); ?>" />

Shopify, Wix, TYPO3

Die meisten modernen CMS bieten Open Graph Unterstützung ab Werk oder über Erweiterungen. Prüfen Sie die Dokumentation Ihres Systems – in der Regel reicht die Aktivierung in den Einstellungen.

Checkliste: Open Graph vollständig umsetzen

Alle Pflicht-Tags (og:url, og:title, og:description, og:image, og:type) sind gesetzt
Bild hat 1200 × 628 Pixel und ist öffentlich erreichbar
URL ist kanonisch und ohne Parameter
Server nutzt gzip und deflate Kompression
Facebook App ID ist eingetragen
Tags wurden mit dem Facebook Debugger validiert
Cache wurde nach Änderungen aktualisiert

{/* BILD: Checkliste als visuelles Infografik-Element */}

Fazit: Open Graph Tags sind kein optionales Extra. Sie steuern die Darstellung Ihrer Inhalte in sozialen Netzwerken und beeinflussen direkt, wie viele Nutzer auf Ihre Links klicken. Die Implementierung ist technisch einfach – und die Wirkung messbar.