Which tags does this generate?

A tag, a meta description, a canonical link, Open Graph tags (og:type, og:title, og:description, og:url, og:image, og:site_name), and Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image, and twitter:site if you provide a handle).

Why do I need both Open Graph and Twitter Card tags?

Open Graph tags control how a link looks when shared on Facebook, LinkedIn, Slack, and most other platforms. Twitter/X reads its own twitter:* tags first and only falls back to Open Graph if they're missing, so including both gives you a consistent preview everywhere.

What's a good length for the title and description?

Aim for roughly 50-60 characters for the title and 150-160 characters for the description so they don't get truncated in Google's search results — the preview above shows how they'll actually render.

Is any of this sent to a server?

No. The snippet and preview are generated entirely in your browser as you type — nothing is uploaded or stored.

META TAG GENERATOR

Build title, description, canonical, Open Graph, and Twitter Card tags from a simple form. Nothing leaves your browser.

Page title

Description

Canonical URL

OG image URL

Site name

Twitter handle (optional)

Google search preview

example.com/my-page

My Awesome Page

A short, compelling summary of what this page is about.

Head snippet

<title>My Awesome Page</title>
<meta name="description" content="A short, compelling summary of what this page is about." />
<link rel="canonical" href="https://example.com/my-page" />

<meta property="og:type" content="website" />
<meta property="og:title" content="My Awesome Page" />
<meta property="og:description" content="A short, compelling summary of what this page is about." />
<meta property="og:url" content="https://example.com/my-page" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:site_name" content="My Site" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Page" />
<meta name="twitter:description" content="A short, compelling summary of what this page is about." />
<meta name="twitter:image" content="https://example.com/og-image.png" />

How to generate meta tags

1
Fill in your page title, description, canonical URL, OG image, site name, and (optionally) Twitter handle.
2
Watch the Google search result preview and the generated code update live.
3
Copy the head snippet and paste it into your page's <head>.

Questions

Which tags does this generate?: A <title> tag, a meta description, a canonical link, Open Graph tags (og:type, og:title, og:description, og:url, og:image, og:site_name), and Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image, and twitter:site if you provide a handle).
Why do I need both Open Graph and Twitter Card tags?: Open Graph tags control how a link looks when shared on Facebook, LinkedIn, Slack, and most other platforms. Twitter/X reads its own twitter:* tags first and only falls back to Open Graph if they're missing, so including both gives you a consistent preview everywhere.
What's a good length for the title and description?: Aim for roughly 50-60 characters for the title and 150-160 characters for the description so they don't get truncated in Google's search results — the preview above shows how they'll actually render.
Is any of this sent to a server?: No. The snippet and preview are generated entirely in your browser as you type — nothing is uploaded or stored.