JPKCom DB

Meta Tags Generator — Anwendungsbeispiele

Praxisnahe Durchläufe mit dem Meta Tags Generator: Basis-Head für eine neue Seite, Artikel mit Open Graph und Twitter Card, JSON-LD, Security-Header und Verification.

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.
  2. Lass Charset auf UTF-8 und Viewport auf Standard.
  3. Tippe einen Page Title. Achte auf den Char-Counter: Bleibt er grün, liegst du im Korridor 50–60 Zeichen; läuft er orange/rot, kürzt Google deinen Titel später ab.
  4. Schreib eine Meta Description zwischen 120 und 160 Zeichen — der Counter führt dich.
  5. Trag die Canonical URL ein (absolut, mit https://). Praktisch: Das Tool übernimmt sie automatisch in spätere JSON-LD- und og:url-Felder.
  6. Lass bei Robots Directives index + follow gesetzt. Rechts steht jetzt dein vollständiger Essential-Block.
  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 Twitter Card

Ein Blogpost soll beim Teilen auf Social Media gut aussehen.

  1. Schalte die Sektion Open Graph über ihren Include in output-Schalter ein.
  2. Setz Type auf article. Jetzt erscheinen die Article-Felder: Published Time, Modified Time, Author, Section und Tags.
  3. Füll Title, Description und vor allem Image URL aus — als absolute URL. Trag Width 1200 und Height 630 ein (die vom Tool empfohlene Größe) und einen Image Alt-Text.
  4. Ergänze Site Name und Locale (z. B. de_DE). Bei den Article-Feldern setzt du Veröffentlichungsdatum, Autor, Rubrik und kommagetrennte Tags — daraus macht das Tool je ein eigenes article:tag.
  5. Schalte zusätzlich Twitter / X Card ein, wähle summary_large_image und trag @site- und @creator-Handle ein (das @ ergänzt das Tool automatisch). Title, Description und Bild kannst du knapper halten als bei OG.
  6. Wechsle in den Preview-Tab und prüfe Open Graph Card und Twitter / X Card. Fehlt ein Twitter-Titel, zeigt die Vorschau den OG-Titel als Fallback — im Markup steht dann aber nichts; setz die Felder, die du wirklich ausgeben willst.

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. Schalte Structured Data (JSON-LD) ein und wähle bei Schema Type z. B. Article.
  2. Die Common-Felder url, name und description sind oft schon vorausgefüllt — das Tool hat sie aus Title, Description und Canonical übernommen. Ergänze bei den Article-Feldern Author Name sowie Published/Modified.
  3. Schau rechts ins generierte <script type="application/ld+json">: Der Autor wird automatisch als verschachteltes Person-Objekt geschrieben, das Datum als ISO-Wert.
  4. Für eine FAQ wählst du stattdessen FAQPage und legst über Add Question Frage-/Antwort-Paare an — das Tool baut daraus die mainEntity-Liste. Für eine Navigation nimmst du BreadcrumbList und trägst Name-/URL-Paare ein; die position nummeriert das Tool fortlaufend.
  5. Kontrolliere das Ergebnis im Preview-Tab unter JSON-LD Preview und teste es nach dem Einbau mit dem im Tips-Tab verlinkten Google Rich Results Test.

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.

  1. Schalte Verification Tags ein und trag die Codes ein, die dir Google Search Console, Bing, Pinterest, Yandex oder Facebook geben. Jeder gefüllte Code erzeugt genau einen <meta>-Tag mit dem passenden name.
  2. Schalte Security Headers ein. Für eine schnelle CSP klickst du einen der Presets Strict, Moderate oder Loose — der passende Policy-String erscheint im Feld und im Output.
  3. Beachte den Hinweis im Tool: Eine CSP per <meta> ist eingeschränkt. Nutze sie zum Ausprobieren; produktiv gehört die Policy in einen echten HTTP-Header (Apache/Nginx). Siehe dazu das Manual unter Security Headers.
  4. Optional sperrst du über die Permissions-Policy-Checkboxen Kamera, Mikrofon, Geolocation, Fullscreen und Payment, wenn deine Seite sie nicht braucht.

Beispiel 5: Performance-Hints und Mobile-Tags

Eine Seite lädt Fonts von einem CDN und soll als PWA ordentlich auf dem iPhone aussehen.

  1. Schalte Performance & Resource Hints ein. Über Add preconnect legst du eine Zeile für https://fonts.gstatic.com an und setzt crossorigin auf anonymous. Mit Add preload lädst du eine Schrift vor: URL eintragen, as = font, type = font/woff2, crossorigin = anonymous.
  2. Ergänze bei Bedarf dns-prefetch für weitere Drittanbieter-Domains. Jede Zeile lässt sich über das ✕ wieder entfernen.
  3. Schalte Mobile & App ein. Aktiviere Theme Color über den Enable-Schalter und wähle eine Farbe; trag einen apple-touch-icon (180×180 px PNG) und einen kurzen App Title (≤ 30 Zeichen) ein.
  4. Wenn deine Seite Telefonnummern enthält, die der Browser nicht automatisch verlinken soll, stellst du format-detection: telephone auf no.

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 + Twitter + 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, OG Image und Twitter / X Card jetzt pass sind — 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.

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