Meta Title & Description Tag Generator
Build title, meta description, and Open Graph tags for a page. Preview length before you paste the HTML into your site.
Runs in your browser. Nothing you enter is uploaded.
Overview
Most pages need the same eleven lines in the head, and most people assemble them by copying an old template and forgetting to change one value. This generator takes four inputs - title, description, canonical URL, and an optional image - and writes the title tag, meta description, five Open Graph properties, and four Twitter card properties in one consistent block.
The point is coverage without duplication of effort. Search engines read the title and description, Facebook and LinkedIn read the og:* properties, X reads twitter:*, and everything else falls back to Open Graph. Writing one set of values and emitting all three families keeps them from drifting apart.
Where the three tag families overlap and where they do not
The title tag and meta description are the search layer. Open Graph is the social and messaging layer, read by Facebook, LinkedIn, Slack, WhatsApp, Discord, and most chat clients. The twitter:* family exists because X built its card format before Open Graph was universal; it still honours twitter:card to select the layout, and falls back to og:* for the content when the twitter equivalents are absent.
This generator writes twitter:card as summary_large_image, which requests the wide image layout rather than the small square thumbnail. That is the right default for articles and landing pages. If your image is a logo or an icon rather than a scene, the plain summary card usually looks better and is worth editing in by hand.
The og:image and twitter:image lines are only emitted when you supply an image URL, so a page without a dedicated share image produces a smaller, valid block rather than tags pointing at nothing.
How the block is composed
The title value populates three places - the title element, og:title, and twitter:title - and the description populates meta description, og:description, and twitter:description. When a field is empty, a visible placeholder string is written instead of an empty attribute, so an unfinished block is obvious rather than silently blank.
Character counters on the title and description fields show the running length against the conventional 60 and 160 targets. These are guidance, not enforcement: nothing is truncated, and you can exceed either. og:type is fixed to website and the canonical URL is written to og:url.
Note that values are inserted without HTML escaping, so a double quote inside your title or description will terminate the content attribute. If your copy contains quotation marks or ampersands, replace them with " and & after copying, or reach for the Open Graph generator which escapes them for you.
A landing page head block
Input
Title: Free Image Compressor - Shrink JPEGs in Your Browser Description: Compress photos locally with a live quality slider. Nothing uploads. Canonical URL: https://example.com/tools/image-compressor OG image: https://example.com/img/compressor-og.png
Output
<title>Free Image Compressor - Shrink JPEGs in Your Browser</title> <meta name="description" content="Compress photos locally with a live quality slider. Nothing uploads."> <meta property="og:title" content="Free Image Compressor - Shrink JPEGs in Your Browser"> <meta property="og:description" content="Compress photos locally with a live quality slider. Nothing uploads."> <meta property="og:url" content="https://example.com/tools/image-compressor"> <meta property="og:type" content="website"> <meta property="og:image" content="https://example.com/img/compressor-og.png"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Free Image Compressor - Shrink JPEGs in Your Browser"> <meta name="twitter:description" content="Compress photos locally with a live quality slider. Nothing uploads."> <meta name="twitter:image" content="https://example.com/img/compressor-og.png">
Eleven lines from four inputs, with the same title and description reused across all three families. In production you would likely shorten og:title, since the em-dash suffix that helps in a search result is wasted space on a card that already displays your domain.
Limitations
- Values are not HTML-escaped. Double quotes, ampersands, and angle brackets in your copy will produce malformed attributes and must be replaced manually.
- og:type is hard-coded to website. Blog posts should be changed to article, and product pages to product, after copying.
- No canonical link element, robots directive, viewport, or charset tag is produced - this covers the title, description, and share tags only.
- The 60 and 160 character targets are conventions. Google truncates on pixel width, so a title of wide characters clips before the counter turns over.
- Nothing is fetched or verified. A mistyped image URL produces perfectly valid markup pointing at a 404.
When not to use this tool
- If quotes or ampersands appear in your title or description, use the Open Graph generator instead - it escapes attribute values.
- If you only want to see how the search snippet will wrap, the SERP preview answers that without generating markup.
How to use it
- 1
Enter the title and watch the character counter, aiming to finish the distinctive part well before 60.
- 2
Write a description that completes a sentence under roughly 160 characters, since it doubles as your social card copy here.
- 3
Add the canonical URL and an absolute 1200×630 image URL so the og:image and twitter:image lines are included.
- 4
Copy the block into your head template, change og:type to article on editorial pages, and escape any quotes or ampersands your copy contains.
Questions
Do I still need twitter:* tags if I have Open Graph?
X reads Open Graph as a fallback for content, so the card will render either way. The one tag that genuinely matters is twitter:card, which selects the layout - without it you may get a small thumbnail where you wanted a wide image. Keeping the rest costs nothing and removes ambiguity.
Should the og:title match the title tag exactly?
They can differ, and often should. A title tag is written for a results page where a brand suffix aids recognition; a social card already shows your domain, so those characters are better spent on the hook. Generate them together here, then trim the og:title by hand.
Where in the head do these go?
Anywhere inside <head>, though placing them high up is a habit worth keeping - some scrapers read only the first portion of the document before giving up. Ensure they are server-rendered rather than injected by client-side JavaScript, since most social scrapers do not execute scripts.