Meta Tag Generator with Google and Social Previews

Most pages need about a dozen tags. Google ignores many older ones, and each extra tag is one more thing to keep in sync.

The meta keywords tag is not on the list. Google's documentation says it "is not used by Google Search, and it has no effect on indexing and ranking at all" (meta tags Google supports).

Google publishes no limit for either. Its documentation says titles and snippets are "truncated in Google Search results as needed, typically to fit the device width" (title links, snippets). So the useful limit is pixels, not characters:

• Titles are set in about 20px Arial on desktop, in a column roughly 600px wide. That fits about 50–60 characters, fewer if the title is full of wide letters like W and M. The meter in the tool measures your actual text and shows where it would be cut.
• Descriptions usually show about two lines on desktop, roughly 155–160 characters.

Put the words that matter first, so a cut costs only the brand name, and keep every title and description unique.

Google may rewrite a title using the page's main heading, og:title or anchor text, especially when it is vague, stuffed with keywords or repeated across pages. It also writes its own snippet when the description does not match the search.

Open Graph is the protocol Facebook introduced and most apps now read to build link previews. It lists four required properties (og:title, og:type, og:image and og:url, the canonical URL), wants absolute http:// or https:// URLs, and says a page with og:image should also specify og:image:alt.

X reads its own twitter: tags first and falls back to Open Graph for the title, description and image (X cards markup), so twitter:card and twitter:site are usually enough. The generator repeats the rest only if you ask it to.

For the share image, 1200×630 pixels (1.91:1) as PNG or JPEG under 5 MB works on Facebook (image guidance), LinkedIn and X. Each platform's exact rules, and how your live page looks on seven of them, are in the Open Graph preview.

The robots meta tag only needs to exist when you change the default, which is to index the page and follow its links. The rules Google supports are listed in its robots meta tag documentation:

• noindex keeps the page out of search results: thank-you pages, internal search results, thin duplicates.
• nofollow stops Google following any link on the page. To mark single links, put rel="nofollow" on them instead.
• max-image-preview:large allows a large image preview, up to the width of the viewport. Most content sites want it.
• nosnippet and max-snippet stop or limit the text snippet.

One trap: Google can only obey a noindex it can read. If robots.txt blocks the page, Google never fetches it, never sees the tag, and may still list the bare URL. Allow crawling and use noindex, or check your rules with the robots.txt tester.

In plain HTML, paste the tags inside <head>. Keep the charset first: the HTML standard requires it within the first 1024 bytes of the page.

In the Next.js App Router, export a metadata object from page.tsx or layout.tsx. Next.js adds the charset and viewport tags itself, and the theme color moves to a separate viewport export:

export const metadata: Metadata = {
  metadataBase: new URL("https://www.example.com"),
  title: "Trail Running Shoes for Rocky Terrain",
  alternates: { canonical: "/guides/trail-running-shoes" },
  openGraph: { images: [{ url: "/og.jpg", width: 1200, height: 630 }] },
  twitter: { card: "summary_large_image" },
};
export const viewport: Viewport = { themeColor: "#0f766e" };

With metadataBase set, relative paths become full URLs. The tool's Next.js output writes all of this for you. On a CMS, enter the same values in its SEO fields, so each page keeps its own title and description.