CSS Gradient Generator
Build linear, radial and conic gradients and copy the CSS.
Design & SEO
Meta Tag Generator
Build Open Graph and Twitter tags with a live SERP preview.
What it does. Meta tags tell search engines and social platforms how to title, describe and illustrate your page. This generator builds the standard SEO tags plus Open Graph and Twitter Card markup, and previews exactly how the result will look in Google, on Facebook, LinkedIn, X and Slack before you ship it.
Runs in your browserNothing uploadsNo signupWorks offline
How to use Meta Tag Generator
- Fill in your page title, description, URL and social image.
- Check the live previews for Google results and for each social platform.
- Copy the generated HTML and paste it into your page head.
Which meta tags actually matter in 2026?
A much shorter list than most generators produce. Several tags that appear in older tutorials have been ignored by search engines for over a decade.
| Tag | Matters | Notes |
|---|---|---|
| title | Critical | The single strongest on-page signal and the clickable headline |
| meta description | Important | Not a ranking factor, but it drives click-through rate |
| canonical | Critical | Prevents duplicate-content dilution |
| robots | Situational | Only when you need to deviate from index, follow |
| og:title / og:description / og:image | Important | Every social platform and chat app reads these |
| twitter:card | Important | Controls whether X shows a large image or a small one |
| viewport | Critical | Without it, mobile rendering breaks entirely |
| meta keywords | Ignored | Google dropped support in 2009. Bing treats it as a spam signal |
| meta author / revisit-after / geo.region | Ignored | No search engine has used these in over a decade |
How long should a title and description be?
Google truncates by pixel width rather than character count, but characters are a usable proxy.
Titles have about 580 pixels on desktop, which is roughly 60 characters in the font Google renders. Put the primary keyword near the front, since truncation removes the end. Include the brand name only if it adds credibility — for a new site it consumes characters you need for the topic.
Descriptions have about 920 pixels, roughly 155 characters, and mobile shows slightly fewer. Google rewrites descriptions for around 70% of results when it judges its own snippet more relevant to the query, so treat yours as a strong suggestion rather than a guarantee. A well-written one still wins the majority of the time, and it is the only control you have over that line.
Neither is a ranking factor in the direct sense. Both are click-through factors, and click-through feeds back into performance.
What size should the Open Graph image be?
1200 × 630 pixels, a 1.91:1 ratio, under 5 MB. That single size renders correctly on Facebook, LinkedIn, X, Slack, Discord, WhatsApp and iMessage.
Three details cause most failures. The URL must be absolute — a relative path silently fails on every platform. The image must be publicly reachable without authentication, which is why staging sites behind basic auth never show a preview. And platforms cache aggressively, so changing the image after a link has been shared requires forcing a re-scrape through Facebook’s Sharing Debugger or LinkedIn’s Post Inspector.
Text on the image should be large. A 1200-pixel-wide card renders at roughly 500 pixels in a feed and smaller in a chat app, so body-copy-sized text is illegible where it matters.
Do I need both Open Graph and Twitter tags?
Not entirely. X falls back to Open Graph tags when Twitter-specific ones are absent, so og:title, og:description and og:image cover the basics on every platform.
The one Twitter tag genuinely worth adding is twitter:card. Set to summary_large_image, it produces the full-width image card; without it, X defaults to a small thumbnail beside the text, which occupies far less feed space and performs noticeably worse.
Everything else — twitter:title, twitter:description — duplicates Open Graph for no benefit unless you deliberately want different copy on X than elsewhere.
Frequently asked questions
Do meta keywords still work?
No. Google stopped using them in 2009 and Bing has said it can be a negative signal. Leave the tag out entirely.
Why is my social preview showing the wrong image?
Almost always a cached scrape. Use Facebook’s Sharing Debugger or LinkedIn’s Post Inspector to force a re-fetch after changing the tag.
What is a canonical tag for?
It tells search engines which URL is the authoritative version when the same content is reachable at several addresses — with and without a trailing slash, with tracking parameters, or across http and https.
Should every page have a unique description?
Yes. Duplicate descriptions across a site are a common flag in Search Console and waste the strongest piece of copy you control in a search result.
Does the order of meta tags matter?
No, but charset should come first — within the first 1024 bytes — so the parser knows the encoding before it reads anything else.
What is og:type?
It classifies the content — website, article, product, video. Facebook and LinkedIn use it to choose a card layout. "website" is the correct default for most pages.
Is my content sent anywhere?
No. The tags are assembled as a string in this page. Nothing is submitted.
Guides for Meta Tag Generator
- Meta Tags That Actually Affect Results7 min read
- What Makes a Good URL Slug6 min read
- How to Write a Title Tag That Actually Fits7 min read