Meta tag generator: copy-ready <head> tags and Next.js metadata

Which meta tags does a page actually need?

Most of what you see in old meta tag generators is dead weight. Google ignores the keywords meta tag, and has said so for years. What still does work is a short list, summarized below. Everything else (author, generator, revisit-after) can go.

How to use the meta tag generator

1. 1.Write the title keyword-first, with your brand at the end, and keep the meter under the desktop limit.
2. 2.Write a description of about 120–160 characters that says what the reader gets from the page.
3. 3.Paste the canonical URL exactly as you want it indexed: https, your preferred host, no UTM parameters.
4. 4.Leave robots on index, follow unless the page should stay out of search. Set Image preview to large if you want Google to show large image previews, for example in Discover.
5. 5.Add an absolute og:image URL (PNG or JPEG, ideally 1200×630) and alt text. The OG title and description fall back to the search ones, so only fill them in if you want different wording for social.
6. 6.Switch between HTML and Next.js output, copy it, and fix anything listed under Checks.

Example: the same tags in HTML and Next.js

<title>Cookie-Free Web Analytics | Example</title>
<meta name="description" content="See which channels bring paying customers, not just visitors." />
<link rel="canonical" href="https://example.com/analytics" />
<meta name="theme-color" content="#0E0E0D" />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Cookie-Free Web Analytics | Example" />
<meta property="og:url" content="https://example.com/analytics" />
<meta property="og:image" content="https://example.com/og.png" />

<!-- X / Twitter -->
<meta name="twitter:card" content="summary_large_image" />

import type { Metadata, Viewport } from "next";

export const metadata: Metadata = {
  title: "Cookie-Free Web Analytics | Example",
  description: "See which channels bring paying customers, not just visitors.",
  alternates: { canonical: "https://example.com/analytics" },
  openGraph: {
    type: "website",
    url: "https://example.com/analytics",
    images: ["https://example.com/og.png"],
  },
  twitter: { card: "summary_large_image" },
};

export const viewport: Viewport = { themeColor: "#0E0E0D" };

The full list of fields is in the Next.js generateMetadata reference. If you use relative URLs in Next.js, set metadataBase in your root layout so they resolve to absolute ones.

Common meta tag mistakes

• noindex plus a robots.txt block. Google has to crawl a page to see its noindex, so blocking it in robots.txt can leave the URL indexed anyway. Use one or the other. Test the rule with the robots.txt tester.
• Every page canonicalized to the homepage. A canonical says "this page is a copy of that one", so pointing all pages at / asks Google to drop them.
• Canonicals with tracking parameters or http://. They split signals across URL variants instead of consolidating them.
• A relative og:image path. Most crawlers that build link cards ignore relative image URLs; use the full https:// address.
• SVG share images. Facebook, LinkedIn and X don't render SVG as og:image. Export a PNG or JPEG.
• The same title and description on every page of a template. Google is more likely to rewrite them, and results become indistinguishable.
• Keeping the keywords meta tag. Google doesn't use it, and it tells competitors what you're targeting.

What happens after the click

Good meta tags win the click; they don't tell you whether it was worth anything. VisitTrack connects to Google Search Console so you see the queries that bring people in next to your traffic, then shows what those visitors did: goals, signups and revenue by channel. It's one cookie-free script tag, and it can also track AI crawlers like GPTBot and ClaudeBot that read your pages without running JavaScript.