JPKCom DB

Meta Tags Generator — Anwendungsbeispiele

Praxisnahe Durchläufe mit dem Meta Tags Generator: Basis-Head, Artikel mit Open Graph und X Card, JSON-LD, Security-Header für nginx/Apache, hreflang.

Zurück zur Übersicht: Meta Tags Generator · Tool live öffnen: www.jpkc.com/tools/meta-tags/

Das Manual erklärt jede Sektion und jedes Feld im Detail. Diese Seite ergänzt das um konkrete Arbeitsabläufe: typische Aufgaben, Schritt für Schritt durchgespielt, mit Blick darauf, welche Bausteine du aktivierst und wie du das Ergebnis liest. Die Oberfläche ist auf Englisch — Sektions- und Button-Namen stehen deshalb im Original, bei Bedarf mit deutscher Erläuterung.

Beispiel 1: Der Basis-Head für eine neue Seite

Der häufigste Fall — du brauchst schnell einen sauberen Pflicht-Head.

  1. Öffne den Generator. Essential ist bereits aktiv; die übrigen Sektionen lässt du erstmal aus. <meta charset="utf-8"> und der Viewport width=device-width, initial-scale=1 stehen schon in der Ausgabe.
  2. Tippe einen Page Title. Achte auf den Zeichenzähler: Bis 50 Zeichen bleibt der Balken grün, bis 60 wird er gelb und orange — das ist noch der empfohlene Bereich; rot heißt, du liegst über 60 Zeichen. Ob Google tatsächlich kürzt, zeigt dir später der Preview-Tab, der nach Pixelbreite misst.
  3. Schreib eine Meta Description zwischen 120 und 160 Zeichen — der Zähler führt dich.
  4. Trag die Canonical URL ein (absolut, mit https://). Praktisch: og:url und die JSON-LD-URL erben sie später automatisch, solange du dort nichts Eigenes einträgst.
  5. Lass bei Robots die Radios auf index und follow. Weil das der Default ist, schreibt das Tool gar kein Robots-Tag — genau so soll es sein. Rechts steht jetzt dein vollständiger Essential-Block.
  6. Wirf einen Blick auf die Hinweise unter der Ausgabe: Steht dort nichts mehr, ist der Block vollständig.
  7. Klick Copy und füge das HTML in den <head> deiner Seite ein — oder Download für die Datei meta-tags.html.

Fertig ist die Pflichtausstattung. Alles Weitere baust du darauf auf.

Beispiel 2: Eine Artikelseite mit Open Graph und X Card

Ein Blogpost soll beim Teilen auf Social Media gut aussehen.

  1. Öffne die Sektion Open Graph. Sobald du dort etwas einträgst, schaltet sie sich selbst ein (Badge on).
  2. Setz Type auf article. Jetzt erscheinen die Article-Felder: Published, Modified, Author (profile URL), Section und Tags.
  3. Title und Description kannst du leer lassen — sie erben Seitentitel und Meta Description aus Essential (kursiv als Platzhalter sichtbar). Trag eigene Texte nur ein, wenn die Social-Fassung anders klingen soll. Wichtig ist die Image URL — als absolute URL. Trag Image width 1200 und Image height 630 ein (die vom Tool empfohlene Größe) und einen Image alt text.
  4. Ergänze Site name und stell Locale von der Vorbelegung en_US auf de_DE um. Bei den Article-Feldern setzt du Veröffentlichungsdatum, Autor-Profil, Rubrik und kommagetrennte Tags — daraus macht das Tool je ein eigenes article:tag. Die Zeitangaben bekommen automatisch den UTC-Offset deiner Zeitzone, in Deutschland etwa +02:00 im Sommer und +01:00 im Winter.
  5. Öffne zusätzlich X (Twitter) Card, lass summary_large_image stehen und trag @site- und @creator-Handle ein — name, @name oder die Profil-URL https://x.com/name funktionieren gleichermaßen. Die Option Leave out title, description and image when they equal Open Graph lässt du an: Dann steht im X-Block nur twitter:card mit den Handles, weil X Titel, Beschreibung und Bild aus Open Graph liest. Willst du für X eigene Texte, trägst du sie in die X-Felder ein — dann erscheinen sie als twitter:-Tags.
  6. Wechsle in den Preview-Tab und prüfe Open Graph card und X card. Die Vorschau nutzt dieselben geerbten Werte wie die Ausgabe — was du dort siehst, steht auch im Markup.

So bekommst du eine vollständige Social-Vorschau, die auf Facebook, LinkedIn, WhatsApp und X greift.

Beispiel 3: Structured Data per JSON-LD aufbauen

Du willst Rich Results vorbereiten, ohne Schema.org-Syntax von Hand zu tippen.

  1. Öffne Structured Data (JSON-LD) und wähle bei Schema type z. B. Article.
  2. URL, Name / headline, Description und Image URL musst du nicht ausfüllen — sie erben Canonical, Seitentitel, Meta Description und og:image. Bei Artikeln schreibt das Tool den Namen als headline. Ergänze Author name, optional Author URL, sowie Published/Modified.
  3. Schau rechts ins generierte <script type="application/ld+json">: Der Autor wird als verschachteltes Person-Objekt geschrieben, das Datum als ISO-8601-Wert mit Zeitzonen-Offset. Fehlt etwas, das Google empfiehlt (etwa ein Bild), steht es in den Hinweisen unter der Ausgabe.
  4. Für eine Navigation nimmst du BreadcrumbList und legst über Add item Name-/URL-Paare an, von der Startseite bis zur aktuellen Seite; die position nummeriert das Tool fortlaufend, nur der letzte Eintrag darf ohne URL bleiben. Eine FAQ baust du mit FAQPage und Add question — rechne dort aber nicht mit Rich Results: Google zeigt sie seit 2023 nur noch für bekannte Behörden- und Gesundheitsseiten, worauf das Tool selbst hinweist.
  5. Kontrolliere das Ergebnis im Preview-Tab unter JSON-LD und teste es nach dem Einbau mit dem dort verlinkten Google Rich Results Test oder dem Schema Markup Validator.

Details zu jedem Schema-Typ und seinen Feldern stehen im Manual unter Structured Data (JSON-LD).

Beispiel 4: Security-Header und Verification-Tags ergänzen

Du willst eine neue Domain bei den Webmaster-Diensten anmelden und ein paar Schutz-Header setzen — und zwar dort, wo sie wirken.

  1. Öffne Verification und füge die Codes ein, die dir Google Search Console, Bing, Pinterest, Yandex oder Meta geben. Hast du den kompletten Tag kopiert (<meta name="google-site-verification" content="…">), füg ihn einfach ganz ein — das Tool nimmt nur den Code. Jeder gefüllte Code erzeugt genau einen <meta>-Tag mit dem passenden name.
  2. Öffne Security und klick für eine schnelle CSP einen der Presets Strict, Moderate oder Loose — der Policy-String erscheint im Feld.
  3. Stell Deliver CSP as auf <meta> tag and HTTP header. Im HTML landet die Policy dann direkt hinter Charset und Viewport. Ein frame-ancestors (etwa aus dem Strict-Preset) nimmt das Tool dort heraus, weil es nur im Header wirkt — der Hinweis unter der Ausgabe sagt dir das.
  4. Wähle bei X-Frame-Options DENY, setz X-Content-Type-Options: nosniff und sperr über die Permissions-Policy (deny)-Checkboxen alles, was deine Seite nicht braucht — etwa camera, microphone, geolocation und browsing-topics. Diese Angaben tauchen bewusst nicht im HTML auf.
  5. Schalte rechts von HTML auf nginx oder Apache. Dort stehen CSP, Referrer-Policy (falls gewählt) und die reinen Header als fertige Konfiguration — add_header … always; bzw. Header always set … im <IfModule mod_headers.c>-Block. Download speichert sie als security-headers.nginx.conf bzw. security-headers.apache.conf. Details im Manual unter Security.
  6. Prüf die Header nach dem Deploy mit dem im Tips-Tab verlinkten SecurityHeaders.com.

Beispiel 5: Performance-Hints und Mobile-Tags

Eine Seite lädt Fonts von einem CDN und soll als Web-App ordentlich auf dem Handy aussehen.

  1. Öffne Resource Hints. Über Add bei preconnect legst du eine Zeile für https://fonts.gstatic.com an und setzt crossorigin auf anonymous. Bei preload lädst du per Add eine Schrift vor: URL eintragen, as = font, type = font/woff2. Das crossorigin ergänzt das Tool bei Fonts selbst, sonst würde der Browser die Datei doppelt laden. Für das wichtigste Bild der Seite (etwa das Hero-Bild) legst du eine zweite preload-Zeile mit as = image und fetchpriority = high an.
  2. Ergänze bei Bedarf dns-prefetch für weitere Drittanbieter-Domains. Trägst du dort eine volle URL mit Pfad ein, kürzt das Tool sie auf den Origin. Jede Zeile lässt sich über das ✕ wieder entfernen.
  3. Öffne Icons, Mobile & App. Trag favicon.ico, SVG icon, apple-touch-icon (180×180) und das Web app manifest ein. Schalte Theme color ein, wähle die Farbe für Light und — falls deine Seite einen Dunkelmodus hat — mit Separate dark-mode color eine zweite für Dark; das Tool schreibt dann zwei theme-color-Tags mit passender media-Abfrage. Setz color-scheme auf light dark.
  4. Für den Start vom Homescreen wählst du bei Standalone web app yes und vergibst einen kurzen Home screen title — der Tips-Tab empfiehlt höchstens 12 Zeichen.
  5. Wenn deine Seite Telefonnummern oder Daten enthält, die Safari nicht automatisch verlinken soll, hakst du unter Turn off automatic linking (Safari) phone numbers bzw. dates an.

Beispiel 6: Generieren, im SEO-Analyzer gegenprüfen

Der ehrlichste Test ist die Praxis: Markup erzeugen, einbauen, an der echten URL prüfen.

  1. Stell im Generator deinen vollständigen Head zusammen (Essential + Open Graph + X Card + JSON-LD) und kopiere ihn in den <head> deiner Seite. Deploye die Änderung.
  2. Öffne den SEO & GEO Analyzer, füge dieselbe URL ein und klick Analyze.
  3. Lies in der SEO-Score-Auswertung ab, ob Prüfungen wie Meta Description (70–160 chars), Open Graph Tags (≥ 4), OG Image und Twitter / X Card jetzt bestanden sind (grünes Häkchen) — und im GEO-Score, ob JSON-LD Present, Schema Variety und Author / Organization Schema zählen.
  4. Bleibt etwas rot, gehst du zurück in den Generator, ergänzt das fehlende Feld und wiederholst den Check.

So wird aus „sieht im Preview gut aus" ein belegter, gemessener Zustand. Wie du den GEO-Teil gezielt heben kannst, steht in den Tipps & Tricks.

Beispiel 7: Sprachversionen per hreflang verknüpfen

Deine Seite gibt es auf Deutsch und Englisch, und Google soll jeder Sprache die richtige Fassung zeigen.

  1. Trag in Essential die Canonical URL der deutschen Seite ein, etwa https://example.com/de/preise/.
  2. Leg unter Language versions (hreflang) per Add language drei Zeilen an: de mit https://example.com/de/preise/, en mit https://example.com/en/pricing/ und x-default mit der Fassung für alle übrigen Sprachen.
  3. Lies die Hinweise unter der Ausgabe: Fehlt die Seite selbst in der Liste, meldet das Tool es; tippst du einen Code wie deutsch oder eine relative URL, lässt es die Zeile weg und sagt dir, warum.
  4. Kopiere den Block und erzeuge anschließend den Head der englischen Seite — mit derselben hreflang-Liste und der englischen Canonical. Daran erinnert dich auch der Hinweis „every listed page must link back with the same set of tags": Nur wenn sich alle Sprachversionen gegenseitig nennen, wertet Google die Angaben aus.

Noch tiefer: das Manual für jedes Feld, die Tipps & Tricks für Strategie und Stolperfallen. Ausprobieren kannst du alles direkt im Tool.