Wie generiere ich Meta-Tags und Open-Graph-Tags für meine Seite?

Füllen Sie Seitentitel, Meta-Beschreibung, Seiten-URL und Social-Image-URL aus. Die Tags werden während der Eingabe erstellt. Wählen Sie ein Ausgabeformat (HTML, Next.js, JSX oder WordPress), verwenden Sie dann Kopieren oder Herunterladen und fügen Sie den Block in Ihren Head-Bereich ein.

Wie lang sollten mein Titel und meine Meta-Beschreibung sein?

Das Tool empfiehlt 30-60 Zeichen für den Titel und 70-160 für die Beschreibung. Eine Google-Suchvorschau mit Desktop- und Mobilansichten zeigt, wann Text abgeschnitten würde. Die Breiten sind Schätzungen, da Google nach Pixeln kürzt.

Warum zeigt meine Linkvorschau kein Bild oder das falsche Bild?

Die Bild-URL fehlt normalerweise, verwendet http://, ist nicht öffentlich erreichbar oder die Plattform hat eine alte Vorschau zwischengespeichert. Das Tool empfiehlt 1200x630 px, unter 5 MB, als absoluten https://-Link und warnt, wenn das Seitenverhältnis oder die Größe nicht stimmt.

Kann ich die Meta-Tags einer bereits vorhandenen Seite überprüfen?

Ja. Öffnen Sie Aus vorhandenem HTML importieren, fügen Sie den Head-Bereich oder das vollständige HTML ein und klicken Sie auf Formular aus HTML ausfüllen. Der Bereich Prüfung listet dann Probleme auf. Die Analyse läuft in Ihrem Browser und führt keine Skripte aus oder ruft etwas ab.

Sendet der Generator meine Seitendetails an einen Server?

Nein. Die Tags werden in Ihrem Browser zusammengestellt und eingefügtes HTML wird mit dem DOMParser des Browsers gelesen, der keine Skripte ausführt oder Netzwerkanfragen stellt. Nur die Bildvorschau lädt die von Ihnen eingegebene Bild-URL.

Ist es wirklich kostenlos?

Ja. Jedes Tool ist kostenlos nutzbar, ohne Konto und ohne Kreditkarte. Die Verarbeitung läuft auf Ihrem Gerät statt auf unseren Servern – genau deshalb können wir den Dienst kostenlos betreiben.

Funktioniert es auf Mobilgeräten?

Ja. Es läuft in aktuellen mobilen Browsern unter iOS und Android, ohne dass etwas installiert werden muss.

🏷️

Meta-Tag & Open-Graph-Generator – kostenlos

SEO-Meta-Tags, Open Graph und Twitter-Card-Markup mit Live-Vorschau für Google und Social Media generieren. Direkt in den Seitenkopf kopieren.

Läuft in Ihrem BrowserKein Konto, keine Pop-upsKeine Anmeldung erforderlichFür immer kostenlos

Funktioniert nach dem Laden offline

Seitentitel0 · 0/580px

Seiten-URL

Meta-Beschreibung0 · 0/920px

Social-Image-URL

Ideal: 1200×630 px, unter 5 MB, ein absoluter https://-Link.

Seitenname

Twitter/X-Handle

Twitter/X-Autorenkennung

Twitter-Card-Typ

Open-Graph-Typ

Zusätzlich einschließen

Canonical-Link einschließen (verwendet die Seiten-URL)Zeichensatz und mobiler ViewportErinnerung, <html lang> auf de zu setzenog:locale (Sprache der Seite)Favicon-LinkDesignfarbe (Browserleiste auf dem Smartphone)

Indexierung durch Suchmaschinen

Titel 0/580px (Ziel: 30–60)Beschreibung 0/920px (Ziel: 70–160)

Google-Suchvorschau

example.com

Ihr Seitentitel erscheint hier

Ihre Meta-Beschreibung erscheint hier. Machen Sie sie überzeugend, um die Klickrate in den Suchergebnissen zu verbessern.

Die Breiten sind eine Schätzung: Google kürzt nach Pixeln, nicht nach Zeichen.

Social-Card-Vorschau

og:image-Vorschau

example.com

Seitentitel

Seitenbeschreibung

In Ihren <head> einfügen

Füllen Sie mindestens ein Feld oben aus, um Meta-Tags zu generieren.

Häufige Anwendungen

Meta-Tags für Blog-BeiträgeGenerieren Sie Titel, Beschreibung und Social-Tags, damit Ihre Artikel beim Teilen großartig aussehen.
Meta-Tags für ProduktseitenLassen Sie Produktseiten schön teilen und in den Suchergebnissen gut lesbar.
Meta-Tags für Landing PagesSteuern Sie genau, wie Ihre Kampagnen-Landing-Pages beim Teilen und Suchen angezeigt werden.
Meta-Tags für jede Web-App generierenGerüst schnell die komplette Menge von Head-Meta-Tags für eine neue Seite oder Website.
Hässliche Link-Vorschauen reparierenStoppen Sie Ihre Links, die als einfache URLs angezeigt werden — fügen Sie die Tags hinzu, die Rich-Preview-Karten erstellen.

So funktioniert es

Das gesamte Zusammensetzen der Tags und das Parsen des Heads erfolgen direkt in Ihrem Browser – ohne Server. Das Tool nutzt Reacts useMemo, um HTML-Zeichenketten reaktiv zu erstellen, und die native DOMParser-API des Browsers, um für die Import-/Prüffunktion vorhandenes Seiten-Markup zu lesen.

1
Formulareingaben steuern die Live-Erstellung
Während Sie tippen, setzt ein useMemo-Hook den gesamten Tag-Block sofort neu zusammen – Titel, Meta-Beschreibung, Open-Graph-Eigenschaften und Twitter-Card-Attribute – und maskiert Sonderzeichen (&, <, >, "), sodass die Ausgabe sicher direkt in HTML eingefügt werden kann.
2
URL-Prüfung mit dem URL-Konstruktor des Browsers
Jedes URL-Feld (Seiten-URL, Social-Media-Bild) wird mit dem integrierten URL-Konstruktor des Browsers geprüft. Nur wohlgeformte http://- oder https://-Adressen mit Hostnamen mit Punkt werden akzeptiert; ungültige Werte sperren die Kopieren-Schaltfläche und zeigen einen Fehler an.
3
Import: DOMParser liest vorhandenes Head-Markup
Wenn Sie vorhandenes <head>-HTML zur Prüfung einfügen, verarbeitet das Tool es mit DOMParser im inaktiven Modus – es werden keine Skripte ausgeführt und keine Netzwerkanfragen gestellt. Anschließend durchsucht es das geparste Dokument nach bekannten Meta-Selektoren (og:title, twitter:description, Canonical-Link usw.) und füllt die Formularfelder mit den gefundenen Werten vor.
4
Live-Vorschau für Google und Social Cards
Das Tool zeigt in Echtzeit ein gestaltetes Google-Suchergebnis und eine Open-Graph-Card-Vorschau mit demselben Formularzustand, sodass Sie genau sehen, wie Titel und Beschreibung gekürzt werden, bevor Sie die Ausgabe kopieren.

Meta-Tag & Open-Graph-Generator – kostenlos

Häufige Anwendungen

So funktioniert es

Ähnliche Tools

Social-Media-Bildgrößenänderung

Audio-Tag-Editor (ID3)

Slug-Generator

Häufige Fragen