# 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.

Source: https://www.jpkc.com/db/tools/meta-tags/manual/

Zurück zur Übersicht: [Meta Tags Generator](https://www.jpkc.com/db/tools/meta-tags/) · Tool live öffnen: [www.jpkc.com/tools/meta-tags/](https://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">`.

### Authorship & Copyright

- **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](https://www.jpkc.com/db/tools/meta-tags/). Konkrete Durchläufe stehen in den [Beispielen](https://www.jpkc.com/db/tools/meta-tags/examples/), Strategie und Stolperfallen in den [Tipps & Tricks](https://www.jpkc.com/db/tools/meta-tags/tips/). Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/meta-tags/).