Meta Tag Generator
Write the head tags a page needs for search and social, with a live preview of how the link will look when shared.
Processed on your device — no upload
How the link will look when shared
example.com
Your page title appears here
And the description underneath, trimmed to fit the card.
Quotes and ampersands in your text are escaped automatically. An unescaped quote inside a content attribute ends the attribute early, which is how a description ends up truncated at the first apostrophe — and it is silent, because the markup is still valid.
How to use it
- Fill in the title, description and URL.
- Add a preview image.
- Paste the tags into your head.
How it works
Three audiences read these tags. Search engines take the title and description. Facebook, LinkedIn, WhatsApp and Slack read the Open Graph properties. X reads the Twitter ones, falling back to Open Graph where they are missing. They overlap heavily, which is why writing them by hand means typing the same sentence four times.
The lengths are display limits, not ranking factors. Around 60 characters for a title and 155 for a description is what fits before Google truncates. Going over does not penalise you — it means the end of your sentence is replaced with an ellipsis, and the end is usually where the reason to click was.
The description is not read as ranking signal at all. Google has said so for years and frequently rewrites it from the page anyway. It is advertising copy for the search result — write it for the person deciding whether to click.
The canonical URL says which address is the real one. A page reachable at both ?ref=twitter and its clean URL is one page, and a canonical tag consolidates them. Without it, you are competing with yourself.
og:image should be 1200 × 630. That is 1.91:1, which every platform crops towards. Declaring the width and height lets the crawler reserve the space before it has fetched the file, which is why the preview sometimes appears late without them.
A worked example
The preview card is the part worth using. Type a title over 60 characters and the counter turns amber; look at the card and you can see where it will be cut. Most people write the title, count the characters in their head, and find out what it looks like after they have shared it somewhere public.
The escaping is not cosmetic. Put an apostrophe or an ampersand in your description — "Ahmad's beans & blends" — and look at the output. Both are escaped. An unescaped quote inside a content attribute ends the attribute early, and the rest of your description becomes stray attributes the parser discards. The markup stays valid, nothing errors, and your description is silently truncated at the apostrophe. It is one of the most common bugs in hand-written meta tags.
No image means no large card. Without og:image, most platforms fall back to a small text-only preview that takes a fraction of the space in a feed. It is the single highest-return tag on the list — one image, reused across a whole section of a site, changes how every link from it looks.
Where the tags go. Inside <head>. Crawlers for social platforms generally do not run JavaScript, so tags added by client-side code after the page loads are frequently not seen. They have to be in the HTML the server sends.
To check the description reads well at its intended length, the word counter gives an exact character count, and the aspect ratio calculator confirms a preview image is the right shape.
Questions
Do meta tags help SEO?
The title does. The description does not affect ranking, but it decides whether anyone clicks the result, which is a different thing worth caring about.
How long should a title and description be?
About 60 characters for the title and 155 for the description. That is what fits before truncation. Longer is not penalised, it is just cut off.
Does the meta description affect ranking?
No. Google has stated it is not a ranking factor and often rewrites it from the page. It affects whether people click, which matters for a different reason.
What size should the og:image be?
1200 × 630 pixels, a 1.91:1 ratio. Keep important content away from the edges — different platforms crop differently.
Do I need Twitter tags if I have Open Graph?
Mostly no — X falls back to Open Graph. The one worth adding is twitter:card, which decides between a large image and a small summary.
What does the canonical tag do?
It names the real address for a page that is reachable at several URLs, so search engines consolidate them into one instead of treating them as duplicates.
Why is my shared link showing the wrong image?
Platforms cache previews aggressively. Use Facebook’s Sharing Debugger or LinkedIn’s Post Inspector to force a refresh after you change the tags.
Can I add these tags with JavaScript?
Not reliably. Social crawlers usually do not execute JavaScript, so the tags need to be in the HTML the server returns.
What does noindex actually do?
It asks search engines to keep the page out of results. Use it for thank-you pages, internal search results and staging — and check carefully before shipping it on anything else.
Related Web tools
Color Converter
HEX, RGB, HSL, HSV, CMYK
open$termiva contrast --wcagColor Contrast Checker
WCAG AA and AAA, with a fix
open$termiva palette --triadicColor Palette Generator
Harmonies and a full tint scale
open$termiva gradient --linearCSS Gradient Generator
Linear, radial and conic
open