Meta Tag Generator
Generate SEO title, meta description, Open Graph, and Twitter Card tags to paste into your page head.
- Free, no account
- No watermark
- No usage limit
About the Meta Tag Generator
Most meta tag generators hand you a block of tags and send you off. You paste it, publish, drop the link in Slack, and that is the moment you learn the title got chopped in half or the image never loaded. This one shows you the result as you type. The Google snippet, the Facebook card, and the X card all render from the same fields you are filling, so the cut-off point shows up before the page ships instead of after a colleague screenshots the broken card back to you.
There is a second annoyance worth killing. Half of these tags are copies of one another. Your og:title is almost always the page title, twitter:title is almost always og:title, and the description turns up three more times under different names. Fill it all by hand and you are retyping the same two sentences into six boxes, then chasing the one stale copy a month later when the headline changes and the card still shows last quarter's title. Write your title and description once here and the tool fans them into the Open Graph and Twitter tags on its own. Blank social fields drop out of the output, and every value is escaped, so a title like Tips & Tricks becomes a valid tag instead of a broken one.
It runs entirely in your browser, which is why it keeps working with the wifi off. Nothing you type is uploaded or stored, and it is gone the moment you close the tab.
How to use
- Type your title and meta description. These become the
<title>and<meta name="description">tags, and they are the fallback for every social tag underneath. Two meters track the rendered width as you go. Green means it fits, amber means you are close to the edge, red means Google will trim it. - Add the canonical URL. It writes a
<link rel="canonical">, doubles as your og:url, and feeds the domain and breadcrumb in the Google preview. There is an author field too if you want the byline tag. - Fill Open Graph only where you want a change. Leave og:title or og:description blank and the tool reuses your page title and description. Set og:image to your preview picture, then pick an og:type: website for most pages, article for posts, product for a store item, profile for a person.
- Pick a Twitter card. summary_large_image is the full-width picture most feeds reward, summary is the small square thumbnail. Your Open Graph title, description, and image carry over to the Twitter tags on their own.
- Flip through the previews. Toggle Google, Facebook, and X above the card. Each one rebuilds live from your fields, so you see the wide card, the square card, and the search snippet before committing to anything.
- Copy and paste. Hit Copy tags, drop the block inside your page's
<head>, and publish. Share copies a link that reopens this exact draft, handy for handing a set of tags to a teammate. Clear wipes every field.
Read the preview, not the character count
Old advice says keep your title under 60 characters and your description under 155. It is a rough proxy, and it lies often enough to matter, because Google does not count characters, it measures the rendered pixel width. A title full of wide capitals like W and M runs out of room well before 60 characters, and one made mostly of narrow letters like i and l can pass 60 and still fit. The meters here measure the actual rendered width the way the search page does, so an all-caps headline shows red early and a narrow one stays green longer.
Worth knowing where the meters get their budgets, because it is not from Google. Google states there is no limit on the length of a title element or a meta description and says it trims the snippet to fit the space, so the 580px and 920px marks here are third-party measurements of live results, read 2026-08-25. Run ordinary mixed-case text through the same table and the 580px title budget holds about 60 characters. The 920px description budget holds about 148, which is where that remembered 155 starts to overrun.
When the meter goes red, the fix is almost always to front-load. Put the keyword and the concrete detail in the opening words and treat the tail as a bonus that some results show and others clip. The Google preview mirrors this with a real ellipsis at the exact spot the snippet gets cut, so you are editing against the truth rather than a guideline.
Social cards clip differently, and tighter. A card in a scrolling feed gives you about one line of title and a line or two of description before it trims, and it shifts by platform and by device, so there is no single safe number. Same move, lead with the hook, then check the Facebook and X previews to see roughly where each one stops.
Fixing the tags on a page that is already live
The most common reason people land here is a link that shared badly. If that is you, paste the page's current head HTML into the import box at the top. The tool reads your existing <title>, description, canonical, Open Graph, and Twitter tags and fills every field, so you are not retyping what is already sitting on the page. Fix the one thing that was wrong, watch the preview correct itself, and copy the fresh block back out, which is easier than hand-editing the markup in a template you only half remember.
Frequently asked questions
Why does my shared link still show the old preview after I fixed the tags?
The platform cached it. Once Facebook, LinkedIn, or X has scraped your URL, the preview data lives on their side, so editing your HTML does not refresh it on its own. Paste the URL into the Facebook Sharing Debugger or the LinkedIn Post Inspector and re-scrape to force a new fetch. WhatsApp is the stubborn one, with no debugger of its own and no published cache window. Developers report anything from a day to several weeks, so tack a harmless ?v=2 on the end when you need a fresh crawl rather than waiting it out.
My og:image is not showing up at all. What is wrong?
Usually one of four things. The URL is relative instead of absolute, so the crawler cannot resolve it. The file is huge and times out, keep it under a megabyte. The image sits behind a login or a robots rule the crawler cannot pass. Or the tags are correct and the platform is serving an old cached result, in which case re-scrape it. Check the absolute URL first, it is the culprit far more often than not.
What size should the social image be?
Build it at 1200 by 630 pixels, the 1.91:1 ratio that renders cleanly across Facebook, LinkedIn, X, WhatsApp, and Discord. Keep your logo and any text toward the middle, since a few platforms crop the edges, and save it as JPG or PNG because social crawlers are still shaky on WebP. The one rule you cannot bend is an absolute URL, the full https address, or the crawler cannot fetch it.
Should I bother filling the keywords box?
No. It is in the form because people look for it, but leave it empty. Google announced in 2009 that it does not use the meta keywords tag for ranking, and Bing's Duane Forrester said in 2014 that a stuffed one reads to Bing as a spam signal rather than a ranking one, so filling it does nothing good. You will also notice charset and viewport are missing from the form. That is deliberate, they are set-once boilerplate that never changes between pages, so you paste them into your template once instead of regenerating them every time.
Do these tags help my Google ranking?
Not the social ones. og:title, og:description, and the Twitter tags exist to build the share card, and Google does not read them for ranking. Of the two that touch search, the title is a genuine ranking signal and your headline in the results, while the description is not a ranking factor at all and only decides whether the listing looks worth clicking. So a clean set of tags will not push you up the page by itself. It does raise your click rate in search and give you a preview people actually share, and that is the traffic you were after in the first place.
What is the real difference between the two Twitter card types?
summary_large_image gives you the big edge-to-edge picture and wins for almost anything with a decent landscape image. The plain summary card is the small square thumbnail beside the text, and it is the better pick when you do not have a strong wide image, since a stretched or awkwardly cropped hero looks worse than a tidy little square. The X preview shows both layouts, so switch the dropdown and see which one flatters your image.
A stray ampersand used to break my tags. Does this handle that?
It does. Every value you type is escaped before it lands in the markup, so a literal & becomes & and quotes and angle brackets get the same treatment. Hand-write a tag with a raw & or a loose double quote in the middle of an attribute and you can silently truncate the whole thing, which is a miserable bug to track down because the page looks fine right up until a crawler reads it.