OG Tag Vorschau – Open Graph Meta Tag Checker
Geben Sie Ihre Open Graph- und Twitter Card-Werte ein, um Live-Vorschauen für soziale Medien zu sehen. Generieren Sie sofort gebrauchsfertigen Meta-Tag-Code.
Was sind Open Graph Meta-Tags?
Open Graph (OG) Meta-Tags sind HTML Meta-Elemente, die steuern, wie Ihre Webseiten aussehen, wenn sie auf Social-Media-Plattformen wie Facebook, Twitter, LinkedIn und Discord geteilt werden. Sie definieren den Titel, die Beschreibung, das Bild und die URL, die in Social-Media-Vorschaukarten erscheinen. Richtig konfigurierte OG-Tags können die Klickraten von Social Shares erheblich verbessern.
Wie Sie dieses OG Tag Vorschau Tool verwenden
- OG-Werte eingeben – Füllen Sie og:title, og:description, og:image URL, og:url, og:type und og:site_name aus
- Twitter Card Tags hinzufügen – Optional können Sie Titel, Beschreibung und Bild für Twitter/X-Karten überschreiben
- Live-Vorschauen prüfen – Sehen Sie genau, wie Ihre Seite auf Facebook, Twitter, LinkedIn und Discord aussehen wird
- Generierten Code kopieren – Klicken Sie auf „Code kopieren“, um HTML-Meta-Tags zum Einfügen auf Ihre Seite zu erhalten
Warum diesen OG Tag Previewer verwenden?
- 4 Plattform-Vorschauen – Sehen Sie gleichzeitig Vorschauen für Facebook, Twitter/X, LinkedIn und Discord
- Echtzeit-Updates – Vorschauen werden sofort aktualisiert, während Sie tippen, kein Neuladen der Seite erforderlich
- Code-Generierung – Generiert automatisch korrekt formatierten Meta-Tag-HTML-Code
- Twitter Card Unterstützung – Separate Felder für Twitter-spezifische Überschreibungen (twitter:title, twitter:image usw.)
- Kein Server erforderlich – Alles läuft in Ihrem Browser. Keine Daten werden an einen Server gesendet
- Größenrichtlinien – Integrierte Empfehlungen für optimale Bildabmessungen (1200x630px)
FreeToolbox vs. andere OG-Vorschau-Tools
| Funktion | FreeToolbox | OpenGraph.xyz | MetaTags.io |
|---|---|---|---|
| Plattformen | 4 (FB, TW, LI, DC) | 3 (FB, TW, LI) | 3 (Google, FB, TW) |
| Echtzeit-Vorschau | Ja | Ja | Ja |
| Code-Generierung | Ja | Ja | Ja |
| Discord Vorschau | Ja | Nein | Nein |
| Kein Konto erforderlich | Ja | Ja | Kostenlose Version eingeschränkt |
| Werbung | Minimal | Moderat | Stark |
Häufige Fragen
Welche og:image Größe wird empfohlen?
Die empfohlene Größe ist 1200 x 630 Pixel (Seitenverhältnis 1,91:1). Dies funktioniert gut auf Facebook, Twitter, LinkedIn und Discord. Verwenden Sie das PNG- oder JPG-Format und halten Sie die Dateigröße unter 8 MB.
Warum kann dieses Tool keine OG-Tags von einer URL abrufen?
Die Browsersicherheit (CORS-Richtlinie) verhindert, dass JavaScript Inhalte von anderen Domänen abruft. Dieses Tool verwendet stattdessen manuelle Eingabe, was tatsächlich besser ist, um Tags vor der Veröffentlichung in der Vorschau anzuzeigen.
Benötige ich sowohl OG- als auch Twitter Card-Tags?
Twitter/X greift auf OG-Tags zurück, wenn Twitter-spezifische Tags fehlen. Das Hinzufügen von twitter:card wird jedoch empfohlen, um den Kartentyp zu steuern. Verwenden Sie Twitter-spezifische Tags nur, wenn Sie unterschiedliche Inhalte auf Twitter im Vergleich zu anderen Plattformen wünschen.
Welchen og:type sollte ich verwenden?
Verwenden Sie 'website' für Homepages und allgemeine Seiten, 'article' für Blog-Posts und Nachrichten, 'product' für Produktseiten. Der Standardwert 'website' funktioniert in den meisten Fällen.
Wie teste ich meine tatsächlichen Live-OG-Tags?
Nachdem Sie die Meta-Tags zu Ihrer Seite hinzugefügt haben, verwenden Sie den Facebook Sharing Debugger (developers.facebook.com/tools/debug), den Twitter Card Validator und den LinkedIn Post Inspector, um zu überprüfen, ob die Tags korrekt funktionieren.