Skip to content
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 140–160

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 140–160). 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

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.