Free meta tag generator — SEO, Open Graph & Twitter Card tags from a simple form

0 chars — aim for 50–60
0 chars — aim for 150–160
1200×630 recommended

Generated meta tags

Fill in a title or description to generate your tags.

Paste these into the <head> of your page. Everything is generated locally in your browser.

🏷️ Meta Tag Generator — Free Online Tool

Generate SEO, Open Graph & Twitter Card meta tags online, free. Meta tags tell search engines and social platforms how to title, describe, and preview your page. This generator turns a simple form into ready-to-paste HTML: the SEO title and description, a canonical link, Open Graph tags (the protocol Facebook, LinkedIn and most platforms read) and Twitter Card tags — so a shared link renders with the right title, summary and image.

🚀 Why use this Meta Tag Generator tool?

Generates the SEO, Open Graph and Twitter Card tags together and HTML-escapes your input, so the markup is valid and the same content drives Google, Facebook, LinkedIn and X previews — built entirely in your browser. 100% free, no registration, and complete privacy — everything runs locally in your browser, so your data never touches a server.

Key Features

🔎SEO basics

Generates the <title>, meta description and a canonical link — the core tags Google uses to title and rank your page.

📣Open Graph tags

Outputs og:title, og:description, og:image, og:url, og:type and og:site_name so Facebook, LinkedIn and Slack render rich previews.

🐦Twitter Cards

Adds twitter:card, title, description, image and your @handle so links on X show a large-image card.

📏Length hints

Live character counts nudge your title toward 50–60 and description toward 150–160 characters — the lengths search engines display.

Popular Use Cases

Launching a page

  • Add SEO + social tags before publishing
  • Ensure a clean canonical URL
  • Set a 1200×630 share image

Fixing previews

  • Repair a blank or wrong social preview
  • Add a missing og:image
  • Standardise tags across pages

Templating

  • Build a tag template for a CMS
  • Generate tags for static sites
  • Hand markup to developers

What It Handles

Generates

  • SEO title + description
  • Open Graph tags
  • Twitter Card tags

Options

  • og:type & twitter:card
  • Canonical URL
  • Site name & @handle

Privacy

  • Built in-browser
  • No network calls
  • Runs offline

Sources & References

Frequently Asked Questions

What meta tags does this generate?

It produces the <title> and meta description, a canonical link, the full Open Graph set (og:title, og:description, og:image, og:url, og:type, og:site_name) and Twitter Card tags (twitter:card, title, description, image, site/creator) — everything needed for search and social previews from one form.

What is the difference between meta description and Open Graph description?

The meta description is what Google may show under your title in search results. The og:description (and twitter:description) is what social platforms show when your link is shared. This tool fills both from your description so they stay consistent, though you can edit them separately in the output.

What image size should I use for og:image?

1200×630 pixels (a 1.91:1 ratio) is the recommended size for Open Graph and Twitter's large-image card. It displays crisply on Facebook, LinkedIn, Slack and X. Use an absolute https URL — relative paths are not resolved by social crawlers.

Is this a free alternative to CodeBeautify's meta tag generator?

Yes. It is free with no signup and generates the same SEO, Open Graph and Twitter tags, but builds them entirely in your browser — no data is sent anywhere — and adds live title/description length hints to keep you in Google's display limits.

How long should my title and description be?

Aim for roughly 50–60 characters for the title and 150–160 for the description — beyond that, Google typically truncates them in results. The live counters in this tool flag when you exceed those ranges.

Do I need both Open Graph and Twitter tags?

X (Twitter) falls back to Open Graph tags when Twitter-specific ones are absent, so og: tags alone often suffice. Adding explicit twitter:card and twitter:image gives you precise control over the X preview and the large-image layout, which is why this tool emits both.

🎓 Pro Tips

  • Tip 1: Always use absolute https URLs for og:image and og:url — social crawlers can't resolve relative paths and will show a blank preview.
  • Tip 2: Keep the meta description and og:description aligned with the page's real content; mismatched or keyword-stuffed copy can be rewritten or ignored by Google.
  • Tip 3: After deploying, re-scrape the page with Facebook's Sharing Debugger or X's Card Validator to refresh cached previews.