Kopieren & Einfügen Mit Vorschau Bild-/Cache-Tipps inklusive

OGP Tag-Generator (Automatische Ausgabe von og:title/og:image etc.)

Q: "Auch Twitter Card Tags einbeziehen?"

"Ja. twitter:card und verwandte Tags können zusammen generiert werden. X kann auf OG-Tags zurückgreifen, daher funktionieren auch minimale Setups. (X Developer)"

Q: "Empfohlene Bildgröße?"

"Als Richtwert schlägt Meta 1200×630 oder größer (Minimum 600×315) und ein Verhältnis nahe 1,91:1 vor. X's summary_large_image hat ein anderes Verhältnis und andere Mindestmaße. Wählen Sie die Zielplattform."

Q: "Vorschau aktualisiert sich nicht"

"Meistens liegt es am Cache. Nutzen Sie Debugger/Inspectors zum erneuten Abrufen, und verwenden Sie bei Bildänderungen eine neue Bild-URL."

Geben Sie URL, Titel, Beschreibung und Bild-URL ein. Erstellen Sie Open Graph + Twitter Card Meta-Tags zusammen.

Der Abruf erfolgt direkt in Ihrem Browser (CORS-Einschränkungen gelten).

Eingabe

Generierte Meta-Tags / Vorschau

1) Kerninfos

Erforderlich

Titel (og:title) Erforderlich

Richtwert: 30–60 Zeichen 0

Beschreibung (og:description) Optional

Richtwert: 80–120 Zeichen 0

Bild-URL (og:image) Erforderlich

Eine Thumbnail-Vorschau erscheint, wenn das Bild geladen wird.

Aktuelles Verhältnis -

Seitenname (og:site_name) Optional

Typ (og:type) Erforderlich

Wählen Sie Webseite oder Artikel.

2) Twitter Card

Aufklappbar / Standardmäßig aktiviert

Twitter Card Tags einbeziehen

twitter:card

twitter:site (optional)

twitter:creator (optional)

Auto-Sync-Regeln

• Wenn twitter:title leer ist, wird og:title verwendet.
• Wenn twitter:description leer ist, wird og:description verwendet.
• Wenn twitter:image leer ist, wird og:image verwendet.

3) Erweitert

Nur öffnen, wenn Sie Feineinstellungen benötigen.

og:locale (optional)

og:image:alt / twitter:image:alt

Barrierefreiheits-Text. X zeigt bis zu 420 Zeichen an.

og:image:width

og:image:height

Das Hinzufügen von Breite/Höhe kann Crawlern helfen, schneller zu rendern. (Facebook Developers)

Artikel-Tags (nur wenn og:type=article)

article:published_time

article:modified_time

Bei Bedarf ISO 8601 verwenden.

Generierte Meta-Tags

Vorschau

OG Vorschau

beispiel.de

Vorschau-Titel

Beschreibung erscheint hier.

Viele SNS/Chat-Apps sehen so ähnlich aus

X Card Vorschau summary

beispiel.de

Vorschau-Titel

Beschreibung erscheint hier.

Wechselt zwischen summary und summary_large_image

Hinweise (optional)

Hinweise erscheinen hier basierend auf Ihren Eingaben.

Optionen

Eingaben in der URL speichern Teilen Sie den Link, um die gleichen Einstellungen wieder zu öffnen Leerzeichen automatisch kürzen Kürzt auch vollbreite Leerzeichen Anführungszeichen maskieren Hält Meta-Attribute sicher

Bildgrößen-Leitfaden (Beispiele)

Wählen Sie OG oder X, um Beispielgrößen zu sehen

OG-orientiert X-orientiert

Verhältnis-Hinweis -

Verwendung / Beispiele

Füllen Sie URL, Titel, Beschreibung und Bild-URL aus.
Wählen Sie og:type und (optional) Twitter Card Einstellungen.
Kopieren Sie die generierten Tags und fügen Sie diese in den <head> ein.

Kurzes Beispiel

URL + Titel + Bild eingeben, dann das empfohlene Set kopieren.

Hinweise & Tipps

Was ist OGP?

OGP (Open Graph Protocol) ermöglicht es sozialen Plattformen, den Titel, die Beschreibung und das Bild Ihrer Seite zu lesen.

Durch das Setzen von og:title/og:description/og:image können Sie steuern, wie geteilte Links erscheinen.

Twitter Cards (X) verwenden ähnliche Metadaten und können auf OG-Tags zurückgreifen.

Leitfaden zur Bildgröße (zur Stabilisierung der Vorschau)

Meta (Facebook) Leitfaden

• Minimum 200×200.
• Für eine bessere Anzeige 1200×630 oder größer; mindestens 600×315 wird empfohlen. (Facebook Developers)
• Ein Verhältnis nahe 1,91:1 hilft, Beschnitt zu vermeiden (ungefähr, nicht streng).
• Leitfaden für die Dateigröße beinhaltet 8MB oder weniger.

X (Twitter) Card Leitfaden

• summary_large_image unterstützt ein Verhältnis von 2:1; minimum 300×157, max 4096×4096. (X Developer)
• Dateigröße unter 5MB und gängige Formate (JPG/PNG/WEBP/GIF) werden empfohlen.

Wenn Änderungen nicht erscheinen (Cache & erneutes Abrufen)

• SNS-Crawler cachen OG-Daten. Verwenden Sie den Debugger/Inspector der jeweiligen Plattform zum erneuten Abrufen. (Facebook Developers)
• Wenn Sie das Bild ersetzt haben, es sich aber nicht aktualisiert, ist möglicherweise die Bild-URL selbst gecached; ändern Sie den Dateinamen oder fügen Sie einen Query-String hinzu.
• Das Hinzufügen von og:image:width/height kann die Render-Stabilität verbessern. (Facebook Developers)

Tools zur Validierung

Meta Sharing Debugger

OG-Tags erneut abrufen und inspizieren.

LinkedIn Post Inspector

LinkedIn-Cache aktualisieren.

X Card Validator

Twitter Card Rendering prüfen.

FAQ

Auch Twitter Card Tags einbeziehen?

Ja. twitter:card und verwandte Tags können zusammen generiert werden. X kann auf OG-Tags zurückgreifen, daher funktionieren auch minimale Setups. (X Developer)

Empfohlene Bildgröße?

Als Richtwert schlägt Meta 1200×630 oder größer (Minimum 600×315) und ein Verhältnis nahe 1,91:1 vor. X's summary_large_image hat ein anderes Verhältnis und andere Mindestmaße. Wählen Sie die Zielplattform.

Vorschau aktualisiert sich nicht

Meistens liegt es am Cache. Nutzen Sie Debugger/Inspectors zum erneuten Abrufen, und verwenden Sie bei Bildänderungen eine neue Bild-URL.