Meta Tags Generator — Manual

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 laid out, what its nine building blocks are, which field produces which <meta> or <link> tag (or HTTP header), how empty fields inherit values, which checks the tool runs, and how you save the result. Tab, section, and button names appear 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 with the HTML | nginx | Apache switch plus Copy, Download, and Reset; below it a read-only editor (ACE) showing the output; and below that the list of checks. On wide screens the panel stays in place while you scroll through the form (sticky).

Each section has an Include in output switch at the top and an on/off badge in its header. Only sections that are switched on end up in the output. By default only Essential is active; the other eight start switched off and collapsed. Switched-off sections are dimmed but stay usable: as soon as you type in one, or add a row with one of its Add buttons, it switches itself on. The hint above the accordion says the same: "Typing in a section switches it on."

The output updates automatically shortly after each edit (debounced, about 0.2 seconds). There's no "generate" button. Within an active section, a field is only output when it has a value — its own or an inherited one (see Inheritance of empty fields). The HTML starts with the comment  and is grouped into comment blocks (,  and so on). If no section is active, or the active ones produce not a single line, it reads . An empty section doesn't always mean empty output: Essential always writes <meta charset>, Open Graph always og:type (default website), X Card always twitter:card, and a switched-on but empty Icons, Mobile & App section still contributes its comment .

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 proxy, no API, and no upload — markup, header snippets, and checks are built entirely in your browser (logic module meta-tags-core.js). Your form state is saved automatically on every change locally in your browser's localStorage (key jpktools_meta_tags) and restored on your next visit; a state saved by the older version of the tool is carried over once. The Reset button clears that local storage again.

There's one exception: the Preview tab loads the images whose URLs you enter for og:image or the X image directly from that server (only http/https, without a referrer). Your form data itself never leaves your device.

Inheritance of empty fields

Many fields depend on each other. Instead of copying values, the tool lets empty fields inherit at output time. The inherited value appears in the empty field as an italic placeholder; as soon as you enter something yourself, your value wins.

Empty field	inherits from
Open Graph URL (`og:url`)	Canonical URL
Open Graph Title (`og:title`)	Page Title
Open Graph Description (`og:description`)	Meta Description
X Title, Description, Image URL	the Open Graph values when Open Graph is active — otherwise Page Title and Meta Description (no image in that case)
JSON-LD URL	Canonical URL
JSON-LD Name / headline	Page Title
JSON-LD Description	Meta Description
JSON-LD Image URL	Open Graph Image URL

Inheritance applies to the output and the preview. The X card adds one twist: with the option Leave out title, description and image when they equal Open Graph (see X (Twitter) Card) the tool omits the inherited twitter: values, because X reads them from Open Graph anyway.

The nine building blocks in detail

Essential

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

Charset — the tool always writes <meta charset="utf-8">; there's no choice, because HTML only allows UTF-8.
Page Title (recommended 50–60 characters) → <title>…</title>. Shows in the browser tab and as the clickable headline in search results. If it's missing, the tool reports "No page title".
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. A relative value is flagged as an error.
Robots — two radio pairs index/noindex and follow/nofollow, checkboxes for noarchive, nosnippet, noimageindex, a max-image-preview select (— default —, large, standard, none), and a max-snippet number field (−1 = no limit, 0 = no snippet) → <meta name="robots" content="…">. Only directives that differ from the default index, follow are written — if everything stays at the default, there's no robots tag at all.
Viewport — width=device-width, initial-scale=1 (recommended), Custom… (free-text field Custom viewport), or Disable zoom (maximum-scale=1 — not accessible) → <meta name="viewport">. If the value blocks zooming (maximum-scale below 2 or user-scalable=no), the tool warns and cites WCAG 1.4.4.
Language versions (hreflang) — a dynamic list via Add language, one language code (de, en-GB, x-default …) and one absolute URL per row → <link rel="alternate" hreflang="…" href="…">. Invalid codes and relative URLs are left out and reported as errors; duplicate codes are reported too.

Checks in this section: noindex together with a canonical URL (contradictory signals), nosnippet together with max-snippet (no effect), a max-snippet value that isn't a whole number of −1 or more (error; the tool then leaves the directive out), an hreflang list that doesn't include the page itself, the suggestion to add an x-default entry, and the reminder that every listed language version has to link back with the same tags.

Open Graph

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

Type — website, article, profile, book, video.movie, music.song → og:type (default website).
URL → og:url (empty = Canonical URL); Title (≤ 95 characters) → og:title (empty = Page Title); Description (≤ 200) → og:description (empty = Meta Description).
Image URL → og:image. Recommended by the tool: 1200×630 px (at least 600×315), JPG/PNG/WebP, ≤ 8 MB, absolute URL. Plus Image width (px)/Image height (px) → og:image:width/:height (whole numbers only) and Image alt text (≤ 420) → og:image:alt. Width, height, and alt text only appear when an image is set.
Site name → og:site_name.
Locale → og:locale — a text field with 13 suggestions (en_US, en_GB, de_DE, de_AT, de_CH, fr_FR, es_ES, it_IT, nl_NL, pl_PL, pt_BR, ja_JP, zh_CN). It's prefilled with en_US — change it for pages in other languages. If the value doesn't match the pattern language_TERRITORY, the tool warns.
Article fields (only with Type = article): Published and Modified (date/time), Author (profile URL), Section, and Tags (comma-separated). The tool turns the comma-separated tags into one article:tag meta each. → article:published_time, article:modified_time, article:author, article:section, article:tag.

Dates and times are written as ISO 8601 with the UTC offset of your browser's time zone for that exact date (daylight saving time included), e.g. 2026-11-01T19:00:00+01:00. The hint below the fields names the detected time zone.

Checks: Open Graph without og:image (shares without a picture), a non-absolute og:image or og:url (error), and missing image dimensions (info: otherwise Facebook only renders the image from the second share on).

X (Twitter) Card

Card type — summary_large_image (large image) or summary (small square image) → twitter:card.
Leave out title, description and image when they equal Open Graph — checkbox, on by default. If Open Graph is active and the X field in question is empty, twitter:title, twitter:description, and twitter:image are dropped, because X falls back to og:title, og:description, and og:image. The block then holds just twitter:card, the handles and — if filled in — twitter:image:alt.
Site @handle and Creator @handle → twitter:site/twitter:creator. The tool normalizes the input: name, @name, https://x.com/name, or twitter.com/name all become @name. If the handle is longer than 15 characters or contains anything other than letters, digits, and _, it warns.
Title (≤ 70) → twitter:title; Description (≤ 200) → twitter:description; Image URL → twitter:image (recommended: large 2:1, e.g. 1200×600; summary 1:1, at least 144×144); Image alt text (≤ 420) → twitter:image:alt.

Checks: summary_large_image without an image, and a relative image URL.

Icons, Mobile & App

favicon.ico → <link rel="icon" href="…" sizes="32x32">.
SVG icon → <link rel="icon" href="…" type="image/svg+xml">.
apple-touch-icon (180×180) → <link rel="apple-touch-icon">.
Web app manifest → <link rel="manifest">.
Theme color (browser UI on mobile) — a switch with a Light colour picker (default #0d6efd) → <meta name="theme-color">. Separate dark-mode color adds a second picker, Dark (default #212529); the tool then writes two theme-color tags with media="(prefers-color-scheme: light)" and dark respectively.
color-scheme — light dark, dark light, light, dark, or only light → <meta name="color-scheme">.
Standalone web app — yes (mobile-web-app-capable) → mobile-web-app-capable and the older iOS variant apple-mobile-web-app-capable. If there's no manifest, a note reminds you.
iOS status bar style — default, black, black-translucent → apple-mobile-web-app-status-bar-style.
Home screen title (counter up to 30) → apple-mobile-web-app-title.
Turn off automatic linking (Safari) — checkboxes for phone numbers, dates, addresses, and e-mail addresses → a single <meta name="format-detection" content="telephone=no, date=no, …">.

Authorship

Author → <meta name="author">; Copyright → <meta name="copyright">; Generator → <meta name="generator">.
Rating (SafeSearch) — adult or the RTA label (RTA-5042-1996-1400-1577-RTA) → <meta name="rating">. According to the tool, Google only understands these two values; they mark pages with adult content.

Security

The section (subtitle "meta + HTTP headers") draws a clear line between what works as <meta> and what only works as an HTTP header. The header parts show up under the nginx and Apache switch in the output panel (see Output, saving, and reset).

Content-Security-Policy — free text with three preset buttons:
- Strict: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'
- Moderate: like Strict, but with 'unsafe-inline' for scripts and styles, images also from https:, fonts also from https://fonts.gstatic.com, and without form-action and frame-ancestors
- Loose: default-src 'self' https: data: 'unsafe-inline'; object-src 'none'
Deliver CSP as — <meta> tag, HTTP header, or <meta> tag and HTTP header. In the <meta> version the tool automatically strips frame-ancestors, report-uri, report-to, and sandbox, because browsers ignore them there, and says so. It places the meta CSP right after charset and viewport (before the <title>), since a meta policy only covers what comes after it.
Referrer-Policy — strict-origin-when-cross-origin (browser default), no-referrer, same-origin, strict-origin, origin, origin-when-cross-origin, no-referrer-when-downgrade, unsafe-url → <meta name="referrer"> and the Referrer-Policy header.
HTTP header only (browsers ignore these in <meta>, so they only appear in the nginx/Apache snippets):
- X-Frame-Options — DENY or SAMEORIGIN (clickjacking protection; the modern equivalent is CSP frame-ancestors).
- X-Content-Type-Options: nosniff — checkbox.
- Permissions-Policy (deny) — checkboxes for camera, microphone, geolocation, payment, usb, browsing-topics (each =()), and fullscreen (self only) (fullscreen=(self)).

CSP checks: unknown directives are reported as warnings, unquoted keywords such as self or none as errors — without quotes they'd be a host name.

Resource Hints

Five dynamic lists, each with its own Add button; the ✕ removes a row again.

preconnect (origin + optional crossorigin: anonymous or use-credentials) → <link rel="preconnect"> (opens DNS, TCP, and TLS early — only for a few critical origins).
dns-prefetch (origin) → <link rel="dns-prefetch"> (DNS resolution only, for less important third parties).
preload (URL, as = font, image, style, script, fetch, or track, optional MIME type, crossorigin, and fetchpriority auto/high/low) → <link rel="preload">. For as="font" and as="fetch" the tool adds crossorigin automatically — otherwise the browser downloads the file twice.
modulepreload (URL) → <link rel="modulepreload"> (fetches and parses a JavaScript module ahead of time).
prefetch (URL) → <link rel="prefetch"> (low priority, for the next navigation).

For preconnect and dns-prefetch only the origin counts: if you include a path, the tool shortens it to https://host and tells you; without a recognizable origin it drops the row. In the output the hints appear in the order dns-prefetch, preconnect, preload, modulepreload, prefetch.

Verification

Domain/ownership confirmations for the webmaster services. You can paste the code or the whole tag the service gives you — the tool pulls the value out of content="…". If the code still contains spaces or tag fragments afterwards, it warns.

Google Search Console → google-site-verification
Bing Webmaster Tools → msvalidate.01
Pinterest → p:domain_verify
Yandex Webmaster → yandex-verification
Facebook (Meta) domain verification → facebook-domain-verification

Structured Data (JSON-LD)

Produces a <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. A < in a value is written as \u003c (and U+2028/U+2029 are escaped too), so a value containing </script> can't close the block. The tool never inserts placeholder data — empty fields stay out.

Schema type — — None —, WebPage, WebSite (site name in Google), Article, BlogPosting, NewsArticle, Organization, LocalBusiness, Person, Product, Event, Recipe, FAQPage, and BreadcrumbList.
Common fields (shown for all types except BreadcrumbList): URL (empty = canonical; a relative URL triggers a warning), Name / headline (empty = Page Title; article types write headline instead of name), Description (empty = Meta Description).
Image URL (article types, Product, Event, Recipe, LocalBusiness, Person; empty = og:image).
WebSite: Alternate name (short name or acronym) → alternateName.
Article / BlogPosting / NewsArticle: Author name and Author URL (→ a nested Person object), Published and Modified (→ datePublished/dateModified with time zone offset).
Recipe: Author name, Published, Prep (min) and Cook (min) (→ prepTime, cookTime, and totalTime as ISO 8601 durations; 90 minutes become PT1H30M), Yield (recipeYield), Ingredients (one per line) (→ recipeIngredient), and Steps (one per line) (→ recipeInstructions made of HowToStep).
Organization / LocalBusiness: @id (relative values such as #organization are resolved against the URL), Logo URL, Address (Street, Postal code, City, Region, Country → PostalAddress), and Contact (Telephone, Contact type, Contact page → ContactPoint; for LocalBusiness the phone number is also written as telephone).
sameAs (profiles elsewhere) (Organization, LocalBusiness, Person): any number of URLs via Add URL; relative URLs are reported.
LocalBusiness additionally: Price range, Opening hours (list via Add hours, format Mo-Fr 09:00-17:00 or Sa 10:00-14:00; other notations are reported), Latitude/Longitude (comma or dot; outside ±90 or ±180 the tool drops the coordinates and reports an error), and Map URL (hasMap).
Person: Job title.
Product: Brand (→ Brand), SKU, Price (comma or dot), Currency (three-letter ISO 4217 code such as EUR), and Availability (In stock, Out of stock, Pre-order, Back order, Limited, Discontinued) → offers of type Offer, with the page URL. Without a valid currency, or with a price that isn't a number, the tool leaves the offer out — there's no default currency.
Event: Start and End, Attendance (On site, Online, On site + online → eventAttendanceMode), Status (Scheduled, Postponed, Rescheduled, Moved online, Cancelled → eventStatus), a Stream URL for the online part (→ VirtualLocation), and Venue name and Address for the on-site part (→ Place). Hybrid events get both locations as a list.
FAQPage: question/answer pairs via Add question → mainEntity made of Question/acceptedAnswer. Pairs missing either the question or the answer are left out with a warning.
BreadcrumbList: entries via Add item (name + URL, from the home page to the current page) → itemListElement made of ListItem with a running position. Only the last entry may omit its URL. The common URL field is hidden for this type, but the tool still writes a url — taken from the canonical URL, or from a value still sitting in the now-hidden URL field (say, from a type you picked earlier).

The tool produces one schema type per run. Missing required and recommended properties (per Google) are reported below the output:

Type	Error (required)	Warning / info (recommended)
Article, BlogPosting, NewsArticle	—	image (warning), `datePublished`, author (info)
LocalBusiness	address	—
Product	price that isn't a number, price without a currency	no product snippets without `offers`
Event	start date; venue address; stream URL for an online part	—
Recipe	image	ingredients and steps (info)
FAQPage	at least one complete pair	incomplete pair (warning); since 2023 Google shows FAQ rich results only for well-known government and health sites (info)
BreadcrumbList	at least one entry; a name per entry; a URL for all but the last	relative URL (warning)

The Preview tab

The Preview tab shows four previews built from the effective values — that is, with the same inheritance as the output:

Google search result — breadcrumb from the host and path of your canonical URL (or og:url instead), title, and description. Like Google, it truncates by pixel width: the title in 20 px Arial at about 600 px, the description in 14 px Arial at about 920 px (desktop), each with " …". A measuring line shows the widths, e.g. "Title 512 px of ~600 · Description 1004 px of ~920 (cut)". Without a description, it notes that Google then picks text from the page itself. Google may also rewrite title and description — the preview is an approximation.
Open Graph card — image area (loads your og:image; placeholder icon for a relative URL or a load error), site name (or the host instead), title, and description.
X card — image, host, title, and description; with card type summary in the compact layout with a small image. Since X no longer offers a card validator, the tool suggests pasting the URL into a new post before publishing.
JSON-LD — the formatted schema, otherwise a hint to switch on structured data and pick a type. Below it, links to the Google Rich Results Test and the Schema Markup Validator.

The preview is computed from the current state when you open the tab, and kept up to date while it's open — you always see your latest input.

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 and Don't lists, a Length guidelines table (recommendation and approximate cut-off per field), and Testing Tools: Google Rich Results Test, Schema Markup Validator, Facebook Sharing Debugger, LinkedIn Post Inspector, SecurityHeaders.com, and the JPKCom Tools SEO Analyzer.
Reference — tables per category (Essential, Open Graph, X Card, Icons/Mobile, Security, Resource Hints, Verification, JSON-LD): which tag, which value, what it means. The security table shows which policy works in <meta> and which only as a header; the JSON-LD table shows what Google requires per type and which rich result it can lead to.

Character limits and convenience features

Length-critical fields carry character counters ("Characters n / maximum") with a progress bar in four colours: green, yellow, orange, and red once the maximum is exceeded. They count visible characters (an emoji counts once); if the field is empty, the inherited value counts. The counters don't hard-limit — you can keep typing. The thresholds from the tool:

Field	recommended	green up to	yellow up to	orange up to	red from
Page Title (`<title>`)	50–60	50	55	60	61
Meta Description	120–160	130	150	160	161
`og:title`	≤ 95	75	85	95	96
`og:description`	≤ 200	160	180	200	201
`og:image:alt`, `twitter:image:alt`	≤ 420	350	400	420	421
`twitter:title`	≤ 70	55	65	70	71
`twitter:description`	≤ 200	160	180	200	201
Home screen title	≤ 12 (Tips tab)	12	20	30	31

Further conveniences: inheritance of empty fields, the CSP presets, sections that switch themselves on when you type, and the checks below the output. These are sorted by severity — errors first, then warnings, then info, each with its own icon — and duplicate messages appear only once.

Output, saving, and reset

HTML | nginx | Apache — switches the editor between the head tags and the header snippets:
- nginx: add_header Name "value" always; for server { … } or location { … }, with the reminder that a location block with its own add_header drops all inherited headers. Values containing $ are left out there with a comment, because nginx expands them as variables and has no escape for them.
- Apache: Header always set Name "value" inside <IfModule mod_headers.c> for a VirtualHost or .htaccess. Percent signs are written as %%, because mod_headers reads % as a format specifier.
- The header snippet carries the CSP (with HTTP header or both), Referrer-Policy, X-Frame-Options, X-Content-Type-Options, and Permissions-Policy. If none of these is selected, it reads # No HTTP headers selected — see the Security section.
Copy — copies the output currently shown to the clipboard.
Download — saves it as meta-tags.html, security-headers.nginx.conf, or security-headers.apache.conf, depending on the view.
Reset — asks "Reset all fields and clear saved data?", then resets every field to its default, empties the dynamic lists, 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.