Meta Tag Generator
Build Open Graph, Twitter Cards and SEO meta tags with live previews for Google, Facebook, Twitter, LinkedIn and WhatsApp. Copy the ready-to-paste <meta> block — 100% browser-based, no signup.
What is a meta tag generator?
A meta tag generator is a tool that builds the HTML <meta> tags that control how your page appears in Google search results and how it unfurls when shared on Facebook, Twitter/X, LinkedIn, WhatsApp, Slack, Discord and similar platforms. You fill in a few fields — title, description, image, canonical URL — and the generator outputs a ready-to-paste block of tags that follows current SEO and Open Graph best practices.
This Open Graph and Twitter Card generator runs entirely in your browser. As you type, four live previews render exactly how the page will look on Google, Facebook/LinkedIn, X (Twitter), and WhatsApp/Slack. You can paste the generated tags directly into the <head> of any HTML page, CMS template, Next.js layout, Astro component or framework of your choice.
How to use the meta tag generator
- Fill in the basic SEO fields: page title (≤60 chars for Google), meta description (145–160 chars) and canonical URL.
- Add Open Graph fields for Facebook, LinkedIn, WhatsApp and Pinterest: an image URL (1200×630 px is the universal sweet spot), the og:type, and a locale.
- Configure the Twitter Card: pick
summary_large_imagefor blog posts and articles, orsummaryfor product or compact previews. Add the @site and @creator handles. - Set extras: theme color (changes the browser address bar on mobile), robots directive, locale.
- Check the 4 live previews to confirm everything renders correctly.
- Copy the generated meta block and paste it inside the
<head>of your page.
Meta tags explained — SEO, Open Graph & Twitter Cards
Standard SEO tags
These are the foundation of how your page appears in Google. The title tag is the blue link shown in search results — keep it under 60 characters or Google will truncate it. The meta description is the grey snippet beneath the title; aim for 145–160 characters. The canonical link tells Google which URL is the master version when the same content is reachable through multiple paths (with/without trailing slash, query parameters, etc.). The robots directive tells search engines whether to index the page and follow its links.
Open Graph protocol
Open Graph (OG) is a protocol invented by Facebook in 2010 and now used by Facebook, LinkedIn, WhatsApp, Pinterest, Discord, Slack, Microsoft Teams, iMessage, Telegram and more — basically every platform that shows a link preview. The minimum set is og:title, og:description, og:image, og:url and og:type. The image is the single biggest driver of click-through rates on shared links — pick a 1200×630 pixel image with the focal point in the centre to avoid being cropped.
Twitter Cards
Twitter Cards are X's version of the same idea. The two common types are summary (small square thumbnail on the left) and summary_large_image (full-width image on top). The latter has higher engagement and is the right choice for articles, blog posts and landing pages. Twitter falls back to Open Graph tags when Twitter-specific tags are missing, but adding both gives you precise control on each platform.
Recommended sizes and character limits
| Element | Recommended | Hard limit |
|---|---|---|
| Title tag | 50–60 chars | ~600 px wide |
| Meta description | 145–160 chars | ~160 chars |
| og:image (Facebook, LinkedIn, WhatsApp) | 1200×630 px (1.91:1) | ≥ 200×200, < 8 MB |
| twitter:image (large) | 1200×675 px (16:9) | ≤ 5 MB, JPG/PNG/GIF/WebP |
| twitter:image (summary) | 240×240 px (1:1) | ≤ 5 MB |
| Pinterest pin image | 1000×1500 px (2:3) | portrait preferred |
| WhatsApp / iMessage preview | Uses og:image, square crop is shown | ≤ 600 KB recommended for fast unfurl |
| Theme color | Brand primary, hex format | Mobile Chrome address bar only |
Common mistakes to avoid
- Missing og:image — without it your link looks naked on every social platform and CTR drops by ~40%.
- Image too small — Facebook downgrades the card to a tiny thumbnail if the image is below 600×315 px.
- Relative URLs in og:image — must be an absolute URL with full
https://scheme, no relative paths. - Mixed HTTP / HTTPS — if your page is HTTPS but the image URL is HTTP, browsers and platforms will refuse to load it.
- Description longer than 160 chars — Google truncates with an ellipsis and platforms cut off the preview.
- Title repeated on every page — each page needs a unique title that includes the primary keyword early.
- Forgetting canonical — without it duplicate content (query parameters, tracking) can split SEO authority.
Use cases
- Blog / article pages — write distinct meta tags per post for ranking and social sharing.
- Marketing landing pages — control how your campaign link unfurls on LinkedIn, X and WhatsApp.
- Ecommerce product pages — use
og:type=productwith a high-quality product image. - SaaS / app landing — large branded og:image with a clear value prop drives sign-ups.
- Documentation sites — per-section meta tags so each docs page appears with the right title in Google.
- Personal portfolio — control how recruiters and clients see your site when shared.
Frequently Asked Questions
Meta tags are HTML elements in the <head> of your page that describe its content to search engines and social platforms. Search engines use the title and description to render the result snippet on Google. Social platforms use Open Graph and Twitter Card tags to build the preview card when the link is shared. Together they control how your page is presented to the outside world — they directly affect click-through rates and indirectly affect rankings.
Open Graph (OG) is an open protocol originally created by Facebook in 2010 to enrich how links appear when shared. Today it is the de-facto standard for link previews on Facebook, LinkedIn, WhatsApp, Pinterest, Slack, Discord, Microsoft Teams, iMessage and Telegram. The four core tags are og:title, og:description, og:image and og:url.
Both are Twitter Card types. summary shows a small square thumbnail on the left with the title and description on the right. summary_large_image shows a full-width image above the text. Large image cards have significantly higher engagement on X and are the right default for blog posts, articles and marketing pages. Use the small summary card only for compact contexts or when you don't have a high-quality 1200×675 image.
1200×630 pixels at a 1.91:1 aspect ratio is the universal sweet spot — Facebook, LinkedIn, WhatsApp, Slack and Twitter all accept and display it without cropping issues. The image must be at least 200×200 pixels and under 8 MB. Use JPG for photos, PNG for graphics with text. Keep the focal point in the centre because some platforms crop the edges.
No. The generator is 100% client-side — all fields, previews and the generated meta block are computed locally in your browser. Nothing is sent to any server. The image preview loads the URL you enter directly from its origin in your browser (so you can validate it), but the URL itself is not collected.
Three common causes: (1) the og:image URL is relative instead of absolute — it must include https:// and the full domain; (2) the image is below the 200×200 pixel minimum; (3) Facebook's cache still has the old version — use the Facebook Sharing Debugger to force a refresh. LinkedIn has a similar Post Inspector tool.
145–160 characters is the safe range. Google typically displays around 155 characters on desktop and 120 on mobile before truncating with an ellipsis. Write the most important information in the first 120 characters so it survives on every device. Keep your primary keyword early in the description — Google will bold matching query terms in the snippet.
Twitter falls back to Open Graph tags when Twitter-specific tags are missing, so technically OG alone is enough. But adding Twitter Card tags gives you precise control — different title, description or image for X versus other platforms, and the ability to pick the card type (summary vs summary_large_image). For production sites the recommendation is to set both.