SuperDevTools

Meta Tags Generator mit Open-Graph-Vorschau

Tags einer bestehenden Seite auslesen

Fügen Sie den Quelltext des <head> einer Seite oder die ganze Seite ein. Der Code wird nur gelesen: Es wird kein Skript ausgeführt und kein Bild geladen.

Die Seite

Eine Version pro Zeile: Sprachcode, ein Leerzeichen, dann die vollständige Adresse. x-default steht für die Standardversion.

Link teilen (Open Graph und Karte)

Vollständige Adresse mit https://. Empfohlene Größe: 1200 × 630 Pixel (Format 1,91:1).

Vorschauen

Ungefähre Vorschauen: Jede Suchmaschine und jede App hat ihr eigenes Layout, kürzt Texte auf ihre Weise und kann Titel oder Beschreibung umschreiben. Ein per Adresse angegebenes Bild wird nicht heruntergeladen, nur sein Platzhalter wird gezeichnet.

Suchergebnis
Vorschaukarte mit großem Bild
Kompakte Vorschaukarte
Vorschau in einem Messenger

Schau dir das mal an:

Zu prüfen

    HTML-Code zum Einfügen in den <head>

    Alles passiert in Ihrem Browser: Nichts von dem, was Sie eingeben oder einfügen, wird übertragen.

    Die Tags im <head> an einem Ort schreiben und prüfen

    Dieser Meta Tags Generator erzeugt die Zeilen für den <head> einer Seite: Titel, Meta Description, Canonical-URL, Anweisungen für Crawler, Sprache, Viewport, Browserfarbe, Favicon und die Open-Graph-Tags, die bestimmen, wie ein geteilter Link aussieht. Während Sie tippen, werden vier Vorschauen neu gezeichnet: ein Suchergebnis, eine Vorschaukarte mit großem Bild, eine kompakte Karte und eine Chatnachricht mit dem Link.

    Der Code wird automatisch maskiert. Ein Titel wie Tipps & Tricks: "Profi" < 20 € wird zu <title>Tipps &amp; Tricks: "Profi" &lt; 20 €</title>, und in den content-Attributen werden Anführungszeichen zu &quot;.

    So funktioniert es

    1. Füllen Sie „Titel (title-Tag)“ und „Meta Description“ aus. Unter jedem Feld zeigt ein Zähler die Zeichenzahl und eine ungefähre Breite in Pixeln.
    2. Tragen Sie die „Canonical-URL“ ein und stellen Sie „Indexierung (robots)“ und „Links der Seite (robots)“ ein.
    3. Gibt es Ihre Website in mehreren Sprachen, füllen Sie „Versionen in anderen Sprachen“ aus: eine Zeile pro Version, zum Beispiel en https://www.example.com/en/.
    4. Wählen Sie im Bereich zum Teilen den „Inhaltstyp“, die „Vorschaukarte“ (summary_large_image für ein großes Bild, summary für ein kleines Vorschaubild), Adresse und Größe des Bildes, den Namen der Website und og:locale (etwa de_DE, de_AT oder de_CH).
    5. Lesen Sie „Zu prüfen“, klicken Sie auf „Code kopieren“ und fügen Sie das Ergebnis in den <head> Ihrer Seite ein.

    Um von einer bestehenden Seite auszugehen, öffnen Sie „Tags einer bestehenden Seite auslesen“, fügen den Quelltext ein und klicken auf „Tags auslesen“: Das Formular füllt sich. Es wird nichts übertragen, alles bleibt in Ihrem Browser.

    Wofür die einzelnen Tags da sind

    Der Title ist die anklickbare Überschrift eines Suchergebnisses und der Name des Browser-Tabs. Die Meta Description ist die Zusammenfassung darunter. Suchmaschinen kürzen beide nach Pixelbreite statt nach einer festen Zeichenzahl und schreiben sie manchmal um. Die Richtwerte im Tool (etwa 50 bis 60 Zeichen für den Titel, 150 bis 160 für die Beschreibung) sind Größenordnungen, keine offizielle Grenze. Das mitgelieferte Beispiel „Zwetschgenmus selber machen: Rezept in 4 Schritten“ hat 50 Zeichen, die Beschreibung 145: Beides liegt im Rahmen.

    Die Canonical-URL nennt die bevorzugte Adresse, wenn dieselbe Seite unter mehreren URLs erreichbar ist. Ein robots-Tag mit noindex hält eine Seite aus den Suchergebnissen heraus; nofollow bittet darum, ihre Links nicht zu verfolgen.

    Open-Graph-Tags (og:title, og:description, og:image und weitere) lesen soziale Netzwerke und Messenger, sobald jemand einen Link einfügt. Bleiben Titel und Beschreibung zum Teilen leer, werden die der Seite übernommen.

    Vorschaubild und Test der Vorschau

    Ein Bild mit 1200 × 630 Pixeln im Format 1,91:1 passt für große Karten. Geben Sie 1024 × 538 ein, warnt das Tool vor Unschärfe; bei 800 × 800 weist es darauf hin, dass das Bild zugeschnitten wird. Das Tool lädt diese Adresse nie herunter, es zeichnet nur einen Platzhalter. Für ein echtes Bild nutzen Sie „Ein Bild von Ihrem Gerät in den Vorschauen testen“: Die Datei erscheint in den Vorschauen, ohne Ihren Rechner zu verlassen, und Breite und Höhe werden übernommen.

    Die Vorschauen sind allgemeine Entwürfe. Testen Sie den Link nach der Veröffentlichung, indem Sie ihn in einen privaten Chat einfügen. Plattformen speichern alte Vorschauen oft einige Tage, manche bieten ein Werkzeug zum Aktualisieren an.

    Häufige Fragen

    Brauche ich noch das Meta-Tag keywords?

    Nein. Die großen Suchmaschinen ignorieren es seit Jahren, deshalb bietet das Tool es nicht an.

    Warum erscheint mein Titel in den Suchergebnissen anders?

    Suchmaschinen können einen Titel ersetzen, der zu lang, zu vage oder unpassend zum Inhalt ist.

    Nach der Änderung erscheint noch die alte Vorschau. Ist das normal?

    Ja. Linkvorschauen werden von den Plattformen zwischengespeichert. Prüfen Sie, ob die neuen Tags online sind, und warten Sie den nächsten Besuch ihres Crawlers ab.