induwara.lk
induwara.lkDeveloper · SEO

Meta Tag Generator — HTML, Open Graph & Twitter Card

Fill in a short form and get a copy-ready <head> block of SEO, Open Graph and Twitter/X Card tags — with live Google, Facebook and X previews and length checks. Everything runs in your browser; nothing is uploaded.

By Induwara AshinsanaUpdated Jun 25, 2026
Meta Tag GeneratorHTML · Open Graph · X Card
Runs in your browser
Quick start
23/60

Becomes <title>, og:title and twitter:title.

94 · ideal 140160

One or two sentences. Shown in search results and link previews.

The full https address of this page.

og:site_name (optional).

og:type vocabulary.

og:image / twitter:image. Recommended 1200×630.

og:locale.

twitter:card type.

twitter:site (optional).

meta name=author (optional).

meta name=theme-color (optional). 6-digit hex.

15 tags · 3/4 OG props
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free Meta Tag Generator</title>
<meta name="description" content="Generate SEO, Open Graph and Twitter Card meta tags and copy them into your page in one click.">
<link rel="canonical" href="https://induwara.lk/tools/meta-tag-generator">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Free Meta Tag Generator">
<meta property="og:type" content="website">
<meta property="og:url" content="https://induwara.lk/tools/meta-tag-generator">
<meta property="og:description" content="Generate SEO, Open Graph and Twitter Card meta tags and copy them into your page in one click.">
<meta property="og:site_name" content="induwara.lk">
<meta property="og:locale" content="en_LK">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Meta Tag Generator">
<meta name="twitter:description" content="Generate SEO, Open Graph and Twitter Card meta tags and copy them into your page in one click.">

Sources cited: tag set and required properties from ogp.me and the X Cards docs; length limits and robots tokens from Google Search Central. Length meters are character heuristics — Google measures pixel width.

How it works

This is a deterministic template generator, not a numeric calculator: every tag is a pure function of what you type. It follows four specifications — the Open Graph Protocol (ogp.me), the X (Twitter) Cards documentation, Google Search Central, and the WHATWG HTML standard — and emits tags in a sensible <head> order.

  1. Sanitise inputs. Every value is HTML-escaped (&, <, >, ") so a title containing punctuation can never break the markup. Whitespace is trimmed and your X handle is normalised to a single leading @.
  2. Core HTML tags. With the charset option on, it outputs <meta charset="utf-8"> and the viewport meta first, then the title, meta description and canonical link.
  3. Robots directive. Your index/noindex and follow/nofollow choices are joined into a single supported <meta name="robots"> value. Only tokens Google documents are offered.
  4. Open Graph block. The four properties ogp.me marks required — og:title, og:type, og:url and og:image — are emitted, with og:image dropped (and a warning shown) when no image URL is given. og:description, og:site_name and og:locale are added when present.
  5. Twitter/X block. Because X falls back to Open Graph, only a few Twitter tags are written — the card type, title, description and image — so they never contradict the OG block.
  6. Length checks.Title and description meters compare character count against thresholds from Google's title-link and snippet guidance (title green up to 60, description ideal 140160). Google actually measures pixel width, so these are advisory heuristics, not guarantees.

As a credibility cross-check, the generated string is then independently re-parsed: the tool counts the emitted <meta>/<link>/<title> tags and confirms which of the four required Open Graph properties are present. That re-parse must agree with the validation panel — if og:image is missing, both flag it.

Worked examples

Example 1 — a blog article

  1. Title: 'How to File Your APIT Return in Sri Lanka (2026)' = 48 chars → meter green.
  2. Description: 145 chars → within 140–160 → meter green.
  3. Image URL supplied → og:image and twitter:image emitted.
  4. With charset + viewport on, 18 tags are generated.
  5. Re-parse: all 4 required OG properties present → validation panel clean.

Example 2 — a noindex staging page, no image

  1. Title: 'Staging — Internal Dashboard' = 28 chars → meter green.
  2. Description left empty → description, og:description, twitter:description all omitted.
  3. No image → og:image and twitter:image omitted.
  4. Robots set to 'noindex, nofollow' → joined into one robots tag.
  5. Re-parse flags og:image missing → panel warns 'No og:image — links will have no preview image.'

Example 3 — escaping special characters

  1. Title typed as: Tom & Jerry's "Big" <Sale>
  2. & is escaped first, then < > and " — order matters to avoid double-escaping.
  3. Output: <title>Tom &amp; Jerry's &quot;Big&quot; &lt;Sale&gt;</title>
  4. The markup stays valid; no tag is accidentally opened or closed by your text.

Frequently asked questions

Sources & references

Related tools

Rate this tool
Be the first to rate

Comments & feedback

Spotted a bug or want an improvement? Tell us — our team reviews every comment, and good ideas get built. Comments are public and anonymous.

Found a bug, edge case, or want to suggest an improvement?

Email me at [email protected] — most fixes ship within 24 hours.