All Tools

Meta Tag Generator

Fill in a few fields and get a clean, correctly escaped set of meta tags for your page's <head> — with live Google and social share previews, and a ready-to-paste Next.js metadata object.

Runs in your browser — nothing is uploaded Free, no limits

Basic tags

0 chars0 / 580 pxempty
0 chars0 / 920 pxempty
The preferred, absolute URL of this page.
e.g. en, en-GB, de, bn

Indexing (robots)

Characters; -1 = no limit
Seconds; -1 = no limit
“index, follow” is the default, so no robots tag is output unless you change something.

Open Graph (Facebook, LinkedIn, Slack…)

Leave empty to use the page title.
Leave empty to use the meta description.
Absolute URL, 1200×630 px (1.91:1), under 5 MB.

Twitter / X card

X falls back to the Open Graph title, description and image, so repeating them is optional.

Icons

Favicon and apple-touch-icon links are off.

Google search preview

example.com
https://example.com › page
Your page title
Your meta description appears here.

Social share preview

No og:image
example.com
(no title)

Your code

<!-- Put the language on the <html> tag: <html lang="en"> -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">

<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image">
Add a title — it's the clickable headline in Google results.
Add a meta description — otherwise Google picks text from the page.
Add an og:image (1200×630 px recommended) so shared links show a large preview.
Paste these tags inside <head>. After publishing, verify the live page with the Meta Tag Checker.

How to use the Meta Tag Generator

  1. Enter the page title and meta description — the meters show if Google will cut them off.
  2. Add the canonical URL, choose robots settings and any extras such as author or theme colour.
  3. Fill in the Open Graph image and details (title and description default to the basic fields).
  4. Check the previews, then copy the HTML snippet or the Next.js metadata export.
  5. After publishing, verify the live page with the Meta Tag Checker.

Frequently asked questions

Which meta tags matter for SEO?

The <title> and meta description matter most: Google uses them for the headline and snippet in results. Add a canonical link to avoid duplicate URLs, a viewport tag for mobile, and a robots tag only when you need to restrict indexing. The meta keywords tag is ignored by Google.

How long should a title and meta description be?

Google truncates by pixel width, not characters: titles at roughly 580 px (about 50–60 characters) and descriptions at about 920 px on desktop (around 150–160 characters). This tool measures the real width in Arial, the font Google uses, so you can see exactly when text will be cut.

What are Open Graph tags?

Open Graph tags (og:title, og:description, og:image, og:url…) control how your link looks when shared on Facebook, LinkedIn, Slack, WhatsApp, Discord and many other apps. Without them the platform guesses, often with the wrong image.

What size should my og:image be?

Use 1200×630 pixels (a 1.91:1 ratio), as JPG or PNG under 5 MB, with an absolute https:// URL. Keep important text near the centre because some platforms crop the image to a square.

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

You need twitter:card to choose the card style (summary_large_image gives a big image). For title, description and image, X falls back to the Open Graph tags, so repeating them as twitter:* is optional.

Can I use this with Next.js?

Yes. Switch the output to Next.js metadata to get an export const metadata object (plus a viewport export for the viewport and theme colour) for the App Router — Next.js then renders the same tags for you.