JPKCom DB

Meta Tags Generator — Manual

Funktionsbeschreibung des Meta Tags Generators: alle neun Sektionen, jedes Feld und sein Tag, Live-Vorschau, Zeichenlimits sowie Copy, Download und Reset.

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

Dieses Manual beschreibt den Meta Tags Generator vollständig: wie das Tool aufgebaut ist, welche neun Bausteine es gibt, welches Feld welchen <meta>- oder <link>-Tag erzeugt, wie die Live-Vorschau funktioniert und wie du das Ergebnis speicherst. Die Oberfläche ist auf Englisch — die Tab-, Sektions- und Button-Bezeichnungen stehen deshalb in ihrer englischen Original-Schreibweise (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Aufbau und Bedienung

Das Tool hat oben vier Tabs: Generator, Preview, Tips und Reference. Die ganze Arbeit passiert im Generator-Tab, der zweigeteilt ist:

  • Links liegt ein Akkordeon mit neun Sektionen — den thematischen Tag-Gruppen.
  • Rechts liegt das Output-Panel: eine Aktionsleiste (Copy, Download, Reset) und darunter ein schreibgeschützter Editor (ACE), der das generierte HTML zeigt.

Jede Sektion trägt oben einen Schalter Include in output („in die Ausgabe aufnehmen"). Nur eingeschaltete Sektionen landen im Head. Voreingestellt ist allein Essential aktiv; die übrigen acht Sektionen sind anfangs deaktiviert und eingeklappt — du schaltest sie nach Bedarf zu.

Der Output aktualisiert sich automatisch kurz nach jeder Eingabe (entprellt, rund 0,3 Sekunden). Es gibt keinen „Generieren"-Knopf: Du tippst, und das HTML rechts wächst mit. Innerhalb einer aktiven Sektion wird jedes Feld einzeln nur dann ausgegeben, wenn es gefüllt ist — leere Felder erzeugen keinen Tag. Das Ergebnis ist in Kommentar-Blöcke gegliedert (<!-- === Open Graph === --> usw.) und trägt oben einen Hinweiskommentar mit der Tool-Adresse.

Architektur: alles im Browser

Wichtig für Verständnis und Datenschutz: Der Meta Tags Generator ist rein clientseitig. Es gibt keinen Server-Roundtrip, kein API und keinen Upload — das Markup wird vollständig in deinem Browser zusammengebaut. Dein Formularstand wird ausschließlich lokal im localStorage deines Browsers gespeichert (unter einem festen Schlüssel) und beim nächsten Besuch automatisch wiederhergestellt. Nichts, was du eintippst, verlässt dein Gerät; das Tool funktioniert nach dem Laden auch offline. Der Reset-Button löscht diesen lokalen Speicher wieder.

Die neun Bausteine im Detail

Essential

Die Pflicht-Tags jeder Seite — als einzige Sektion per Voreinstellung aktiv.

  • Charset — Auswahl UTF-8 (empfohlen), ISO-8859-1 oder Windows-1252 → <meta charset="…">.
  • Page Title — empfohlener Korridor 50–60 Zeichen (Eingabe bis 200) → <title>…</title>. Erscheint im Browser-Tab und als anklickbare Überschrift im Suchergebnis.
  • Meta Description — empfohlen 120–160 Zeichen → <meta name="description">. Kein Ranking-Faktor, beeinflusst aber die Klickrate im Snippet.
  • Canonical URL → <link rel="canonical">. Zeigt auf die bevorzugte URL und beugt Duplicate Content vor.
  • Robots Directives — Checkboxen für index, noindex, follow, nofollow, noarchive, nosnippet, noimageindex → <meta name="robots" content="…">. Default: index + follow.
  • Viewport — Standard (width=device-width, initial-scale=1), No zoom (zusätzlich maximum-scale=1) oder Custom… (Freitext) → <meta name="viewport">.

Solange Essential aktiv ist, gibt das Tool zusätzlich den Legacy-Tag <meta http-equiv="X-UA-Compatible" content="IE=edge"> mit aus.

Open Graph

Die og:-Tags für Vorschaukarten auf Facebook, LinkedIn und WhatsApp.

  • Type — website, article, book, profile, music.song, video.movie → og:type.
  • URL → og:url; Title (≤ 95 Zeichen) → og:title; Description (≤ 200) → og:description.
  • Image URL → og:image; dazu Width/Height (px) → og:image:width/:height und Image Alt (≤ 420) → og:image:alt. Empfohlen laut Tool: 1200×630 px, mindestens 600×315 px, ≤ 8 MB, JPG/PNG.
  • Site Name → og:site_name; Locale (z. B. en_US, de_DE, neun Optionen) → og:locale.
  • Article-Felder (erscheinen nur bei Type = article): Published Time, Modified Time, Author (URL oder Name), Section und Tags. Die Tags trägst du kommagetrennt ein; das Tool erzeugt daraus je ein article:tag-Meta. → article:published_time, article:modified_time, article:author, article:section, article:tag.

Twitter / X Card

  • Card Type — summary_large_image (großes Bild), summary (kleines quadratisches Bild), app, player → twitter:card.
  • Site @handle und Creator @handle → twitter:site/twitter:creator. Tippst du den Namen ohne @, ergänzt das Tool das @ automatisch.
  • Title (≤ 70) → twitter:title; Description (≤ 200) → twitter:description; Image URL → twitter:image; Image Alt (≤ 420) → twitter:image:alt.

Mobile & App

  • Theme Color — Farbwähler mit eigenem Enable-Schalter → <meta name="theme-color"> (Browser-UI-Farbe auf mobilem Chrome/Edge).
  • apple-mobile-web-app-capable — yes/no → gleichnamiger Tag.
  • Status Bar Style — default/black/black-translucent → apple-mobile-web-app-status-bar-style.
  • App Title (≤ 30) → apple-mobile-web-app-title.
  • apple-touch-icon URL → <link rel="apple-touch-icon"> (empfohlen 180×180 px PNG).
  • MS Tile Color — Farbwähler mit Enable → msapplication-TileColor.
  • format-detection: telephone — yes (Default, kein Tag) oder no → <meta name="format-detection" content="telephone=no">.
  • Author → <meta name="author">; Copyright → <meta name="copyright">; Generator → <meta name="generator">.
  • Revisit After — Zahl plus Einheit (days/weeks/months) → revisit-after (ein von Suchmaschinen heute meist ignorierter Hinweis).
  • Rating — general/mature/restricted → <meta name="rating">.
  • Classification → <meta name="classification">.

Security Headers

Sicherheits-Header als <meta http-equiv>. Beachte den Hinweis im Tool: CSP per <meta> ist eingeschränkt — als echter HTTP-Header ist die Policy wirksamer.

  • Content-Security-Policy — Freitext mit drei Preset-Buttons Strict, Moderate, Loose, die fertige Policy-Strings einsetzen (Strict z. B. default-src 'self'-basiert mit frame-ancestors 'none'; Loose erlaubt https:, 'unsafe-inline', 'unsafe-eval'). → <meta http-equiv="Content-Security-Policy">.
  • X-Frame-Options — DENY, SAMEORIGIN oder ALLOW-FROM (mit URL-Feld) → gleichnamiger Tag (Schutz vor Clickjacking).
  • Referrer-Policy — acht Werte von no-referrer bis strict-origin-when-cross-origin und unsafe-url → <meta name="referrer">.
  • Permissions-Policy (deny) — Checkboxen für camera, microphone, geolocation, fullscreen (self) und payment → <meta http-equiv="Permissions-Policy" content="camera=(), …">.

Performance & Resource Hints

Hier fügst du beliebig viele Zeilen über Add-Buttons hinzu; das ✕ entfernt eine Zeile wieder.

  • dns-prefetch (URL) → <link rel="dns-prefetch"> (löst DNS für Drittanbieter-Domains früh auf).
  • preconnect (URL + optionaler crossorigin) → <link rel="preconnect"> (baut TCP+TLS früh auf).
  • preload (URL + as-Typ font/script/style/image/fetch/document + optionaler MIME-type + optionaler crossorigin) → <link rel="preload">.
  • prefetch (URL) → <link rel="prefetch"> (für die nächste Navigation).

Verification Tags

Domain-/Besitz-Bestätigungen der Webmaster-Dienste:

  • Google Search Console → google-site-verification
  • Bing Webmaster Tools → msvalidate.01
  • Pinterest → p:domain_verify
  • Yandex Webmaster → yandex-verification
  • Facebook Domain Verification → facebook-domain-verification

Structured Data (JSON-LD)

Erzeugt ein vollständiges <script type="application/ld+json"> mit @context: https://schema.org. Oben wählst du den Schema Type; je nach Auswahl blendet das Tool die passenden Felder ein.

  • Schema Type — None, WebPage, Article, BlogPosting, NewsArticle, Organization, Person, Product, FAQPage, BreadcrumbList, LocalBusiness, Event und Recipe.
  • Common (alle Typen außer None): url, name, description.
  • Article / BlogPosting / NewsArticle: Author Name (wird zu einem verschachtelten Person-Objekt), Published und Modified.
  • Organization / LocalBusiness: @id, Logo-URL, eine Adresse (Straße, Ort, Region, PLZ, Land → PostalAddress), ein Contact Point (Typ, Telefon, URL → ContactPoint) und beliebig viele sameAs-URLs.
  • LocalBusiness zusätzlich: Price Range, Opening Hours (dynamische Zeilen), Geo-Koordinaten (Lat/Lng → GeoCoordinates) und eine Map-URL.
  • Person: Job Title.
  • Product: Brand (→ Brand), SKU, Price und Currency (Default USD) → ein offers-Objekt vom Typ Offer.
  • Event: Start- und End-Datum sowie Location (→ Place).
  • FAQPage: Frage-/Antwort-Paare (dynamisch) → mainEntity aus Question/acceptedAnswer. Ohne Eingabe setzt das Tool ein Beispiel-Paar.
  • BreadcrumbList: Name-/URL-Paare (dynamisch) → itemListElement aus ListItem mit fortlaufender position.

Hinweis zur Faktentreue: Recipe steht im Dropdown, hat aber keine eigenen Felder — es erzeugt nur die Common-Eigenschaften. Der Feld-Umfang variiert also je Typ.

Der Preview-Tab

Der Preview-Tab zeigt vier Vorschauen, die aus deinen Eingaben gerendert werden:

  • Google SERP Preview — Breadcrumb aus dem Host (und Pfad) deiner Canonical-URL, Titel (auf ~70 Zeichen gekürzt), Description (~200). Hinweis im Tool: Google schreibt Titel und Description gelegentlich um — die Vorschau ist eine Näherung.
  • Open Graph Card — Bildfläche (lädt deine og:image, Fallback-Icon bei Ladefehler), Site-Name, Titel (~95), Description (~200).
  • Twitter / X Card — Bild (bei Card-Typ summary ausgeblendet), @handle, Titel (~70), Description (~200) und ein Badge mit dem Card-Typ.
  • JSON-LD Preview — das formatierte Schema oder ein Platzhalter, solange Structured Data nicht konfiguriert ist.

Die Vorschauen nutzen Fallback-Ketten: Fehlt etwa ein og:title, greift die OG-Karte auf den <title> zurück; die Twitter-Karte nimmt twitter:title, sonst og:title, sonst <title> (analog für Description und Bild). Praktischer Hinweis: Die Vorschau wird beim Wechsel auf den Preview-Tab neu berechnet, nicht live während des Tippens im Generator — nach Änderungen also kurz auf einen anderen Tab und wieder zurück.

Tips- und Reference-Tab

Zwei Nachschlage-Tabs runden das Tool ab und funktionieren ohne Eingabe:

  • Tips — eine Priority Guide-Tabelle (Must Have / Important / Recommended / Optional), Do-/Don't-Listen, eine Character-Limits-Tabelle und Links zu Test-Werkzeugen (Google Rich Results Test, Twitter Card Validator, Facebook Sharing Debugger, OGP.me, SecurityHeaders.com).
  • Reference — vollständige Tabellen je Kategorie: welcher Tag, welches Attribut, welches Format, welche Bedeutung.

Zeichenlimits und Komfortfunktionen

An den längenkritischen Feldern sitzen Char-Counter mit Farbampel (grün → gelb → orange → rot bei Überschreitung). Die Zielwerte aus dem Tool:

Feld empfohlen Counter-Maximum
<title> 50–60 60
Meta Description 120–160 160
og:title ≤ 95 95
og:description ≤ 200 200
og:image:alt ≤ 420 420
twitter:title ≤ 70 70
twitter:description ≤ 200 200
App Title ≤ 30 30

Zwei Komfort-Automatiken sparen Tipparbeit: Beim Ausfüllen von Title, Description und Canonical übernimmt das Tool diese Werte automatisch ins JSON-LD (name, description, url) und die Canonical zusätzlich in og:url — jeweils nur, solange das Zielfeld noch leer ist. Die CSP-Presets setzen mit einem Klick eine fertige Policy.

Output, Speichern und Zurücksetzen

  • Copy — kopiert das gesamte generierte HTML in die Zwischenablage.
  • Download — speichert es als Datei meta-tags.html.
  • Reset — fragt zur Sicherheit nach und setzt danach alle Felder auf die Voreinstellungen zurück, leert die dynamischen Zeilen, aktiviert wieder nur Essential und löscht den lokalen Speicher.
  • Persistenz — ohne Reset bleibt dein Stand im localStorage erhalten und ist beim nächsten Öffnen wieder da.

Für den Einstieg, die Zielgruppen und das große Bild siehe die Übersichtsseite. Konkrete Durchläufe stehen in den Beispielen, Strategie und Stolperfallen in den Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.