JPKCom DB

Meta Tags Generator — Examples

Hands-on walkthroughs with the Meta Tags Generator: a base head for a new page, an article with Open Graph and Twitter Card, JSON-LD, security headers, and verification.

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. The interface is in English, so 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.
  2. Keep Charset on UTF-8 and Viewport on Standard.
  3. Type a Page Title. Watch the char counter: if it stays green you're in the 50–60 character range; if it turns orange/red, Google will likely truncate your title later.
  4. Write a Meta Description between 120 and 160 characters — the counter guides you.
  5. Enter the Canonical URL (absolute, with https://). Handy: the tool carries it over into later JSON-LD and og:url fields automatically.
  6. Leave Robots Directives at index + follow. The full Essential block is now on the right.
  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 Twitter Card

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

  1. Enable the Open Graph section via its Include in output switch.
  2. Set Type to article. Now the Article fields appear: Published Time, Modified Time, Author, Section, and Tags.
  3. Fill in Title, Description, and above all Image URL — as an absolute URL. Enter Width 1200 and Height 630 (the size the tool recommends) and an Image Alt text.
  4. Add Site Name and Locale (e.g. en_US). In the article fields, set published date, author, section, and comma-separated Tags — the tool turns each into its own article:tag.
  5. Also enable Twitter / X Card, pick summary_large_image, and enter @site and @creator handles (the tool adds the @). You can keep title, description, and image shorter than for OG.
  6. Switch to the Preview tab and check the Open Graph Card and Twitter / X Card. If there's no Twitter title, the preview shows the OG title as a fallback — but the markup then contains nothing for it, so set the fields you actually want output.

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. Enable Structured Data (JSON-LD) and pick a Schema Type, e.g. Article.
  2. The common fields url, name, and description are often already filled — the tool carried them over from Title, Description, and Canonical. Add the article fields Author Name and Published/Modified.
  3. Look at the generated <script type="application/ld+json"> on the right: the author is written automatically as a nested Person object, the date as an ISO value.
  4. For an FAQ, choose FAQPage instead and create question/answer pairs via Add Question — the tool builds the mainEntity list. For navigation, use BreadcrumbList and enter name/URL pairs; the position is numbered automatically.
  5. Check the result in the Preview tab under JSON-LD Preview, and after deployment test it with the Google Rich Results Test linked in the Tips tab.

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.

  1. Enable Verification Tags and enter the codes Google Search Console, Bing, Pinterest, Yandex, or Facebook give you. Each filled code produces exactly one <meta> tag with the right name.
  2. Enable Security Headers. For a quick CSP, click one of the presets Strict, Moderate, or Loose — the matching policy string appears in the field and in the output.
  3. Heed the warning in the tool: a CSP via <meta> is limited. Use it to experiment; in production the policy belongs in a real HTTP header (Apache/Nginx). See the manual under Security Headers.
  4. Optionally, use the Permissions-Policy checkboxes to deny camera, microphone, geolocation, fullscreen, and payment if your page doesn't need them.

Example 5: Performance hints and mobile tags

A page loads fonts from a CDN and should look right as a PWA on the iPhone.

  1. Enable Performance & Resource Hints. Via Add preconnect, create a line for https://fonts.gstatic.com and set crossorigin to anonymous. With Add preload, preload a font: enter the URL, as = font, type = font/woff2, crossorigin = anonymous.
  2. Add dns-prefetch for further third-party domains if needed. Each line can be removed again via the ✕.
  3. Enable Mobile & App. Turn on Theme Color via the Enable switch and pick a colour; add an apple-touch-icon (180×180 px PNG) and a short App Title (≤ 30 characters).
  4. If your page contains phone numbers the browser shouldn't auto-link, set format-detection: telephone to no.

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 + Twitter + 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, OG Image, and Twitter / X Card are now pass — 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.

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