Softonic

Open-Graph-Tags-Generator

Schritt 1 / 2
Weiter

Geben Sie Titel, Beschreibung, kanonische (canonical) URL, Vorschaubild und og:type ein, und dieser Generator schreibt die passenden Open-Graph-<meta>-Tags, fertig zum Einfügen in den <head> Ihrer Seite. Felder, die Sie leer lassen, werden einfach weggelassen, und Anführungszeichen sowie Und-Zeichen (&) in Ihrem Text werden maskiert, damit das Markup gültig bleibt. Der Generator schreibt nur die fünf zentralen og:-Eigenschaften, keine Twitter-Card- oder Artikel-Tags.

So erstellen Sie Ihre OG-Tags

  1. 1

    og:type wählen

    website für Startseiten, article für Beiträge, product für Shop-Seiten, video.other für Einbettungen. Das Feld ist Freitext, daher funktioniert jeder gültige og:type-Wert.

  2. 2

    Kernfelder ausfüllen

    Titel, Beschreibung, kanonische URL und eine absolute Bild-URL. Jedes leer gelassene Feld wird aus der Ausgabe weggelassen.

  3. 3

    Tags erzeugen

    Anführungszeichen und Und-Zeichen werden für Sie maskiert, und Sie erhalten pro ausgefülltem Feld eine meta-Zeile.

  4. 4

    Block in den head kopieren

    Fügen Sie ihn in den `<head>` Ihrer Seitenvorlage ein, oberhalb bereits vorhandener sozialer Tags.

Die Tags, die dieser Generator erzeugt

<meta property="og:type" content="article">
<meta property="og:title" content="Your page title">
<meta property="og:description" content="A one-line description.">
<meta property="og:url" content="https://example.com/post/123">
<meta property="og:image" content="https://example.com/og-image.jpg">

Das ist die gesamte Ausgabe. og:type wird immer geschrieben, während og:title, og:description, og:url und og:image nur hinzugefügt werden, wenn Sie sie ausfüllen. Diese fünf Eigenschaften lesen Facebook, LinkedIn, Slack, Discord, WhatsApp und X zuerst, also decken sie den häufigen Fall ab.

Der Generator schreibt keine twitter:-Card-Tags, og:image:width / og:image:height, og:site_name, og:locale oder article:-Tags. Wenn Sie diese brauchen, fügen Sie sie von Hand neben dem erzeugten Block hinzu.

Wichtige og:type-Werte

Typ Wann zu verwenden
website Startseite, Landing Pages, statische Inhalte
article Blogbeiträge, Nachrichten, redaktionelle Seiten
product Produktdetailseiten im E-Commerce
video.other Videoinhalte und Einbettungen
profile Autoren- oder Benutzerprofilseiten
music.song Seiten einzelner Titel

Tags, die sich zum Ergänzen von Hand lohnen

Tag Was er bewirkt Beispielwert
og:site_name Name der gesamten Website Example
og:locale Sprache und Region der Seite en_US
og:image:width Hilft Scrapern, die Karte schneller anzuordnen 1200
og:image:height Hilft Scrapern, die Karte schneller anzuordnen 630
twitter:card Kartenlayout auf X summary_large_image

X greift auf die og:-Tags zurück, wenn keine twitter:-Tags vorhanden sind, sodass eine Seite mit nur den fünf erzeugten Eigenschaften auch dort korrekt in der Vorschau erscheint. Fügen Sie twitter:-Tags nur hinzu, wenn Sie auf X einen anderen Titel, eine andere Beschreibung oder ein anderes Bild wünschen.

Häufige Fehler, die dieser Generator vermeiden hilft

  • name statt property. Open-Graph-Eigenschaften gehören in property="og:...". Der Generator schreibt immer das richtige Attribut.
  • Nicht maskierte Anführungszeichen und Und-Zeichen. Ein rohes " oder & in Ihrem Titel zerstört das Tag. Der Generator maskiert sie für Sie.
  • Relative Bild-URLs. Soziale Scraper akzeptieren nur absolute URLs. Fügen Sie die vollständige https://-Adresse des Bildes ein, denn der Generator ergänzt Ihre Domain nicht.
  • Falsche Bildgröße. 1200 × 630 Pixel ist die universell sichere Größe. Unter 200 × 200 Pixel wird das Bild meist abgelehnt.

Häufig gestellte Fragen

In den <head> Ihres HTML, weit oben, idealerweise nahe dem <title>. Scraper lesen den head und hören oft früh auf, daher verhindert das Platzieren der OG-Tags weit oben, dass sie auf sehr großen Seiten übersehen werden.

Nein. Er schreibt nur die fünf zentralen og:-Eigenschaften. X greift auf Open Graph zurück, wenn keine twitter:-Tags vorhanden sind, sodass Ihre Vorschau weiterhin funktioniert. Fügen Sie twitter:-Tags nur von Hand hinzu, wenn Sie auf X einen anderen Titel, eine andere Beschreibung oder ein anderes Bild wünschen.

1200 × 630 Pixel, JPG oder PNG, ist die universell sichere Größe. Sie funktioniert auf Facebook, LinkedIn, großen Karten von X, Slack, Discord und iMessage. Alles kleiner als 200 × 200 Pixel riskiert, vollständig abgelehnt zu werden.

Geben Sie jeder Sprachversion eine eigene Seite mit eigenen og:-Tags und fügen Sie og:locale (zum Beispiel en_US) sowie og:locale:alternate für die anderen Versionen von Hand hinzu. Dieser Generator schreibt die locale-Tags nicht für Sie.

Verwandte Tools

Meta-Beschreibungslängenprüfer

Messen Sie eine Meta-Beschreibung in Zeichen und geschätzten Pixeln, vergleichen Sie redaktionelle Richtwerte und prüfen Sie Desktop- und Mobilbeispiele.

Google-SERP-Simulator

Prüfen Sie ein ungefähres Google-ähnliches Such-Snippet mit Zeichenlimits für Mobilgeräte und Desktop. Ihr Entwurf bleibt in dieser Browsersitzung.

HTTP-Sicherheitsheader-Prüfer

Füge HTTP-Response-Header ein und prüfe HSTS, CSP, Einbettungsschutz, MIME-, Referrer- und Cross-Origin-Richtlinien lokal im Browser.

FAQ-Schema-Generator

Erzeugen Sie FAQPage-JSON-LD-Markup aus Frage-Antwort-Paaren, damit Ihre Seite für Googles Rich Results und die Antwortbox infrage kommt.

Canonical-Tag-Generator

Generieren Sie ein gültiges rel=canonical Link-Tag für jede URL. Inklusive URL-Validierung und häufiger Fehler, die Sie vermeiden sollten.

Interne Links Extraktor

Extrahiere alle internen Links von einer URL oder eingefügtem HTML mit Ankertext, rel-Attributen und Nofollow-Status für SEO-Audits.

Tool in anderen Sprachen verfügbar