","err_audit_input_required":"Paste HTML containing your meta tags first.","mockups_heading":"How it looks as a link preview","mockups_disclaimer":"These four cards are styled approximations of each platform's real link-preview chrome, built for planning purposes only — they are not a live fetch or screenshot of Twitter/X, Facebook, LinkedIn or Discord, and platforms may restyle their own preview UI over time.","mockup_twitter_heading":"Twitter / X","mockup_facebook_heading":"Facebook","mockup_linkedin_heading":"LinkedIn","mockup_discord_heading":"Discord","mockup_image_alt":"Link preview image","mockup_no_image":"No image provided","mockup_no_image_short":"No image","domain_default_fallback":"example.com","audit_missing_title":"Missing og:title — most platforms show a generic or blank title without it.","audit_missing_description":"Missing og:description — the preview card will show no summary text.","audit_missing_image":"Missing og:image — most platforms show no image, or fall back to the first image found on the page.","audit_missing_url":"Missing og:url — without it, shares of alternate URLs (with tracking parameters, AMP versions, etc.) may not consolidate to the canonical page.","audit_title_too_long":"og:title is {length} characters — over the ~{max}-character point where most platforms will truncate it.","audit_title_long":"og:title is {length} characters — over the ~{max}-character point where some platforms start truncating it, though it may still display fully elsewhere.","audit_title_ok":"og:title is {length} characters — within the safe range for most platforms.","audit_description_too_long":"og:description is {length} characters — over the ~{max}-character point where most platforms will cut it off.","audit_description_long":"og:description is {length} characters — over the ~{max}-character point where some platforms start truncating it.","audit_description_ok":"og:description is {length} characters — within the safe range for most platforms.","audit_url_not_absolute":"og:url value \"{value}\" is not an absolute http(s) URL — it should be the page's full canonical URL.","audit_image_not_absolute":"og:image value \"{value}\" is not an absolute http(s) URL — most platforms require a fully-qualified image URL.","audit_image_dims_small":"Declared og:image:width/height is {w}×{h} — below the widely recommended 1200×630 minimum for link previews.","audit_image_dims_ok":"Declared og:image:width/height is {w}×{h} — meets the widely recommended 1200×630 minimum.","audit_image_dims_unparseable":"og:image:width/og:image:height are present but not valid numbers.","audit_image_dims_unknown":"No og:image:width/og:image:height declared — actual pixel dimensions can't be verified without fetching the image, which this tool never does, by design, for privacy. Recommended minimum: 1200×630.","audit_twitter_card_missing":"No twitter:card tag — Twitter/X will generally fall back to the equivalent og: tags, but an explicit twitter:card is more reliable.","audit_twitter_card_invalid":"twitter:card value \"{value}\" is not one of the four values Twitter's Card validator accepts: summary, summary_large_image, app, player.","audit_twitter_card_ok":"twitter:card is \"{value}\", a valid value.","audit_large_image_needs_image":"twitter:card is summary_large_image but no og:image or twitter:image was found — this card type needs an image to render properly.","audit_twitter_title_fallback":"No twitter:title set — Twitter/X will fall back to og:title.","audit_twitter_description_fallback":"No twitter:description set — Twitter/X will fall back to og:description.","audit_twitter_image_fallback":"No twitter:image set — Twitter/X will fall back to og:image.","audit_duplicate_tag_item":"\"{tag}\" is declared {count} times — only the last one most platforms parse will actually take effect."};
⭐ 0
🔍
Text Image PDF & Docs Audio Music Electronics Time Utilities Validators Esoteric Games

OG & Twitter Card Generator — Meta Tag Builder, Auditor & Preview

Build ready-to-paste Open Graph and Twitter Card <meta> tags from a form, or paste an existing <head> to audit it for missing tags, title/description length and twitter:card validity — then preview both in genuinely re-styled Twitter/X, Facebook, LinkedIn and Discord link-card mockups.

Buy Me a Coffee at ko-fi.com
Processing... 0%
Reading input
Building/auditing tags
Rendering previews
Done

Result

Open Graph and Twitter Card meta tags decide what a link looks like the instant it is pasted into Slack, iMessage, a tweet or a Discord channel — a title, description and image chosen by the page's own <head>, not by whatever the platform happens to scrape from the visible body text. This tool is both a builder and an auditor, not a generic template filler. In BUILD mode, fill in a title, description, image URL, canonical URL, content type and Twitter card type, and it composes the exact <meta property="og:..."> and <meta name="twitter:..."> tag block ready to paste into your page's <head>, skipping any field you leave empty rather than emitting hollow tags with blank content.

In AUDIT mode, paste your existing <head> markup or an entire page's HTML and the tool parses it with the browser's native DOMParser to extract every og: and twitter: meta tag already present, then runs the checks that actually matter: the four commonly-required tags (og:title, og:description, og:image, og:url) are flagged if missing; og:title is measured against the roughly 60-character point where some platforms begin truncating it and the roughly 90-character point where most platforms will; og:description is measured against the roughly 155-to-200-character range most platforms allow before cutting it off; twitter:card is checked against the real four values Twitter's Card validator accepts — summary, summary_large_image, app, player — and flagged if it's anything else; and duplicate tags (the same property declared twice, a surprisingly common copy-paste bug) are called out by name.

Image dimensions get an honest treatment: this tool cannot verify your image's actual pixel size without fetching it, and it deliberately never does that, matching this site's no-external-request policy. If your HTML already declares og:image:width and og:image:height, those declared numbers are checked against the widely recommended 1200×630 minimum; if not, you get a clear guidance note instead of a fabricated pass or fail. Both modes render the same four link-preview mockups — Twitter/X (switching between its compact "summary" thumbnail layout and full-width "summary_large_image" layout depending on the twitter:card value), Facebook, LinkedIn and Discord — each genuinely re-styled to match that platform's own typography and layout conventions rather than one box with a different logo, and each is clearly labeled as an illustrative approximation for planning purposes, since real platforms restyle their preview chrome over time and this tool never fetches or scrapes them to check.

🛡️
Executed in Browser

Your files and inputs never leave this device. Processing runs completely offline. 100% Secure.

Accepted Formats & Rules

  • BUILD mode composes og:title, og:description, og:image, og:url, og:type, og:site_name and matching twitter:card/twitter:site/twitter:title/description/image tags, skipping any field left blank, with a one-click copy of the ready-to-paste block.
  • AUDIT mode extracts every og:/twitter: <meta> tag from pasted HTML via the browser's DOMParser, flags missing required tags (og:title/description/image/url), duplicate tags, and invalid twitter:card values.
  • Length guidance uses the real commonly-cited thresholds: og:title around 60 characters before some platforms start truncating it (up to roughly 90 on the most permissive), og:description around 155-200 characters.
  • Renders the Twitter/X card in its correct layout for the declared card type — a compact "summary" card with a small square thumbnail, or the full-width "summary_large_image" layout — alongside Facebook, LinkedIn and Discord previews.

Key Benefits

✓ Two real tools in one: a BUILD mode that generates the exact og: and twitter: <meta> tag HTML from a form, and an AUDIT mode that parses pasted HTML to find and grade your existing tags.
✓ Real validation, not a cosmetic checklist: missing required tags, og:title/og:description length checked against the actual limits platforms truncate at, and twitter:card checked against its real four allowed values.
✓ Honest about what can't be verified offline: image pixel dimensions are guidance-only unless your HTML already declares og:image:width/og:image:height, since this tool never fetches your image — by design, for privacy.
✓ Four genuinely different platform mockups (Twitter/X's summary vs summary_large_image layouts, Facebook, LinkedIn, Discord) built from the same title/description/image, clearly labeled as illustrative.

Use Cases

  • • Ship a new blog post with proper social cards: fill in the title, description and a hosted cover image, generate the og:/twitter: tag block, and paste it straight into the page's <head>.
  • • Audit an existing landing page's <head> after a CMS migration to catch a missing og:image, an og:title that's long enough to get truncated on some platforms, or a leftover invalid twitter:card value.
  • • Compare how the same title and image read in Twitter/X's compact summary card versus its full-width summary_large_image layout before deciding which twitter:card type to declare.