🔒 All tools run entirely in your browser. No data leaves your device.
codebrûlée

Meta Tag Generator

Generate HTML meta tags for SEO and social sharing — Open Graph, Twitter Card, canonical, viewport. Live preview cards for Twitter, LinkedIn/Facebook, and Google search.

Page basics

Open Graph

Recommended size: 1200×630 px, under 5 MB. JPEG or PNG.

Twitter / X

Preview

Twitter / X — large image card

LinkedIn / Facebook

Google search

example.com › your-page
Your Page Title — example.com
A short, compelling description of this page. Aim for 120–160 characters so it doesn't truncate in search results.

HTML to paste in <head>

<!-- Primary -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Your Page Title — example.com</title>
<meta name="description" content="A short, compelling description of this page. Aim for 120–160 characters so it doesn't truncate in search results." />
<link rel="canonical" href="https://example.com/your-page" />
<meta name="robots" content="index, follow" />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Page Title — example.com" />
<meta property="og:description" content="A short, compelling description of this page. Aim for 120–160 characters so it doesn't truncate in search results." />
<meta property="og:url" content="https://example.com/your-page" />
<meta property="og:site_name" content="Example" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:alt" content="Social preview image" />

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title — example.com" />
<meta name="twitter:description" content="A short, compelling description of this page. Aim for 120–160 characters so it doesn't truncate in search results." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />

About this tool

Every page on the modern web wants the same set of head tags: a title, a description, a canonical URL, and the Open Graph plus Twitter card meta that drive social previews. Writing them by hand is repetitive and easy to get wrong — typo a property name, forget to update the og:image when the canonical changes, exceed Google's character budget by 5 characters and watch your title get cut off.

The generator gives you one form for the whole package and shows live previews of how the result renders on Twitter, on LinkedIn / Facebook, and in Google search. Character counters warn before you hit a truncation boundary. The output is a single block of HTML ready to paste into your <head>.

After deploying, validate with the platform-specific tools: Twitter Card Validator, Facebook Sharing Debugger, and LinkedIn Post Inspector. Each one fetches and re-caches your URL — useful when you've just changed an og:image and are wondering why the share preview still shows the old one.

Frequently asked questions

How long should my title and description be?

Titles up to ~60 characters and descriptions up to 160 are safe — Google truncates beyond that. Descriptions under 50 characters often get rewritten by Google to something it generates from the page content. The character counters on the form turn red when you go over.

What size should my og:image be?

1200×630 pixels is the standard for Facebook, LinkedIn, and the summary_large_image Twitter card. Stay under 5 MB. JPEG or PNG; WebP works on Facebook but is hit-and-miss on Twitter, so JPEG is the safest default.

Why are there both og: and twitter: tags?

Open Graph (og:) is the broader standard used by Facebook, LinkedIn, Slack, and many others. Twitter falls back to og: tags but its own twitter: tags take precedence when both are present, so the generator emits both — and the og: ones cover everywhere else.

Do I need a canonical URL?

For SEO, yes. The canonical tells Google which URL to consider authoritative when the same content is reachable at multiple URLs (with/without trailing slash, with tracking params, http vs https, etc.). Without it, Google picks one — sometimes the wrong one.

Are the previews exactly what each platform will show?

Close, not exact. The previews show the typical rendering — actual layouts vary slightly across desktop / mobile / app surfaces and change over time. After deploying, validate with Twitter Card Validator, Facebook Sharing Debugger, and LinkedIn Post Inspector.

Related tools