Meta Tag Generator: Titles, Descriptions and Social Cards That Fit
Meta tags are the only part of your page that a search result and a shared link are built from, and both cut them off at a width rather than a character count. This generator measures your title and description in pixels using the fonts Google renders results in, shows the result exactly as it would be truncated, previews the Facebook, LinkedIn and X cards, and writes the complete set of tags for you to paste. Nothing is fetched and nothing you type is transmitted.
Table of Contents
How to Use This Generator
Write the title and watch the pixel counter. Green means it fits, red tells you exactly how many pixels over you are, and the preview shows where the cut lands.
Switch between desktop and mobile. The two have different container widths and slightly different type sizes, so a title can fit on one and not the other.
Add the URL and image before checking the cards. The social previews use the same values as the search preview, so all three stay in step as you edit.
Copy the whole block into your head. The output includes the Open Graph and Twitter Card tags as well as the primary ones, so a single paste covers search and every network.
Why Pixels Beat Character Counts
Google truncates at a width. A result has a fixed container, so the question is how wide your text renders rather than how many characters it contains.
Characters are not equal. The letter i is roughly a quarter the width of a W. A title of sixty narrow characters can fit comfortably where fifty wide ones are cut, which is why any single character limit is wrong for most titles.
This tool measures the real thing. Your text is measured in a canvas using the font and size results are rendered in, so the number shown is the actual rendered width rather than an estimate from a character count.
Front load anyway. Even within the limit, put the words that matter first. Scanning eyes and truncation both punish a title that saves its point for the end.
Writing a Title That Earns the Click
One page, one promise. A title that tries to cover three topics ranks for none of them well. Say what this page is, specifically.
Put the primary phrase near the front. It is the first thing read and the last thing truncated, so a title that opens with your brand and buries the subject wastes the most valuable position on the page.
Brand at the end, if at all. A short site name after a separator is normal. For a well known brand it can help, and for an unknown one it mostly consumes width.
Google may rewrite it. Titles get replaced for a meaningful share of queries, usually when the original is stuffed, vague, or ignores the query. A clear and accurate title is the best defence.
Writing a Description That Works
Treat it as ad copy. It has no ranking effect, so its only job is to convince someone to choose your result over the nine others on the screen.
Answer the question the title raises. The title says what the page is, and the description says what the reader gets, ideally with something concrete such as a number, a format or a constraint.
Include the phrase people actually search. Matching words are bolded in results, which draws the eye even though it changes no ranking.
Write one per page. Duplicated descriptions across a site are a wasted opportunity and a common finding in any technical audit.
Open Graph and Social Cards
Open Graph is the shared standard. Facebook defined it, and LinkedIn, WhatsApp, Slack, Discord and most messaging apps read the same tags, so it covers the majority of shares on its own.
X reads its own tags and falls back. Twitter Card tags take priority, and without them X uses Open Graph. Providing both, as the output above does, removes the guesswork.
Without these tags the network guesses. It will pick some text and some image from the page, and the result is rarely what you would have chosen.
Networks cache aggressively. After changing tags, use the platform debugger to force a refresh, otherwise a shared link keeps showing the old card for a long time.
Getting the Share Image Right
Twelve hundred by six hundred and thirty pixels. That ratio is what every major network crops cleanly, and it is why the preview above uses it.
Use an absolute URL. A relative path works on your page and fails in every card, because the crawler resolves it from its own context rather than yours.
Keep text away from the edges. Different surfaces crop differently, so anything important should sit well inside the frame.
Set the alt text. It is announced by screen readers on several platforms and costs one extra tag.
Canonical and Robots Directives
Canonical should be absolute and self referencing. Every page pointing at its own full URL is the safe default, and it removes the duplicate that tracking parameters would otherwise create.
noindex and nofollow are different things. The first keeps a page out of the index, the second stops link equity flowing from it. They are set independently above because they are needed independently.
noindex is not a robots.txt job. A page blocked in robots.txt can still be indexed from external links, because the crawler never reads the tag that would have excluded it. Allow the crawl and use the tag.
Common Mistakes to Avoid
The same title on every page. A template that outputs the site name alone wastes the strongest signal you have, on every single page.
Keyword stuffing. Repeating a phrase three times in a title is the pattern most likely to get it rewritten, and it reads badly to the person deciding whether to click.
Relative social image URLs. The single most common reason a card shows no image at all.
Forgetting to refresh the cache. Fixing the tags and never asking the platform to recrawl means the broken card is what everyone keeps seeing.
Frequently Asked Questions
About the preview: search engines and social networks change their layouts regularly, and Google rewrites titles and descriptions for a large share of results. Treat this as an accurate rendering of what you are proposing rather than a promise of what will be shown.