# Meta Tags Generator — Manual

> Feature reference for the Meta Tags Generator: all nine sections, every field and its tag, live preview, character limits, plus copy, download, and reset.

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

Back to the overview: [Meta Tags Generator](https://www.jpkc.com/db/en/tools/meta-tags/) · Open the tool: [www.jpkc.com/tools/meta-tags/](https://www.jpkc.com/tools/meta-tags/)

This manual documents the **Meta Tags Generator** in full: how the tool is built, what its nine building blocks are, which field produces which `<meta>` or `<link>` tag, how the live preview works, and how you save the result. The interface is in English, so the tab, section, and button names appear here exactly as you'll see them in the live tool.

## Layout and operation

The tool has four tabs at the top: **Generator**, **Preview**, **Tips**, and **Reference**. All the work happens in the **Generator** tab, which is split in two:

- **On the left** is an accordion with **nine sections** — the thematic tag groups.
- **On the right** is the output panel: an action bar (**Copy**, **Download**, **Reset**) and below it a read-only editor (ACE) showing the generated HTML.

Each section has an **Include in output** switch at the top. Only enabled sections end up in the head. **By default only Essential is active**; the other eight start disabled and collapsed — you enable them as needed.

The output updates **automatically** shortly after each edit (debounced, around 0.3 seconds). There is no "generate" button: you type, and the HTML on the right grows with it. Within an active section, **each field** is output only when it's filled — empty fields produce no tag. The result is grouped into comment blocks (`<!-- === Open Graph === -->` etc.) and carries a header comment with the tool's address.

## Architecture: everything in the browser

Important for both understanding and privacy: the Meta Tags Generator is **purely client-side**. There's **no server round-trip, no API, and no upload** — the markup is assembled entirely in your browser. Your form state is stored only **locally in your browser's `localStorage`** (under a fixed key) and restored automatically on your next visit. None of what you type leaves your device; the tool works offline once loaded. The **Reset** button clears that local storage again.

## The nine building blocks in detail

### Essential

The mandatory tags for every page — the only section active by default.

- **Charset** — choose `UTF-8` (recommended), `ISO-8859-1`, or `Windows-1252` → `<meta charset="…">`.
- **Page Title** — recommended range 50–60 characters (input up to 200) → `<title>…</title>`. Shows in the browser tab and as the clickable headline in search results.
- **Meta Description** — recommended 120–160 characters → `<meta name="description">`. Not a ranking factor, but it affects click-through rate in the snippet.
- **Canonical URL** → `<link rel="canonical">`. Points to the preferred URL and prevents duplicate content.
- **Robots Directives** — checkboxes for `index`, `noindex`, `follow`, `nofollow`, `noarchive`, `nosnippet`, `noimageindex` → `<meta name="robots" content="…">`. Default: `index` + `follow`.
- **Viewport** — `Standard` (`width=device-width, initial-scale=1`), `No zoom` (adds `maximum-scale=1`), or `Custom…` (free text) → `<meta name="viewport">`.

As long as Essential is active, the tool also emits the legacy tag `<meta http-equiv="X-UA-Compatible" content="IE=edge">`.

### Open Graph

The `og:` tags for preview cards on Facebook, LinkedIn, and WhatsApp.

- **Type** — `website`, `article`, `book`, `profile`, `music.song`, `video.movie` → `og:type`.
- **URL** → `og:url`; **Title** (≤ 95 characters) → `og:title`; **Description** (≤ 200) → `og:description`.
- **Image URL** → `og:image`; plus **Width**/**Height** (px) → `og:image:width`/`:height` and **Image Alt** (≤ 420) → `og:image:alt`. Recommended by the tool: 1200×630 px, minimum 600×315 px, ≤ 8 MB, JPG/PNG.
- **Site Name** → `og:site_name`; **Locale** (e.g. `en_US`, `de_DE`, nine options) → `og:locale`.
- **Article fields** (appear only with `Type = article`): Published Time, Modified Time, Author (URL or name), Section, and Tags. You enter tags comma-separated; the tool produces **one** `article:tag` meta per tag. → `article:published_time`, `article:modified_time`, `article:author`, `article:section`, `article:tag`.

### Twitter / X Card

- **Card Type** — `summary_large_image` (large image), `summary` (small square image), `app`, `player` → `twitter:card`.
- **Site @handle** and **Creator @handle** → `twitter:site`/`twitter:creator`. Type the name without `@` and the tool adds it automatically.
- **Title** (≤ 70) → `twitter:title`; **Description** (≤ 200) → `twitter:description`; **Image URL** → `twitter:image`; **Image Alt** (≤ 420) → `twitter:image:alt`.

### Mobile & App

- **Theme Color** — colour picker with its own **Enable** switch → `<meta name="theme-color">` (browser UI colour on mobile Chrome/Edge).
- **apple-mobile-web-app-capable** — `yes`/`no` → the same-named 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">` (recommended 180×180 px PNG).
- **MS Tile Color** — colour picker with Enable → `msapplication-TileColor`.
- **format-detection: telephone** — `yes` (default, no tag) or `no` → `<meta name="format-detection" content="telephone=no">`.

### Authorship & Copyright

- **Author** → `<meta name="author">`; **Copyright** → `<meta name="copyright">`; **Generator** → `<meta name="generator">`.
- **Revisit After** — number plus unit (`days`/`weeks`/`months`) → `revisit-after` (a hint mostly ignored by search engines today).
- **Rating** — `general`/`mature`/`restricted` → `<meta name="rating">`.
- **Classification** → `<meta name="classification">`.

### Security Headers

Security headers as `<meta http-equiv>`. Note the warning in the tool: **CSP via `<meta>` is limited — as a real HTTP header the policy is more effective.**

- **Content-Security-Policy** — free text with three preset buttons **Strict**, **Moderate**, **Loose** that insert ready-made policy strings (Strict is `default-src 'self'`-based with `frame-ancestors 'none'`; Loose allows `https:`, `'unsafe-inline'`, `'unsafe-eval'`). → `<meta http-equiv="Content-Security-Policy">`.
- **X-Frame-Options** — `DENY`, `SAMEORIGIN`, or `ALLOW-FROM` (with a URL field) → the same-named tag (clickjacking protection).
- **Referrer-Policy** — eight values from `no-referrer` to `strict-origin-when-cross-origin` and `unsafe-url` → `<meta name="referrer">`.
- **Permissions-Policy (deny)** — checkboxes for `camera`, `microphone`, `geolocation`, `fullscreen` (self), and `payment` → `<meta http-equiv="Permissions-Policy" content="camera=(), …">`.

### Performance & Resource Hints

Here you add as many lines as you like via **Add** buttons; the ✕ removes a line again.

- **dns-prefetch** (URL) → `<link rel="dns-prefetch">` (resolves DNS for third-party domains early).
- **preconnect** (URL + optional `crossorigin`) → `<link rel="preconnect">` (establishes TCP+TLS early).
- **preload** (URL + `as` type font/script/style/image/fetch/document + optional MIME `type` + optional `crossorigin`) → `<link rel="preload">`.
- **prefetch** (URL) → `<link rel="prefetch">` (for the next navigation).

### Verification Tags

Domain/ownership confirmations for the webmaster services:

- **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)

Produces a complete `<script type="application/ld+json">` with `@context: https://schema.org`. At the top you pick the **Schema Type**; depending on your choice the tool reveals the matching fields.

- **Schema Type** — `None`, `WebPage`, `Article`, `BlogPosting`, `NewsArticle`, `Organization`, `Person`, `Product`, `FAQPage`, `BreadcrumbList`, `LocalBusiness`, `Event`, and `Recipe`.
- **Common** (all types except `None`): `url`, `name`, `description`.
- **Article / BlogPosting / NewsArticle**: Author Name (becomes a nested `Person` object), Published, and Modified.
- **Organization / LocalBusiness**: `@id`, logo URL, an address (street, locality, region, postal code, country → `PostalAddress`), a contact point (type, telephone, URL → `ContactPoint`), and any number of **sameAs** URLs.
- **LocalBusiness** additionally: price range, opening hours (dynamic rows), geo coordinates (lat/lng → `GeoCoordinates`), and a map URL.
- **Person**: job title.
- **Product**: brand (→ `Brand`), SKU, price, and currency (default `USD`) → an `offers` object of type `Offer`.
- **Event**: start and end date plus location (→ `Place`).
- **FAQPage**: question/answer pairs (dynamic) → `mainEntity` of `Question`/`acceptedAnswer`. With no input the tool inserts a sample pair.
- **BreadcrumbList**: name/URL pairs (dynamic) → `itemListElement` of `ListItem` with a running `position`.

A note on accuracy: `Recipe` is in the dropdown but has no fields of its own — it produces only the common properties. The field set therefore varies by type.

## The Preview tab

The **Preview** tab shows four previews rendered from your input:

- **Google SERP Preview** — breadcrumb from the host (and path) of your canonical URL, title (truncated to ~70 characters), description (~200). Note in the tool: Google sometimes rewrites titles and descriptions — the preview is an approximation.
- **Open Graph Card** — image area (loads your `og:image`, fallback icon on load error), site name, title (~95), description (~200).
- **Twitter / X Card** — image (hidden for card type `summary`), `@handle`, title (~70), description (~200), and a badge with the card type.
- **JSON-LD Preview** — the formatted schema, or a placeholder until structured data is configured.

The previews use **fallback chains**: if there's no `og:title`, the OG card falls back to the `<title>`; the Twitter card takes `twitter:title`, else `og:title`, else `<title>` (likewise for description and image). Practical note: the preview is recomputed **when you switch to the Preview tab**, not live while you type in the Generator — after changes, briefly switch to another tab and back.

## Tips and Reference tabs

Two reference tabs round out the tool and work without any input:

- **Tips** — a **Priority Guide** table (Must Have / Important / Recommended / Optional), do/don't lists, a **Character Limits** table, and links to testing tools (Google Rich Results Test, Twitter Card Validator, Facebook Sharing Debugger, OGP.me, SecurityHeaders.com).
- **Reference** — full tables per category: which tag, which attribute, which format, which meaning.

## Character limits and convenience features

Length-critical fields carry **char counters with a traffic-light colour** (green → yellow → orange → red when exceeded). The target values from the tool:

| Field | recommended | 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 |

Two convenience automations save typing: when you fill in **Title**, **Description**, and **Canonical**, the tool carries those values into the JSON-LD (`name`, `description`, `url`) and the canonical additionally into `og:url` — each only while the target field is still empty. The **CSP presets** set a ready-made policy with one click.

## Output, saving, and reset

- **Copy** — copies all generated HTML to the clipboard.
- **Download** — saves it as a file named **`meta-tags.html`**.
- **Reset** — asks for confirmation, then resets all fields to defaults, clears the dynamic rows, re-enables only **Essential**, and clears the local storage.
- **Persistence** — without a reset, your state stays in `localStorage` and is back the next time you open the tool.

For the starting point, the audiences, and the big picture, see the [overview page](https://www.jpkc.com/db/en/tools/meta-tags/). Concrete walkthroughs are in the [examples](https://www.jpkc.com/db/en/tools/meta-tags/examples/), strategy and pitfalls in the [tips & tricks](https://www.jpkc.com/db/en/tools/meta-tags/tips/). You can try all of this directly in the [tool](https://www.jpkc.com/tools/meta-tags/).