About the Meta Tag Generator
Fill in a form and the meta tag generator writes the tags for your page's <head>: title, meta description, canonical URL, robots, plus the Open Graph and X (Twitter) card tags behind link previews. A Google result preview and a social card update as you type, and you can copy the result as HTML or as a Next.js metadata object.
A wrong tag means a cut-off title in Google, a WhatsApp or LinkedIn share with no image, or a site that never gets indexed because noindex stayed on after launch. The generator runs in your browser; its only network request loads your image for the card preview.
- Under Basic Meta Tags, fill in Title and Description. The counter under each says Good length at 50 to 60 characters for the title and 120 to 160 for the description.
- Enter Page URL (canonical) as a full
https://address; it also becomesog:url. Keywords and Author are optional and produce a tag only when filled. - Keep Search engines on index and Links on follow for public pages. Pick noindex for a checkout, a dashboard or a staging copy.
- Under Open Graph Tags, set Site Name, Type (website or article), Image URL and Image Alt Text. Image Width and Image Height start at 1200 and 630. Empty OG Title and OG Description reuse the page title and description.
- Under Twitter / X Card Tags, choose Large image (summary_large_image) or Small image (summary) as Card Type, and add Site @username and Author @username (the
@is added if missing). Empty Twitter fields reuse the Open Graph values. - Under Additional Tags, keep Include Viewport Meta Tag and Include Charset Meta Tag checked for a plain HTML page, and set Favicon URL and Theme Color. Then choose HTML or Next.js (App Router) next to Generated Meta Tags, check both previews, and click Copy.
InputTitle: PostgreSQL Indexes Explained: B-tree, GIN, GiST and BRIN
Description: When to use each PostgreSQL index type, how to read EXPLAIN output, and why an index can make writes slower. With examples you can run.
Page URL (canonical): https://example.com/blog/postgres-indexes
Site Name: Example Engineering
Type: article
Image URL: https://example.com/og/postgres-indexes.png
Image Alt Text: Diagram of a B-tree index with three levels
Site @username: exampledev
Author @username: @amara_dev
(other fields left at their defaults)Output<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PostgreSQL Indexes Explained: B-tree, GIN, GiST and BRIN</title>
<meta name="description" content="When to use each PostgreSQL index type, how to read EXPLAIN output, and why an index can make writes slower. With examples you can run." />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/blog/postgres-indexes" />
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:title" content="PostgreSQL Indexes Explained: B-tree, GIN, GiST and BRIN" />
<meta property="og:description" content="When to use each PostgreSQL index type, how to read EXPLAIN output, and why an index can make writes slower. With examples you can run." />
<meta property="og:url" content="https://example.com/blog/postgres-indexes" />
<meta property="og:site_name" content="Example Engineering" />
<meta property="og:image" content="https://example.com/og/postgres-indexes.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Diagram of a B-tree index with three levels" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@exampledev" />
<meta name="twitter:creator" content="@amara_dev" />
<meta name="twitter:title" content="PostgreSQL Indexes Explained: B-tree, GIN, GiST and BRIN" />
<meta name="twitter:description" content="When to use each PostgreSQL index type, how to read EXPLAIN output, and why an index can make writes slower. With examples you can run." />
<meta name="twitter:image" content="https://example.com/og/postgres-indexes.png" />
<meta name="twitter:image:alt" content="Diagram of a B-tree index with three levels" />
<link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#ffffff" />56 and 135 characters, so both counters say Good length. exampledev got its @, and the social tags reuse the title and description.
InputTitle: Checkout | Example Store
Search engines: noindex
Links: follow
Favicon URL and Theme Color: cleared
Output: Next.js (App Router)Output// app/page.tsx or app/layout.tsx (App Router)
import type { Metadata } from "next";
export const metadata: Metadata = {
title: "Checkout | Example Store",
robots: {
index: false,
follow: true,
},
openGraph: {
title: "Checkout | Example Store",
type: "website",
},
twitter: {
card: "summary_large_image",
title: "Checkout | Example Store",
},
};No Theme Color, so no viewport export. Next.js writes the charset and viewport tags itself.
InputTitle: Q&A: Is <dialog> ready for "production"?
Favicon URL and Theme Color: clearedOutput<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Q&A: Is <dialog> ready for "production"?</title>
<meta name="robots" content="index, follow" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Q&A: Is <dialog> ready for "production"?" />
<!-- Twitter / X -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Q&A: Is <dialog> ready for "production"?" />Inside an attribute, a quote becomes " so it can't end the value early. A hand-written tag with a stray quote cuts the text off.
Which meta tags matter, and which to skip
<title>: the main source of the title link in Google. Google may rewrite it from the<h1>orog:titlewhen it's too long, stuffed with keywords or the same on many pages.description: used as the snippet when it describes the page better than text Google picks from the page.robots:noindexkeeps a page out of results,nofollowtells Google not to follow its links.index, followis the default.rel="canonical": a strong hint, not an order, for which URL to show among duplicates such as?utm_source=versions.charsetandviewport: correct text and phone layout. The charset tag must be within the first 1024 bytes of the HTML, so keep it first.- Open Graph and X tags: no effect on ranking, but they decide how the link looks in Facebook, LinkedIn, X, Slack, WhatsApp and Telegram.
keywordsandauthor: Google ignores both. Fill them only if your own CMS or site search reads them.
Title and description: length and wording
Google sets no character limit. It cuts titles and snippets by pixel width, so WWW takes more room than iii, and the counter ranges are rules of thumb. The Google Search Preview cuts at 60 and 160 characters, which is close but not exact.
Put the words people search for first and the brand last. Make each title and description unique, and use the description to say what the reader gets. The SEO Content Checker checks both lengths along with the rest of the page.
Open Graph and X card tags
The Open Graph protocol (ogp.me) requires og:title, og:type, og:image and og:url. Meta says og:image:width and og:image:height let its crawler show the image on the first share, before it has downloaded it.
Meta recommends share images of at least 1200 × 630 pixels, close to 1.91:1. Use a full https:// image URL that loads without a login. On X, summary_large_image shows a wide image above the title and summary a small square beside it. When a twitter: tag is missing, X uses the matching Open Graph tag.
Platforms cache the card when a link is first shared, and some keep the old card on existing posts even after you fix the tags.
Meta tags and AI search features
There's no special meta tag for AI answers. Google's AI Overviews and AI Mode follow the same controls as normal snippets: noindex, nosnippet and max-snippet in the robots meta tag, and the data-nosnippet attribute on HTML elements. The generator writes only index or noindex and follow or nofollow, so add the others by hand, for example <meta name="robots" content="index, follow, max-snippet:160" />.
Common mistakes
noindexcopied from staging to production.- A page blocked in robots.txt and marked
noindex. Google can't fetch it, never sees thenoindex, and may still list the URL. - Every canonical pointing at the home page, or at the
http://version of the site. - A relative
og:imagesuch as/og.png. The Open Graph protocol expects a full URL, and many apps show no image without one. - An
<img>,<iframe>or other invalid element inside<head>. Google treats it as the end of the head and ignores the tags after it. - The same description on hundreds of pages, often a CMS default. Google then writes its own snippets.
Does Google still use the meta keywords tag?
No. Google Search has ignored it for years. The Keywords field is there for CMSs and site search tools that still read it.
How long should a title tag be?
Google has no fixed limit and cuts titles by pixel width. Aim for 50 to 60 characters, main words first.
What size should an og:image be?
At least 1200 × 630 pixels, the default in Image Width and Image Height. Keep text away from the edges, because some apps crop the image to a square.
Why does my link preview still show the old title or image?
Platforms cache a preview when a link is first shared. Use Scrape Again in Meta's Sharing Debugger or run the URL through LinkedIn's Post Inspector to refresh it.
Do I need both Open Graph and Twitter tags?
Open Graph tags are enough for most apps, and X falls back to them. Add at least twitter:card, which sets the card size on X; the generator includes it.
Where do I put metadata in a Next.js App Router project?
Export metadata, and viewport for the theme color, from app/layout.tsx or a page.tsx. These exports work only in Server Components, not in a file marked "use client".