SEO Meta Tag Generator

Turn a page title, description and a few optional fields into a ready-to-paste block of head markup. The generator writes the basic tags, Open Graph tags, a Twitter Card block and a Schema.org JSON-LD snippet, with live character counters and a search-result preview so you can see what you are about to publish before you paste it.

Six Fields, Four Groups of Tags

Each field feeds one or more tags. The output is grouped into Basic, Open Graph, Twitter Card and Schema.org, and five tabs let you view the whole block or a single group. Within a group the order is fixed, and a field left blank simply produces no tag in that group.

• The Page Title field is the busiest: it becomes the title element and a title meta tag, and is reused as og:title, twitter:title and the Schema.org name.
• Meta Description becomes the description meta tag, og:description, twitter:description and the Schema.org description. Keywords becomes a keywords meta tag only.
• Canonical URL produces a link element with a canonical relation, and also fills og:url and the Schema.org url.
• OG Image URL becomes og:image, twitter:image and the Schema.org image. Its presence also changes twitter:card from the plain summary type to summary_large_image.
• Site Name or Author becomes an author meta tag, plus og:site_name and the Schema.org author.
• Two tags are written even when the form is otherwise empty: og:type, fixed to website, and twitter:card. Everything else depends on a field having a value.

Generating a Tag Block

1. Type the page title into Page Title. The counter beside the label shows the running length against a 60-character target and turns red once you pass it, which is where search engines typically truncate a title.
2. Write the Meta Description against its own counter and 160-character target. This is the text a reader may see under the link, so make it a complete sentence.
3. Optionally fill Keywords, the Canonical URL, the OG Image URL and the Site Name or Author. Adding an OG image is what upgrades the Twitter card to the large-image layout.
4. Watch the search-result preview above the tabs. It redraws on every keystroke and cuts the title at 60 characters and the description at 160, adding an ellipsis, so you can see the trimmed result as a searcher would.
5. Switch between the All Tags, Basic, Open Graph, Twitter and Schema.org tabs to inspect one group at a time. The label under the block reports how many tags the current view holds.
6. Press Generate to rebuild manually and confirm, then use Copy HTML or Download .html to keep the block. Use Clear to empty every field and start again.

A Filled Form and Its Output

Set a title of "Trail Coffee Brewing Guide", a description of "How to brew good coffee at a campsite with minimal gear.", a canonical URL of https://example.com/trail-coffee, an OG image of https://example.com/coffee.jpg and a site name of "Bean Lab". The All Tags view then holds sixteen tags in four blocks.

• The Basic block runs five tags in order: the title element, the title meta tag, the description meta tag, the canonical link and the author meta tag. Neither Keywords nor anything else you left blank appears.
• Open Graph adds six: og:title and og:description mirroring the title and description, a fixed og:type of website, og:url carrying the canonical value, og:image and og:site_name.
• Twitter Card adds four: twitter:card set to summary_large_image because an image was supplied, then twitter:title, twitter:description and twitter:image.
• Schema.org adds one JSON-LD script block whose object lists the name, description, url, image and a nested author organisation. You can copy it whole into the head of the page.
• Type an ampersand into the title, as in "Brewing & Grinding", and every place the title appears shows it as & — the generator escapes ampersands, angle brackets and double quotes so a stray character cannot break the markup.

Other Routes to the Same Head Markup

Alternative	Notes
Hand-writing the tags	Completely transparent and needs no tool, but it is easy to mistype a quote or forget to escape an ampersand, and there is no consistency check across pages. It works best for a handful of one-off pages that rarely change.
A generator like this one	Produces a tidy block quickly across four groups — basic meta, Open Graph, Twitter Card and Schema.org — and handles escaping for you. Its limit is that it only knows the fields on the form and the shapes it was programmed to emit, so anything unusual — a product or article schema, extra social properties — still has to be added by hand afterwards.
A site framework's head component	When a site is built from templates, meta tags are usually produced programmatically from page data, which guarantees consistency and makes site-wide changes trivial. That is more robust than pasting static tags, but it needs a build setup rather than a browser page.
A content management system's SEO field	Many CMS platforms expose title, description and image fields directly and render the tags for you, which keeps non-technical editors away from HTML. The trade-off is less control over the exact output and a dependency on the platform's defaults.

Where the Output Goes and Where It Does Not

The generator is a self-contained page: it assembles strings in the browser and offers to copy or download them. It does not publish, validate or fetch anything.

• The generated block is only text. Pasting it into a page does not make it live; the host page has to serve the markup in the document head for a crawler or social platform to read it.
• Nothing typed into the form is uploaded. The assembly happens locally, and the only outbound actions available are copying to your clipboard and saving a local file.
• The counters and the preview are guidance, not guarantees. The 60 and 160 targets reflect common display limits, but search engines trim by pixel width and vary the cut, so a block that fits the counters can still be shortened in a live result.
• The tool does not verify that a canonical URL resolves or that an image URL is reachable. Those are judgements it leaves to you.
• Because the fields are not persisted, a reload clears the form. Save the downloaded file or copy the block before closing the tab if you want to keep the result.
• The escaping only covers the characters that would break HTML — ampersand, the two angle brackets and the double quote. It is not a general sanitiser, and it is intended for the kind of short, plain text these fields hold.

Meta Tag Questions

What is actually in the generated block?

Four groups, up to sixteen tags for a fully filled form. Basic holds the title element, the title meta tag, and the description, keywords, canonical and author tags; Open Graph holds og:title, og:description, og:type, og:url, og:image and og:site_name; Twitter Card holds twitter:card plus title, description and image; Schema.org holds one JSON-LD script block. Only the fields you fill in appear, except that og:type and twitter:card are always written. A form with just a title filled in produces the two title lines plus those two fixed tags.

Which characters get escaped, and why does it matter?

Ampersands, the less-than and greater-than signs, and double quotes are replaced with their HTML entity forms — &, <, > and ". This matters because a raw ampersand or quote inside an attribute value can break the markup or, worse, let injected text alter the page. Escaping means a title containing "Brewing & Grinding" still produces valid tags in every block the title appears in.

What do the counters and the preview actually do?

The counter beside Page Title counts characters up to a 60-character target and turns red past it; the one beside Meta Description does the same against 160. The preview renders your canonical URL, title and description the way a search result looks, cutting the title at 60 characters and the description at 160 and appending an ellipsis when it trims. Both are hints rather than hard rules, because search engines decide their own cut-off points.

Why does the Twitter card say summary in one case and summary_large_image in another?

It follows whether you supplied an OG Image URL. With an image the card is set to summary_large_image, the wide layout; without one it falls back to the plain summary type, since a large-image card with no image would not render as intended. Adding an image and rebuilding flips the value for you.

Is the generated markup enough on its own?

It covers the common head tags — basic meta, Open Graph, a Twitter Card and a generic WebPage JSON-LD — but it is deliberately generic. It does not emit type-specific structured data such as Product, Article or FAQ schema, and it does not know about every social or search property. Treat it as a correct starting point that you extend by hand when a page needs more.

Last verified: October 3, 2026

Launch SEO Meta Tag Generator

All Tools · All Tools · About · How We Test · Contact · Privacy

Maintained by Huang Bin · Last updated October 3, 2026