What is a meta tag generator?
Meta tags are pieces of information placed in the HTML <head> for search engines and social platforms to read. This meta tag generator lets you fill a few fields and instantly produces the SEO title/description, Open Graph and Twitter Card tags, plus a Google snippet preview so you can see the effect as you type. Everything runs locally in your browser.
How to use
- Enter the title, description, page URL and preview image URL.
- The search preview and character counts update live on the right; the full tags are generated below.
- Click "Copy all" and paste into your site’s
<head>.
Common use cases
- Add a complete set of SEO and social-sharing tags to a new page in one go.
- Check whether your title and description will be truncated in search results.
- Need structured data or other tools? Use the JSON formatter to tidy JSON-LD.
Why didn't the thumbnail and title update when I shared the link?
You just filled in the Open Graph tags, shipped the page, eagerly pasted it into Facebook or Slack — and the thumbnail is still the old one, or blank. This is almost never a bad tag; it's that social platforms cache the preview. The first time a platform fetches your page it stores a copy, and it won't re-fetch the same URL every time after. The fix is to run that platform's official debugger / re-scrape tool (like the Facebook Sharing Debugger) to force a fresh fetch. The three other classic traps: first, og:image using a relative path that the platform can't resolve — it must be an absolute URL starting with https://; second, an image that's too small — most platforms want at least 200×200 and recommend 1200×630; third, the tags in the wrong place — they must live inside <head>, and are ignored in the <body>. If all of that checks out and it still won't budge, run the re-scrape tool before anything else. To tidy the JSON-LD structured data a page also uses, pair this with the JSON formatter.
What does a complete set look like, and which length matters?
The complete output this page generates from five fields:
<title>Free Online Toolbox</title>
<meta name="description" content="Image and PDF converters that run in your browser.">
<link rel="canonical" href="https://yunknow.cc/">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Free Online Toolbox">
<meta property="og:description" content="Image and PDF converters that run in your browser.">
<meta property="og:url" content="https://yunknow.cc/">
<meta property="og:image" content="https://yunknow.cc/og.png">
<meta property="og:site_name" content="Yunknow">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Free Online Toolbox">
<meta name="twitter:description" content="Image and PDF converters that run in your browser.">
<meta name="twitter:image" content="https://yunknow.cc/og.png">Three things worth noticing: og:type is present (the most commonly missing tag); twitter:card is summary_large_image (that is what makes the wide preview appear — omit it and you get a small square); and the description is repeated three times, once per namespace, because no consumer reads another namespace's copy. The counters beside the fields are the part people skip: that title reported Title 19 chars and the description Description 50 chars — write to the counter, not to the field width.