LaunchRanked
Launch free

Meta tag generator

Fill in a page's title, description and canonical URL, then add robots rules, Open Graph, an X card and a theme color. Copy clean HTML for the head or a Next.js metadata object. Length checks and a search result preview update as you type.

Skip to the generated tags
Title width56 chars · ~490 / 600px
Description width (desktop)141 chars · ~888 / 920px
Description width (mobile)~888 / 680px

The address you want Google to treat as this page's main one.

Search result preview

example.comhttps://www.example.com › invoice-generator

Acme Invoicing: a free invoice generator for freelancers

Make a professional invoice in two minutes. Add your logo, set payment terms and download a PDF. Free for up to five clients, no card needed.

Widths are estimated from Arial’s letter widths. Google’s real cut-off varies, and it often rewrites titles and snippets.

Checks

  • PassThe title is about 490px wide, inside the roughly 600px shown on desktop.
  • InfoFits desktop (~920px) but likely cut on mobile after roughly 101 characters. Keep the key message before that.
  • Pass141 characters: inside the usual 120–155 target.
Robots: indexing and snippetsmax-image-preview:large, max-snippet:-1

Index and follow are the defaults, so nothing is written for them. Only change what you mean to.

Google says listing a default has no effect. Some teams like the line there anyway.

Keeps the page out of search results. Don't also block it in robots.txt, or Google can't see this tag.

No text snippet or video preview in results.

Optional: for offers and events that end.

Open Graph: link previewsIncluded

A full https:// address. 1200 × 630 pixels is the size Facebook recommends.

Different text for shares
X (Twitter) cardsummary_large_image

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

Browser: theme color, viewport, charsetTheme color #ffffff

utf-8 is the only encoding HTML5 allows. Keep it first in the head.

Paste inside <head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Search -->
<title>Acme Invoicing: a free invoice generator for freelancers</title>
<meta name="description" content="Make a professional invoice in two minutes. Add your logo, set payment terms and download a PDF. Free for up to five clients, no card needed.">
<link rel="canonical" href="https://www.example.com/invoice-generator">
<meta name="robots" content="max-image-preview:large, max-snippet:-1">
<!-- Browser -->
<meta name="theme-color" content="#ffffff">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Acme Invoicing: a free invoice generator for freelancers">
<meta property="og:description" content="Make a professional invoice in two minutes. Add your logo, set payment terms and download a PDF. Free for up to five clients, no card needed.">
<meta property="og:url" content="https://www.example.com/invoice-generator">
<meta property="og:site_name" content="Acme Invoicing">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://www.example.com/og/invoice-generator.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="An invoice with a logo, line items and a total">
<!-- X (Twitter) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@acmeinvoicing">

What each group does

The title and meta description decide how your page looks in results. Google says it may use the description in the snippet; check both against the width Google shows with the title tag checker and the SERP preview. The canonical URL names the address you want treated as the page’s main one; see canonical tag. Open Graph tags control link previews in social apps and chat, and the Open Graph generator shows the card. The viewport tag tells phones how to lay the page out, and Google treats it as a sign of a mobile-friendly page.

Robots rules that matter

  • Index and follow are the defaults, so nothing is written for them (Google’s robots meta tag guide).
  • noindex only works if Google can fetch the page. Block it in robots.txt as well and Google never sees the tag.
  • Google lists nosnippet, data-nosnippet, max-snippet and noindex as the controls over how much of a page appears in its AI features in Search (AI features and your website).
  • max-image-preview:large enables large previews. For Discover, Google also wants images at least 1200 px wide.

Open Graph, X and the share image

The Open Graph protocol requires og:title, og:type, og:image and og:url, and says a page with an image should add og:image:alt. Facebook recommends images of at least 1200 × 630 pixels, and 600 × 315 as the minimum for a large card (Facebook’s image guidance). X can fall back to the Open Graph tags, so the generator writes only twitter:card and your handles unless you ask it to repeat the rest.

Next.js

The Next.js tab writes a typed metadata export, and a separate viewport export when you set a theme color or change the viewport. We checked the output against Next.js’s own types and its robots writer. Once the page is live, run it through the meta tag checker to see what a crawler actually receives.

Questions

Do I need a robots meta tag on every page?

No. Index and follow are the defaults, and Google says listing a default has no effect. Add a robots tag only to change something: noindex to keep a page out of results, a snippet limit, or max-image-preview:large. This tool writes nothing for the defaults unless you tick the box that asks for them.

What does max-image-preview:large do?

It lets Google show a large image preview for the page. Google's Discover guidance asks for large images at least 1200 pixels wide and says to enable them with this setting, so it's a sensible default for content you want shared and discovered.

Does the meta description affect rankings?

Google says it may use the description in the snippet shown in results. It doesn't say it ranks pages by it, and it often writes its own snippet instead. Write the description for the person deciding whether to click. Around 120 to 155 characters is a common target, not a Google rule.

Where do these tags go?

In the head of the page, with the charset tag first so it sits inside the first 1024 bytes. In a Next.js App Router project, export the metadata object from a layout or page instead, and Next.js writes the tags for you.

Why is the theme color in a separate viewport export?

Since Next.js 14, themeColor, colorScheme and the viewport settings live in a viewport export, and putting themeColor in the metadata object is deprecated. The Next.js tab writes it that way. The viewport tag itself is set for you, so a default isn't needed there.

AI SEO Autopilot

Want this fixed automatically?

Autopilot checks your site, publishes researched articles at a safe pace, and tracks whether ChatGPT, Perplexity, Gemini and Claude cite you. From $40.83/mo, billed yearly.

See AutopilotLaunch your product free

Related free tools

See all free tools