How to Use the Free Meta Tag Generator, Step by Step
Reviewed by the FreeOnline.fyi team · Updated 2026-09-14
What the generator actually produces
We built the Free Meta Tag Generator for the moment right after you publish a page: you know you need a title tag, a description, a canonical link and Open Graph markup, but you don't want to type fourteen lines of `<head>` boilerplate from memory. You fill in six fields, you copy one block, you paste it above `</head>`. That's the whole workflow, and it runs entirely in your browser — nothing is sent to a server.
Hand-written meta tags fail in predictable ways. The `<title>` gets written twice, once in the CMS template and once in a pasted snippet, so the wrong value wins. The canonical ends up relative (`/pricing` instead of `https://example.com/pricing`). Open Graph tags inherit the current title but keep an `og:url` from before the last migration. The point of generating the whole block at once is that the title, description, canonical, robots and social tags all agree with each other.
Because there's no account and no saved project, it's also fine for throwaway work — staging domains, draft copy, a client page you're handing off.
Step 1: Write the title and description against the live counters
Start with the page title. The tool counts characters as you type and compares them to Google's rough display limit: you get an amber warning past 60 characters and a stronger one past 70. The counter is a guide, not a rule — Google truncates by pixel width, and wide characters like `W` run out of room sooner than `i` does, so a 58-character title with lots of capitals can still get cut. The practical habit is to front-load the part that matters and let the tail be disposable.
A title like `Free Meta Tag Generator — Copy-Paste SEO and Social Tags` sits at 56 characters, which is a comfortable range. The description field works the same way against the 160-character limit, with one extra warning: anything under 70 characters is flagged as thin. A 40-character description isn't wrong, it just leaves space on the table, and Google often fills that space with text pulled from the page instead of what you wrote.
A description around 124 characters — `Turn your page title, description and social details into copy-paste-ready head meta tags with a live Google-style preview.` — passes both checks. Write descriptions as a sentence a human would click, not a keyword list; the field is a pitch, and Google's documentation on how snippets are generated is worth reading once if you want to know how often your text is actually used.
Step 2: Set the canonical URL and decide the indexing rule
The canonical field has to parse as an absolute `http://` or `https://` URL. Type `/blog/post` and the copy button stays disabled until you supply the full origin — that's deliberate, since a relative canonical in a pasted block is a common and confusing mistake. Use the self-referencing URL of the page you're on, not your homepage, unless you genuinely have a duplicate-content problem and want this page to consolidate onto another one.
In practice we suggest keeping the indexing select on `index,follow` for anything public and flipping to `noindex,follow` for staging sites, internal search results, and thank-you pages you don't want in results but still want crawled for links. The other two combinations are valid HTML, but `index,nofollow` is almost always a mistake — it invites the page into the index while telling crawlers to ignore everything on it.
The generator writes a `<meta name="robots" content="...">` tag from whichever option you pick, so there's no chance of a typo in the middle of a comma-separated value.
Step 3: Add the social image and your handle
The social share image URL is optional but it's the field that does the most work, because a post with a proper `og:image` looks different from one without. The tool accepts absolute URLs and warns you if the image isn't served over HTTPS or doesn't end in `.jpg`, `.png` or `.webp` — the three formats the major platforms handle reliably. The other warning worth heeding is the missing-image state: if you leave it blank and click copy, you'll get a card tag with no picture, which renders as a grey box on most platforms.
Use the standard 1200×630 crop. If you don't already have a clean brand mark to drop into the corner of that image, a quick route is to build one first with our Logo Maker With Canva walkthrough and export a transparent PNG.
The Twitter/X handle field is forgiving: type `yourbrand` or `@yourbrand` and it normalises to `@yourbrand`, strips stray whitespace, and rejects values containing spaces. When an image is present the generator emits `twitter:card` as `summary_large_image`; without one it falls back to the smaller card.
Reading the SERP preview and the validation pills
The right-hand pane is the reason the tool has a split layout at all. The preview card mimics a Google result — favicon placeholder, blue title link, green URL built from your canonical host and path, and the description underneath, truncated at the point where the character logic says the text would be cut. Watching the title clip mid-word in the preview is a faster correction than staring at a counter.
Under each field sits a validation pill: pass or warn, with a one-line hint telling you what to change. They cover length, URL validity and image format. What they can't cover is intent — a warning-free block can still describe the wrong page, so read the preview as a stranger would before you copy anything.
The preview is an approximation. Google changes layouts, mixes in favicons and site names, and rewrites titles often enough that no local preview can promise a match. Treat it as a sanity check on length and clarity, not a screenshot of the future.
Copy the block, then verify on the live page
Hit copy and you get a syntax-highlighted block containing the `<title>`, description, canonical, robots directive, `og:title`, `og:description`, `og:url`, `og:image`, `og:type`, and the Twitter card, title, description, image and creator tags. Paste it into your `<head>` after the charset and viewport tags — and remove any older title, description or Open Graph tags first, because two `<title>` elements on one page make the outcome depend on which one the parser reads first.
Then check the real thing: view the rendered source, run the URL through a link-preview debugger so the platform refreshes its cached card, and confirm the page is indexed the way you intend in Search Console. The Open Graph protocol reference lists every property the tool emits if you want to extend the block by hand.
Two honest limits. The generator doesn't know your templating engine, so it can't merge into a layout — you're pasting static values. And it can't guarantee Google will keep your title; you're influencing, not dictating. If you want the rest of what we've built for small sites, the rest of the free online tools on FreeOnline.fyi are one click away.