Free tool
Free meta tag generator
This free meta tag generator builds your title, description, Open Graph, and Twitter Card tags — then shows you an og preview of exactly how the page will look on Google, Facebook, LinkedIn, and X before you publish. No sign-up, no server round-trip, just copy-ready HTML.
Meta tag generator
Fill in the fields — every tag and preview updates live.
Google search preview
Generate perfect title, meta description, Open Graph, and Twitter Card tags in seconds. Preview exactly how your page looks on Google, Facebook, and X before y…
Facebook & LinkedIn card
Generate perfect title, meta description, Open Graph, and Twitter Card tags in seconds. Preview exactly how your page looks on Google, Facebook, and X before you ship.
X (Twitter) summary card
Generate perfect title, meta description, Open Graph, and Twitter Card tags in seconds. Preview exactly how your page looks on Google, Facebook, and X before you ship.
Generated meta tags
<title>Free Meta Tag Generator — SEO & Social Preview | fewly</title>
<meta name="description" content="Generate perfect title, meta description, Open Graph, and Twitter Card tags in seconds. Preview exactly how your page looks on Google, Facebook, and X before you ship." />
<link rel="canonical" href="https://fewly.tech/tools/meta-tag-generator" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://fewly.tech/tools/meta-tag-generator" />
<meta property="og:title" content="Free Meta Tag Generator — SEO & Social Preview | fewly" />
<meta property="og:description" content="Generate perfect title, meta description, Open Graph, and Twitter Card tags in seconds. Preview exactly how your page looks on Google, Facebook, and X before you ship." />
<meta property="og:site_name" content="fewly" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Free Meta Tag Generator — SEO & Social Preview | fewly" />
<meta name="twitter:description" content="Generate perfect title, meta description, Open Graph, and Twitter Card tags in seconds. Preview exactly how your page looks on Google, Facebook, and X before you ship." />
<meta name="twitter:site" content="@fewlytech" />How to use this meta tag generator
- Write your title. Keep it under the character counter's green zone so Google doesn't truncate it in search results.
- Write your meta description. Summarize the page in one or two sentences that make someone want to click.
- Add your page URL. This becomes your canonical link and your
og:urltag. - Add an image URL. A 1200×630 image is used for the Facebook, LinkedIn, and X social media preview cards.
- Set your site name and X handle. These populate
og:site_nameandtwitter:site. - Copy the generated code and paste it into your page's
<head>.
Why title and description length matter
Search engines and social platforms don't show your full title and description forever — they cut them off, or truncate, once they run out of pixel width or hit a character limit. If you write past that limit, the important part of your message might get chopped off with an ellipsis, or replaced entirely by an auto-generated snippet pulled from the page body.
That's why this meta tag generator shows live character counters instead of making you guess:
- Title: green up to 60 characters, amber from 61–70, red past 70. Google typically renders titles in a fixed pixel width (roughly 580px on desktop), which works out to around 50–60 characters for most fonts. Titles longer than that are usually truncated with an ellipsis, and titles that run significantly long are sometimes rewritten by Google entirely, using on-page text instead of your
<title>tag. - Description: green up to 160 characters. Google's snippet space is also pixel-based and varies by device, but 150–160 characters is the safe range across desktop and mobile. Descriptions that go long are truncated; descriptions that are missing, thin, or irrelevant to the query are frequently replaced by an auto-generated snippet.
The takeaway: front-load the important words. Put your primary keyword and value proposition in the first 50–60 characters of both the title and description, because that's the part guaranteed to survive truncation on every device and platform.
Title and description best practices
- One primary keyword per page. Put it near the start of the title — search engines and users both weight the first few words more heavily.
- Make every title unique. Duplicate titles across pages confuse search engines about which page to rank and hurt click-through rate in results that show multiple pages from your site.
- Write for humans, not just algorithms. A title stuffed with keywords reads badly and gets skipped over. A title that promises a clear benefit gets clicked.
- Use your brand name sparingly. Appending “| Brand Name” at the end is common and fine, but don't let it eat into your character budget on pages where the topic matters more than the brand.
- Descriptions are marketing copy, not a summary. Google doesn't use your meta description as a ranking factor directly, but it heavily influences click-through rate, which is one of the strongest indirect SEO signals you control. Write it like ad copy: a hook, a benefit, and if there is room, a reason to act now.
- Avoid duplicate descriptions. Just like titles, identical descriptions across many pages waste an opportunity to differentiate each page in search results.
- Don't use quotation marks or special characters carelessly. Unescaped characters can break the HTML output or get rendered incorrectly in the SERP. This tool escapes everything automatically so you don't have to think about it.
The Open Graph protocol, explained
The Open Graph protocol was introduced by Facebook in 2010 so that any web page could become a rich object in a social graph — with a title, description, image, and type, instead of just a bare blue link. Today it's the de facto standard read by Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, and most other platforms that unfurl links into preview cards. If you only add one set of tags beyond the basics, make it Open Graph.
The core tags this open graph generator produces are:
og:type— what kind of object the page represents.websiteis the safe default for most pages; articles, products, and videos have their own types with additional tags.og:url— the canonical URL for this content. This should match yourrel=canonicallink so crawlers and social platforms agree on which URL is authoritative.og:title— the headline shown in the preview card. It can differ from your<title>tag, but keeping them aligned avoids a confusing mismatch between the browser tab and the shared link.og:description— the supporting text under the title in the card.og:image— the preview image. This is the single highest-impact tag for social click-through rate; a missing or broken image tag means most platforms fall back to a plain text link or skip the preview entirely.og:site_name— the human-readable name of your site or brand, shown as a small caption above or below the title on most platforms.
Twitter Cards (X) and how they differ from Open Graph
X (formerly Twitter) originally used its own twitter:* meta tag namespace, and while the platform will fall back to og:* tags if Twitter-specific ones are missing, explicitly setting both gives you full control and avoids inconsistent rendering. This tool generates the summary_large_image card, which is what almost every modern site wants:
twitter:card— set tosummary_large_imagefor a full-width image card. The alternative,summary, renders a small square thumbnail beside the text and is mostly legacy at this point.twitter:titleandtwitter:description— usually identical to your Open Graph versions, though X truncates slightly differently in its card renderer.twitter:image— same recommended dimensions as Open Graph, so one image serves both.twitter:site— the@handleof the site or brand account, shown in the card attribution. There's also an optionaltwitter:creatortag for the individual author, which this generator omits by default since most business pages only need the site handle.
Why 1200×630 is the magic og:image size
1200×630 pixels is the recommended size for social preview images because it satisfies every major platform's cropping behavior at once:
- It renders at roughly a 1.91:1 aspect ratio, which is what Facebook, LinkedIn, and X all use for their large-image card layout.
- It's large enough to stay sharp on high-DPI (Retina) displays, but small enough to keep file size and load time reasonable — aim to keep the file under 1MB even though most platforms allow up to 5–8MB.
- Keep essential text and faces inside the center ~80% of the frame. Some clients crop the edges slightly differently, and a title or logo placed too close to the border can get clipped.
- Use JPG or PNG for compatibility everywhere; some platforms don't reliably support WebP or AVIF for preview images yet. If you need to convert, our image compressor handles that in the browser.
How each platform truncates your tags
| Platform | Title limit | Behavior |
|---|---|---|
| Google Search | ~50–60 chars | Pixel-width based, not strictly character-based. Long titles are truncated or fully rewritten from page content. |
| ~100 chars | More generous than Google, but very long titles are still cut with an ellipsis on the card. | |
| ~150 chars | Reads Open Graph tags; description is often clipped harder than the title in the feed view. | |
| X (Twitter) | ~70 chars | Card renderer is tighter than the timeline text limit — long titles wrap to two lines then clip. |
Because every platform truncates a little differently, the safest strategy is to write your title and description to fit Google's tighter limits first. If it works there, it will almost always work everywhere else too.
Common meta tag mistakes to avoid
- Forgetting the canonical tag. Without
rel=canonical, duplicate or parameterized URLs (think?utm_source=or?sort=pricevariants of the same page) can split ranking signals across multiple versions instead of consolidating them onto one. - Using a relative image path for og:image. Social crawlers fetch the image directly and usually can't resolve relative URLs — always use the full
https://path, not/images/og.jpg. - Leaving stale Open Graph tags after a redesign. Cached previews on Facebook and LinkedIn can take days to refresh on their own; use each platform's debugger (Facebook Sharing Debugger, LinkedIn Post Inspector) to force a re-scrape immediately after big changes.
- Copy-pasting the same title and description across every page. It wastes an SEO opportunity, makes your brand look templated in search results, and gives search engines no signal about what makes each page distinct.
- Skipping the Twitter Card tags and assuming Open Graph fallback is enough — it usually works, but explicit tags render more reliably and let you fine-tune the card independently if the two platforms ever need different copy.
- Shipping a broken or missing og:image. A 404'd image doesn't just look bad — most platforms silently drop the entire preview card and fall back to a bare text link, which tanks click-through rate on shared posts.
- Not testing before publishing. Small typos, truncated punctuation, or an image that crops awkwardly are easy to miss in raw HTML but obvious in a rendered preview — always check the card before you ship the page.
Where these tags live and how crawlers read them
All of the tags this generator produces belong inside the <head> of your HTML document, before the closing </head> tag. Order doesn't affect functionality, but keeping the standard tags (title, description, canonical) above the Open Graph block and the Open Graph block above the Twitter block makes the source easier for you or a teammate to scan later.
Search engines and social platforms each use their own crawler — Googlebot for search, Facebook's crawler for Facebook and Instagram link previews, LinkedIn's bot for the Post Inspector, and Twitterbot for X. These crawlers generally do not execute JavaScript the way a real browser does (or they time out quickly if they try), which matters a lot for single-page apps: if your meta tags are injected client-side after the page loads, some crawlers will see the default, unpopulated tags instead of the page-specific ones. Server-side rendering, static generation, or server-set meta tags — which is how this site and most modern frameworks handle it — avoids that problem entirely.
It's also worth knowing that these crawlers cache aggressively. Google may not re-index a page's title and description for days or weeks after you change them. Facebook and LinkedIn cache the Open Graph data the first time a URL is shared and won't re-fetch it automatically — that's why both platforms offer a debugger tool that lets you manually trigger a re-scrape. If you've just launched a page and the preview card looks wrong, a stale cache is almost always the cause, not a bug in your tags.
Meta tags and SEO: what actually affects rankings
It's worth being precise about what these tags do and don't do for search rankings, since there's a lot of outdated advice floating around:
- Title tag: a real, meaningful ranking signal. Google uses it both to understand page topic and, frequently, as the literal blue link text in results — though it will rewrite the displayed title if yours doesn't match the query well or is technically malformed.
- Meta description: not a direct ranking factor, hasn't been since the late 1990s. But it drives click-through rate, and click-through rate is a strong indirect signal — a page that gets clicked more from the same ranking position tends to hold or improve its position over time.
- Canonical tag: doesn't boost rankings directly but prevents duplicate-content issues that can dilute the ranking signal you'd otherwise concentrate on one URL.
- Open Graph and Twitter Card tags: zero direct effect on search rankings — Google doesn't read them for that purpose. Their value is entirely in social click-through rate and brand presentation when a link is shared, which indirectly drives traffic, backlinks, and brand searches that do feed back into SEO.
In short: get the title and description right for search, and treat Open Graph and Twitter Cards as a separate but equally important lever for how your content performs when it's shared rather than searched.
Frequently asked questions
- What is a meta tag generator?
- A meta tag generator is a tool that builds the HTML <head> tags — title, meta description, canonical link, Open Graph, and Twitter Card tags — from a simple form, and shows you a live preview of how the page will look when shared or searched.
- What is the ideal meta title length?
- Aim for 50–60 characters. Google renders titles in a fixed pixel width, so titles in that range are very unlikely to be truncated on desktop or mobile search results.
- What is the ideal meta description length?
- Keep it to 150–160 characters. Longer descriptions get cut off with an ellipsis, and thin or missing descriptions are often replaced by an auto-generated snippet pulled from the page.
- What size should my og:image be?
- 1200×630 pixels (a 1.91:1 aspect ratio) is the standard recommendation across Facebook, LinkedIn, and X, and keeps the image sharp on high-DPI screens without an oversized file.
- Do I need both Open Graph and Twitter Card tags?
- X will fall back to Open Graph tags if Twitter-specific ones are missing, but adding both explicitly gives you more reliable rendering and lets you customize the card independently if you ever need to.
- Is this og preview tool free and private?
- Yes. Everything runs client-side in your browser — there's no sign-up, no file upload, and nothing you type is sent to a server. The only network request is loading your image URL for the preview.