Meta Tags Generator
Build the whole head block — SEO, Open Graph, Twitter cards — and see how it will actually look.
An approximation. Each platform crops and truncates a little differently, and all of them cache cards for days.
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Primary --> <title>Free Online Image Compressor</title> <meta name="description" content="Compress JPG, PNG and WebP images in your browser without losing visible quality. No upload, no signup, completely free."> <meta name="keywords" content="image compressor, compress jpg, reduce image size"> <meta name="robots" content="index, follow"> <link rel="canonical" href="https://example.com/compress-image"> <meta name="theme-color" content="#15803d"> <!-- Open Graph / Facebook, LinkedIn, WhatsApp --> <meta property="og:type" content="website"> <meta property="og:title" content="Free Online Image Compressor"> <meta property="og:description" content="Compress JPG, PNG and WebP images in your browser without losing visible quality. No upload, no signup, completely free."> <meta property="og:url" content="https://example.com/compress-image"> <meta property="og:site_name" content="Example Tools"> <meta property="og:image" content="https://example.com/og-image.png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Screenshot of the image compressor"> <meta property="og:locale" content="en_US"> <!-- Twitter / X --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Free Online Image Compressor"> <meta name="twitter:description" content="Compress JPG, PNG and WebP images in your browser without losing visible quality. No upload, no signup, completely free."> <meta name="twitter:image" content="https://example.com/og-image.png"> <meta name="twitter:image:alt" content="Screenshot of the image compressor">
How to Use
- 1. Enter your page title, description and URL.
- 2. Add a social preview image at 1200 by 630 pixels.
- 3. Check the Google and social previews and adjust the lengths.
- 4. Copy the generated block into the head of your page.
What Actually Matters in the Head
Only a handful of meta tags do real work. The title and description shape what appears in search results; canonical resolves duplicate URLs; robots controls indexing. Open Graph governs every social preview you have ever seen. Everything else in a typical bloated head block — revisit-after, the old keywords tag, dozens of vendor-specific entries — was either never honoured or stopped mattering a decade ago.
Length limits are approximations because Google truncates by pixel width, not character count. A title full of capitals and wide letters gets cut earlier than the character counter suggests. Roughly 50 to 60 characters keeps you safe either way, and the description counter here flags short entries as well as long ones — Google routinely rewrites a thin description from page content rather than showing it.
The Open Graph image is worth getting exactly right, because it occupies more screen space than everything else combined. Use 1200 by 630, an absolute URL, and keep important content away from the edges since each platform crops slightly differently. Declaring og:image:width and og:image:height lets scrapers lay the card out before the image has downloaded.
One thing no generator can fix: platforms cache cards aggressively. After changing tags you will need each platform's own debug tool to force a re-fetch, or the old preview will keep appearing for days.
Related: JSON-LD Schema Generator and URL Slug Generator.
Frequently Asked Questions
How long should a title tag and meta description be?
Aim for roughly 50 to 60 characters for the title and 120 to 160 for the description. Google truncates by pixel width rather than character count, so these are approximations, but staying inside them means your text is very unlikely to be cut off.
Does the meta description affect rankings?
Not directly — Google has said it is not a ranking factor. It affects click-through rate, which is what actually matters. A vague description gets rewritten by Google from your page content; a specific one usually gets shown as written.
Do I need both Open Graph and Twitter tags?
Open Graph alone covers Facebook, LinkedIn, WhatsApp, Slack, Discord and most others, and X falls back to it when Twitter tags are missing. Adding the Twitter block is still worth it for explicit control over the card type.
What size should the social preview image be?
1200 by 630 pixels, which is the 1.91:1 ratio every major platform crops to. Keep it under about 5 MB, avoid text near the edges since platforms crop differently, and use an absolute URL — relative paths do not work in Open Graph tags.
Why is my social preview not updating?
Because platforms cache aggressively. Facebook, LinkedIn and X each run their own scraper and will keep serving an old card for days. Every one of them offers a debug tool that forces a re-fetch, which is the only reliable way to refresh it.
Was this tool helpful?
More Tools
Related Developer Tools
JS & CSS Minifier
JSON Formatter
Regex Tester
SQL Formatter
You Might Also Like