Meta-Tag- und OpenGraph-Generator
Erstellen Sie die Meta-Tags, die eine Seite für Suchergebnisse und soziale Vorschauen benötigt: Titel, Beschreibung, kanonische URL, Open Graph und Twitter-Karten-Tags. Füllen Sie die Felder aus, beobachten Sie, wie sich das Markup während der Eingabe zusammensetzt, und fügen Sie den Block in den Kopf Ihrer Seite ein.
Enter Page Metadata Details
Google & Social Card Live Preview
https://mywebsite.com
My Awesome Website — Premium Tools
Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads.
mywebsite.com
My Awesome Website — Premium Tools
Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads.
<!-- Primary Meta Tags --> <title>My Awesome Website — Premium Tools</title> <meta name="title" content="My Awesome Website — Premium Tools" /> <meta name="description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://mywebsite.com" /> <meta property="og:title" content="My Awesome Website — Premium Tools" /> <meta property="og:description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <meta property="og:image" content="https://mywebsite.com/og-image.png" /> <!-- Twitter --> <meta property="twitter:card" content="summary_large_image" /> <meta property="twitter:url" content="https://mywebsite.com" /> <meta property="twitter:title" content="My Awesome Website — Premium Tools" /> <meta property="twitter:description" content="Convert files, remove image backgrounds, and format code 100% free inside your browser tab with zero cloud uploads." /> <meta property="twitter:image" content="https://mywebsite.com/og-image.png" />
Wie es funktioniert
- 1
Geben Sie den Seitentitel und die Beschreibung ein, die von Suchmaschinen und sozialen Plattformen angezeigt werden sollen.
- 2
Fügen Sie die kanonische URL und die Vorschaubild-URL hinzu – beide müssen absolute, keine relativen Pfade sein.
- 3
Überprüfen Sie die generierten Tags, einschließlich der Open Graph- und Twitter-Kartenäquivalente.
- 4
Kopieren Sie den Block und fügen Sie ihn in das Kopfelement Ihrer Seite ein.
Hauptvorteile und Vorteile
Eine Quelle, drei Verbraucher
Suchergebnisse, Open Graph und Twitter-Karten werden gemeinsam aus derselben Eingabe generiert, sodass sie nicht auseinanderdriften können.
Korrekte Tag-Namen
Open Graph verwendet Eigenschaftsattribute und Twitter verwendet Namensattribute – eine Unterscheidung, die leicht von Hand verwechselt werden kann.
Sofortiges Feedback
Das Markup wird während der Eingabe zusammengesetzt, sodass Sie den fertigen Block sehen können, bevor Sie ihn einfügen.
Framework-unabhängige Ausgabe
Einfache HTML-Tags, die in einer statischen Site, einer Vorlage, einem CMS-Feld oder einer handgeschriebenen Seite funktionieren.
Wofür die Leute es verwenden
- Hinzufügen von Social-Preview-Tags zu einer Zielseite, die derzeit als leere Karte geteilt wird.
- Festlegen einer kanonischen URL auf einer Seite, die unter mehr als einer Adresse erreichbar ist.
- Vorbereiten von Meta-Tags für eine Kundenseite vor deren Übergabe.
- Erfahren Sie, welche Tags wirklich wichtig sind, indem Sie sehen, wie sie zusammen generiert werden.
Unterstützte Formate und Optionen
| Generierte Tags | Titel, Meta-Beschreibung, kanonischer Link, Open Graph (og:title, og:description, og:url, og:image), Twitter-Karten-Tags |
|---|---|
| Ausgabe | Einfaches HTML, das Sie in das Head-Element einfügen |
Datenschutz und Datenverarbeitung
Tags werden aus Ihrer Eingabe im Browser zusammengestellt. Die von Ihnen eingegebenen URLs und Texte werden nicht an unseren Server gesendet oder protokolliert.
Grenzen und Wissenswertes
- Titel und Beschreibungen werden von Suchmaschinen umgeschrieben, wenn sie ein anderes Snippet als nützlicher erachten – diese Tags sind eine starke Eingabe, keine Garantie.
- Das Vorschaubild muss eine absolute URL sein, die öffentlich erreichbar ist. Social Crawler können weder localhost noch eine authentifizierte Seite oder einen relativen Pfad abrufen.
- Zwischenspeichern von Vorschauen auf sozialen Plattformen. Nach dem Ändern von Tags müssen Sie normalerweise die URL im plattformeigenen Debugging-Tool erneut scannen, bevor die neue Karte angezeigt wird.
Fehlerbehebung
Auf der Social Card werden immer noch alte Inhalte angezeigt
Das ist ein plattformseitiger Cache. Durchsuchen Sie die URL im Freigabe-Debugger der Plattform erneut, um eine Aktualisierung zu erzwingen. Durch Ändern der Tags allein wird die URL nicht gelöscht.
Auf der Vorschaukarte wird kein Bild angezeigt
Stellen Sie sicher, dass og:image eine absolute HTTPS-URL ist, öffentlich zugänglich und groß genug ist (1200 x 630 ist der sichere Standard). Kleine oder blockierte Bilder werden stillschweigend gelöscht.
Google zeigt eine andere Beschreibung
Google generiert ein Snippet, das seiner Meinung nach für die Suchanfrage relevanter ist. Stellen Sie sicher, dass die Beschreibung die Seite genau zusammenfasst. Es wird häufiger verwendet, wenn es der Absicht entspricht.
Meta Tag Generator — Title, Description & Open Graph Tags
Generate a complete set of SEO meta tags — title, meta description, canonical, Open Graph and Twitter Card — and copy them straight into your page head. A free meta tag generator with live length feedback so nothing gets truncated in the search snippet.
- Title and meta description with length guidance — live character counts keep you inside the roughly 60-character title and 155-character description that search engines display without cutting off.
- Open Graph tags for social sharing — og:title, og:description, og:image and og:url control exactly how a link previews on Facebook, LinkedIn, Slack and WhatsApp.
- Twitter Card markup — summary and large-image card tags so shared links render with a proper preview instead of a bare URL.
- Copy-paste ready HTML — the output is a valid block of head markup, ready for a template, a static site or a CMS SEO field.
- No sign-up, no plugin — everything is generated in your browser — a practical option when the site has no SEO plugin installed.
Free and unlimited. Generate the matching permalink with the URL Slug Generator and the site icon with the Favicon Generator.
Häufig gestellte Fragen
Why does Google show a different description than mine?
Google rewrites snippets when it judges another passage more relevant to the query. A description that accurately summarises the page gets used far more often than one written purely for keywords.
What size should the og:image be?
1200x630 is the safe standard. It must be an absolute, publicly reachable HTTPS URL — social crawlers cannot fetch localhost, a relative path or a page behind authentication.
I updated my tags but the shared card is unchanged. Why?
Social platforms cache previews. Re-scrape the URL in the platform's own sharing debugger to force a refresh; changing the tags alone will not clear their cache.
Wo soll ich diese Meta-Tags einfügen?
Fügen Sie das generierte HTML-Snippet in den Abschnitt <head> Ihrer Webseiten ein.
Warum zeigt Google eine andere Beschreibung als meine an?
Google schreibt Snippets neu, wenn es eine andere Passage als relevanter für die Suchanfrage erachtet. Eine Beschreibung, die die Seite genau zusammenfasst, wird weitaus häufiger verwendet als eine, die nur für Schlüsselwörter geschrieben wurde.
Welche Größe sollte das og:image haben?
1200x630 ist der sichere Standard. Es muss eine absolute, öffentlich erreichbare HTTPS-URL sein – Social Crawler können nicht localhost, einen relativen Pfad oder eine Seite hinter der Authentifizierung abrufen.
Ich habe meine Tags aktualisiert, aber die geteilte Karte bleibt unverändert. Warum?
Zwischenspeichern von Vorschauen auf sozialen Plattformen. Scrapen Sie die URL erneut im plattformeigenen Freigabe-Debugger, um eine Aktualisierung zu erzwingen. Durch das alleinige Ändern der Tags wird der Cache nicht geleert.
Verwandte Tools
QR-Code-Generator
Verwandeln Sie jeden Link oder Text in einen scannbaren QR-Code
CSS-Glasmorphismus-Generator
Generieren Sie moderne Glas-UI-Effekte und CSS-Code
Text-Groß-/Kleinschreibung-Konverter
Wechseln Sie zwischen UPPER, Lower, Title und CamelCase
Lorem Ipsum Platzhaltergenerator
Generieren Sie Dummy-Platzhaltertext für UI-Layouts