Skip to main content

Meta Tag Generator

Fill a few fields to instantly generate SEO title/description, Open Graph and Twitter Card tags — with a search preview.

Google search preview

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

  1. Enter the title, description, page URL and preview image URL.
  2. The search preview and character counts update live on the right; the full tags are generated below.
  3. 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.

Frequently Asked Questions

What’s the difference between Open Graph and regular meta tags?

The plain <title> and <meta name="description"> are for search engines; Open Graph (og:) and Twitter Card tags control the title, description and thumbnail shown when your link is shared on Facebook, X, LinkedIn and the like. They serve different purposes, so it’s best to fill both.

How long should the description be?

Google usually shows about 150–160 characters in a snippet before truncating. The tool shows a live character count so you can keep it in range.

What size should og:image be?

A social thumbnail works best at 1200×630 pixels (1.91:1), using an absolute URL (starting with https). Too small or a relative path and it may not show when shared.

Where do these tags go?

All of them go inside the HTML <head>. Most static sites and CMSs have a "custom head" or SEO field where you can paste them.

Related reading

Open Graph and Meta Tags: What Actually Controls Your Link Preview →

Embed this tool

Add this tool to your own website or blog for free — just copy and paste the code below (it includes a link back to this site).