Meta tag generator

Fill in your page's title and description and copy the finished head tags. Counters show how long each one is, a preview shows roughly how it can look in Google, and all values are HTML-escaped so quotes and ampersands cannot break the markup.

Page title46 / 60 characters

Meta description129 / 160 characters

Canonical URL

Robots

Add charset tag Add viewport tag Open Graph tags (Facebook, LinkedIn, messengers)

og:title (blank = page title)

og:description (blank = meta description)

og:image URL

og:url (blank = canonical)

og:type

og:site_name

Twitter / X card tags

twitter:card

twitter:site

Search result preview

example.com

Free Online Tools – Calculators and Converters

Free browser-based calculators, converters and developer tools. No sign-up, nothing is uploaded, and every tool works on a phone.

Only an approximation: Google cuts titles and descriptions by pixel width, and may rewrite them.

HTML for the <head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Free Online Tools – Calculators and Converters</title>
<meta name="description" content="Free browser-based calculators, converters and developer tools. No sign-up, nothing is uploaded, and every tool works on a phone.">
<link rel="canonical" href="https://example.com/">
<meta property="og:title" content="Free Online Tools – Calculators and Converters">
<meta property="og:description" content="Free browser-based calculators, converters and developer tools. No sign-up, nothing is uploaded, and every tool works on a phone.">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Example">
<meta name="twitter:card" content="summary_large_image">

Twitter / X falls back to the Open Graph title, description and image when its own tags are missing, so only the card type is added.

Runs in your browser: nothing you enter is sent anywhere.

How to use it

Write the title and description; watch the counters and the preview.
Enter the page’s canonical URL and, if you want social sharing cards, the image URL.
Copy the generated tags into the <head> of your page.

What each tag does

<title> and description: the headline and snippet in search results.
canonical: the preferred URL when the same content is reachable at several addresses.
robots: noindex keeps a page out of search results, nofollow asks crawlers not to follow its links. Leave it unset for normal pages.
viewport: makes the page scale correctly on phones.
og:*: Open Graph data for link previews; twitter:card picks the card layout on Twitter / X.

Tips

Give every page its own title and description; duplicates waste the space.
Use absolute https URLs for the canonical, og:url and og:image.
A common image size for link previews is 1200×630 pixels.
Put the tags in the <head>, as early as possible, with the charset first.

Frequently asked questions

How long should a title and meta description be?

Aim for roughly 50 to 60 characters for the title and 70 to 160 for the description. These are not hard limits: Google truncates by pixel width and sometimes shows its own text, so treat the counters as a guide.

Does the meta description affect ranking?

Google does not use the meta description as a ranking signal, but it may show it as the snippet, so a clear one can improve clicks. It can also pick other text from the page.

What are Open Graph tags for?

They control how a link looks when shared on Facebook, LinkedIn, Slack, Telegram and other apps: the title, description, image and type. Without them, those apps guess from the page.

Do I need Twitter card tags if I have Open Graph?

Twitter / X reads Open Graph tags when its own are missing, so often only twitter:card is needed to choose the card layout. This tool does exactly that when Open Graph is on.

Why are quotes and ampersands changed in the output?

Values are HTML-escaped, so a title like Tom & "Jerry" becomes Tom & "Jerry" in the markup. Browsers and crawlers read it back as the original text.

More in Developer

All tools in this category: Developer ·Updated November 3, 2026