JPKCom DB

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.

Back to the overview: Meta Tags Generator · Open the tool: 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">.
  • 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. Concrete walkthroughs are in the examples, strategy and pitfalls in the tips & tricks. You can try all of this directly in the tool.