JPKCom DB

Meta Tags Generator — Examples

Hands-on Meta Tags Generator walkthroughs: base head, article with Open Graph and X Card, JSON-LD, security headers for nginx/Apache, hreflang.

Back to the overview: Meta Tags Generator · Open the tool: www.jpkc.com/tools/meta-tags/

The manual explains every section and field in detail. This page complements it with concrete workflows: typical tasks played out step by step, focused on which building blocks you enable and how you read the result. Section and button names appear exactly as you'll see them in the live tool.

Example 1: The base head for a new page

The most common case — you need a clean set of mandatory head tags fast.

  1. Open the generator. Essential is already active; leave the other sections off for now. <meta charset="utf-8"> and the viewport width=device-width, initial-scale=1 are already in the output.
  2. Type a Page Title. Watch the character counter: the bar stays green up to 50 characters and turns yellow, then orange up to 60 — that's still the recommended range; red means you're past 60. Whether Google actually truncates is something the Preview tab tells you later, because it measures pixel width.
  3. Write a Meta Description between 120 and 160 characters — the counter guides you.
  4. Enter the Canonical URL (absolute, with https://). Handy: og:url and the JSON-LD URL inherit it automatically later, as long as you don't enter anything of your own there.
  5. Leave the Robots radios on index and follow. Since that's the default, the tool writes no robots tag at all — exactly as it should. Your complete Essential block is now on the right.
  6. Glance at the checks below the output: once nothing is listed there any more, the block is complete.
  7. Click Copy and paste the HTML into your page's <head> — or Download for the meta-tags.html file.

That's the mandatory kit. Everything else builds on top of it.

Example 2: An article page with Open Graph and X Card

A blog post should look good when shared on social media.

  1. Open the Open Graph section. As soon as you enter something there, it switches itself on (badge on).
  2. Set Type to article. Now the article fields appear: Published, Modified, Author (profile URL), Section, and Tags.
  3. You can leave Title and Description empty — they inherit the page title and meta description from Essential (visible as an italic placeholder). Only enter your own text if the social version should read differently. What matters is the Image URL — as an absolute URL. Enter Image width 1200 and Image height 630 (the size the tool recommends) and an Image alt text.
  4. Add a Site name and check Locale: it's prefilled with en_US, so for a British site switch it to en_GB (or de_DE for a German one). In the article fields, set the publication date, author profile, section, and comma-separated Tags — the tool turns each into its own article:tag. Times automatically get the UTC offset of your time zone, in London for instance +01:00 in summer and +00:00 in winter.
  5. Also open X (Twitter) Card, keep summary_large_image, and enter the @site and @creator handles — name, @name, or the profile URL https://x.com/name all work. Leave the option Leave out title, description and image when they equal Open Graph on: the X block then contains only twitter:card and the handles, because X reads title, description, and image from Open Graph. If you want different text for X, enter it in the X fields — then it appears as twitter: tags.
  6. Switch to the Preview tab and check the Open Graph card and X card. The preview uses the same inherited values as the output — what you see there is also in the markup.

This gives you a complete social preview that works on Facebook, LinkedIn, WhatsApp, and X.

Example 3: Building structured data with JSON-LD

You want to prepare for rich results without hand-typing Schema.org syntax.

  1. Open Structured Data (JSON-LD) and pick a Schema type, e.g. Article.
  2. You don't have to fill in URL, Name / headline, Description, or Image URL — they inherit the canonical, page title, meta description, and og:image. For articles the tool writes the name as headline. Add the Author name, optionally an Author URL, and Published/Modified.
  3. Look at the generated <script type="application/ld+json"> on the right: the author is written as a nested Person object, the date as an ISO 8601 value with a time zone offset. If something Google recommends is missing (an image, say), it shows up in the checks below the output.
  4. For navigation, use BreadcrumbList and add name/URL pairs via Add item, from the home page to the current page; the tool numbers the position automatically, and only the last entry may go without a URL. You build an FAQ with FAQPage and Add question — but don't count on rich results there: since 2023 Google shows them only for well-known government and health sites, as the tool itself points out.
  5. Check the result in the Preview tab under JSON-LD, and after deployment test it with the Google Rich Results Test or the Schema Markup Validator linked there.

Details on each schema type and its fields are in the manual under Structured Data (JSON-LD).

Example 4: Adding security headers and verification tags

You want to register a new domain with the webmaster services and set a few protective headers — in the place where they actually take effect.

  1. Open Verification and paste the codes Google Search Console, Bing, Pinterest, Yandex, or Meta give you. If you copied the whole tag (<meta name="google-site-verification" content="…">), just paste it as is — the tool takes only the code. Each filled code produces exactly one <meta> tag with the right name.
  2. Open Security and, for a quick CSP, click one of the presets Strict, Moderate, or Loose — the policy string appears in the field.
  3. Set Deliver CSP as to <meta> tag and HTTP header. In the HTML the policy now sits right after charset and viewport. A frame-ancestors (from the Strict preset, for instance) is taken out there because it only works in the header — the note below the output tells you so.
  4. Pick DENY for X-Frame-Options, tick X-Content-Type-Options: nosniff, and use the Permissions-Policy (deny) checkboxes to block everything your page doesn't need — camera, microphone, geolocation, and browsing-topics, for example. None of this appears in the HTML, on purpose.
  5. On the right, switch from HTML to nginx or Apache. There you'll find the CSP, the Referrer-Policy (if chosen), and the header-only settings as a ready-made configuration — add_header … always; or Header always set … inside an <IfModule mod_headers.c> block. Download saves it as security-headers.nginx.conf or security-headers.apache.conf. Details in the manual under Security.
  6. After deploying, check the headers with SecurityHeaders.com, linked in the Tips tab.

Example 5: Performance hints and mobile tags

A page loads fonts from a CDN and should look right as a web app on a phone.

  1. Open Resource Hints. Use Add under preconnect to create a row for https://fonts.gstatic.com and set crossorigin to anonymous. Under preload, click Add to preload a font: enter the URL, as = font, type = font/woff2. The tool adds crossorigin for fonts by itself — otherwise the browser would download the file twice. For the page's most important image (the hero image, say), add a second preload row with as = image and fetchpriority = high.
  2. Add dns-prefetch for further third-party domains if needed. If you enter a full URL with a path there, the tool shortens it to the origin. Each row can be removed again via the ✕.
  3. Open Icons, Mobile & App. Enter favicon.ico, SVG icon, apple-touch-icon (180×180), and the Web app manifest. Switch on Theme color, pick the Light colour and — if your site has a dark mode — a second one for Dark via Separate dark-mode color; the tool then writes two theme-color tags with the matching media query. Set color-scheme to light dark.
  4. For launching from the home screen, choose yes under Standalone web app and give it a short Home screen title — the Tips tab recommends 12 characters at most.
  5. If your page contains phone numbers or dates that Safari shouldn't turn into links, tick phone numbers or dates under Turn off automatic linking (Safari).

Example 6: Generate, then verify in the SEO Analyzer

The most honest test is practice: produce the markup, deploy it, check the real URL.

  1. Assemble your full head in the generator (Essential + Open Graph + X Card + JSON-LD) and paste it into your page's <head>. Deploy the change.
  2. Open the SEO & GEO Analyzer, paste the same URL, and click Analyze.
  3. In the SEO Score breakdown, read whether checks like Meta Description (70–160 chars), Open Graph Tags (≥ 4), OG Image, and Twitter / X Card now pass (green check mark) — and in the GEO Score, whether JSON-LD Present, Schema Variety, and Author / Organization Schema count.
  4. If something stays red, go back to the generator, add the missing field, and repeat the check.

That turns "looks good in the preview" into a proven, measured state. How to lift the GEO part on purpose is in the tips & tricks.

Example 7: Linking language versions with hreflang

Your page exists in English and German, and Google should show each language its matching version.

  1. In Essential, enter the Canonical URL of the English page, e.g. https://example.com/en/pricing/.
  2. Under Language versions (hreflang), use Add language to create three rows: en with https://example.com/en/pricing/, de with https://example.com/de/preise/, and x-default with the version for all other languages.
  3. Read the checks below the output: if the page itself is missing from the list, the tool says so; if you type a code like english or a relative URL, it drops the row and tells you why.
  4. Copy the block, then generate the head of the German page — with the same hreflang list and the German canonical. The note "every listed page must link back with the same set of tags" reminds you of this too: Google only uses the annotations when all language versions name each other.

Going deeper: the manual for every field, the tips & tricks for strategy and pitfalls. You can try all of it directly in the tool.