Open Graph Preview

Social media preview & meta tag generator

100% Offline

📝 Open Graph Data

Title (og:title)19/60

Description (og:description)96/160

Image URL (og:image)

Recommended: 1200×630 pixels

URL (og:url)

Site Name

Type

Locale

🐦 Twitter Card

Card Type

@site

@creator

Quality Score90/100

Warnings:

• Titel ist kurz (19/30 min)

👁️ Preview: Facebook

example.com

Mein toller Artikel

Eine spannende Beschreibung, die Nutzer zum Klicken animiert. Idealerweise 155-160 Zeichen lang.

📋 Meta Tags

<meta property="og:title" content="Mein toller Artikel" />
<meta property="og:description" content="Eine spannende Beschreibung, die Nutzer zum Klicken animiert. Idealerweise 155-160 Zeichen lang." />
<meta property="og:image" content="https://picsum.photos/1200/630" />
<meta property="og:url" content="https://example.com/artikel" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Meine Website" />
<meta property="og:locale" content="de_DE" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@meinhandle" />
<meta name="twitter:creator" content="@meinhandle" />
<meta name="twitter:title" content="Mein toller Artikel" />
<meta name="twitter:description" content="Eine spannende Beschreibung, die Nutzer zum Klicken animiert. Idealerweise 155-160 Zeichen lang." />
<meta name="twitter:image" content="https://picsum.photos/1200/630" />

So erstellen Sie eine Open Graph Vorschau

Geben Sie Ihren Seitentitel, Beschreibung und Bild-URL ein
Fügen Sie optionale Felder hinzu: URL, Site-Name, Typ, Locale
Sehen Sie Live-Vorschauen für Facebook, Twitter und LinkedIn
Prüfen Sie auf Validierungswarnungen und Fehler
Kopieren Sie die generierten Meta-Tags für Ihr HTML

Häufig gestellte Fragen

Was ist Open Graph?

Open Graph ist ein Protokoll, das steuert, wie URLs angezeigt werden, wenn sie in sozialen Medien geteilt werden. Es definiert Titel, Beschreibung, Bild und andere Metadaten, die in Link-Vorschauen angezeigt werden.

Was ist die ideale OG-Bildgröße?

Die empfohlene Größe ist 1200×630 Pixel (1,91:1 Verhältnis). Dies funktioniert gut auf Facebook, Twitter und LinkedIn. Minimum empfohlen: 600×315 Pixel.

Warum stimmt meine Vorschau nicht mit dem überein, was ich auf Facebook sehe?

Facebook cached OG-Daten. Verwenden Sie Facebooks Sharing Debugger, um den Cache zu leeren. Stellen Sie auch sicher, dass Ihre Bild-URL absolut ist (beginnt mit https://) und öffentlich zugänglich.

Brauche ich sowohl OG- als auch Twitter Card-Tags?

Twitter fällt auf OG-Tags zurück, aber für beste Ergebnisse fügen Sie beide hinzu. Twitter Cards bieten zusätzliche Funktionen wie Large Image Cards und App Cards.

Wo platziere ich diese Meta-Tags?

Platzieren Sie OG-Meta-Tags im <head>-Bereich Ihres HTML, vor allen anderen Inhalten. Sie sollten auf jeder Seite sein, die teilbar sein soll.

Kategorie:

Developer Tools →