Open Graph & Meta Tag Generator
Generate complete OG, Twitter Card & SEO tags with live social previews
Core SEO Tags
Open Graph (Facebook / LinkedIn)
Twitter / X Card
Additional Meta
Open Graph vs Twitter Card vs Plain Meta Tags: What Actually Drives Clean Link Unfurling in 2024
Every time you share a link on Facebook, Slack, iMessage, or LinkedIn, something invisible happens in the background. The platform's crawler fetches your page, reads a small cluster of hidden HTML tags, and constructs the preview card you see — the image, headline, and description snippet. Get those tags right and your link looks polished, authoritative, and click-worthy. Get them wrong and you get a blank grey box, a cropped thumbnail, or worse, a competitor's cached image from a previous crawl.
The confusion most site owners face is that there are now three overlapping but distinct systems doing this job: the classic HTML meta tags (name/content pairs that have existed since the 1990s), the Open Graph protocol (og:* properties invented by Facebook in 2010 and now the de facto standard for most platforms), and Twitter Cards (X's own system, still alive and still checked by many apps). Understanding how these three interact — and where they diverge — is the difference between a link that pops and one that flops.
The Classic Meta Tags: Still Necessary, No Longer Sufficient
The original <meta name="description"> and <title> tags were designed for search engines, not social networks. Google still reads them for snippets, and they remain the baseline every page should have. The title element appears in browser tabs and SERP headlines; the description fills the grey text beneath. Character limits matter here: Google typically truncates titles at around 55-60 characters (roughly 600 pixels of rendered width) and descriptions at 155-165 characters on desktop. Going over does not break anything, but the truncation almost always happens at an awkward word boundary that makes your snippet look unfinished.
What plain meta tags cannot do is control how social platforms render your link. Facebook, WhatsApp, Telegram, Slack, Discord, and LinkedIn all ignore name="description" and read property="og:description" instead. If the og:* tags are absent, platforms attempt a best-guess fallback — often grabbing the first paragraph of visible body text, which is rarely what you want in a promotional context.
Open Graph: The Universal Social Language
The Open Graph protocol standardised social metadata by using the property attribute (with an RDFa namespace prefix) rather than the older name attribute. The four required tags are og:title, og:type, og:image, and og:url. Everything else is supplementary but often critical in practice.
og:image is where most implementations fail. Facebook's scraper enforces a minimum of 200×200 pixels, but images smaller than 600×315 render as tiny inline thumbnails rather than the large card-format that drives engagement. The sweet spot the protocol recommends is 1200×630 pixels — a 1.91:1 aspect ratio. This single dimension choice affects how the link card looks on every platform that implements the standard. Images that are too tall get letterboxed with black bars; images that are too wide get cropped from the sides. Square images (1:1) work fine on some mobile surfaces but look odd in the desktop feed.
The og:title limit for Facebook's renderer is effectively 88 characters before truncation in the feed, though the protocol itself has no hard cap. LinkedIn is more aggressive and trims at around 70 characters. Writing your og:title within 60 characters ensures it survives intact across all major platforms. Similarly, og:description should sit between 55 and 200 characters — Facebook displays roughly 2 lines of text beneath the headline, which translates to about 110-130 characters at typical font sizes.
Beyond the basics, og:type shapes how the content is categorised. Setting it to article unlocks the article:published_time, article:author, and article:section sub-properties, which news aggregators and some readers use to sort and attribute content. Setting it to product or video.movie signals intent to platforms that surface structured content differently in shopping tabs or video feeds.
Twitter Cards: Still Relevant Despite the X Rebrand
Twitter Cards launched in 2012 and use a parallel name-attribute syntax (not property). The most impactful choice is between summary and summary_large_image. The former shows a small thumbnail to the left of the text — similar to a WhatsApp link preview; the latter renders a full-width hero image above the text, which consistently generates higher click-through rates for content, product, and editorial pages.
The twitter:site tag (your publication's @handle) and twitter:creator (the author's handle) serve attribution and are surfaced in some third-party Twitter clients and analytics dashboards. They are optional but worth including for content-heavy sites where bylines matter. If Twitter Card tags are absent, the X/Twitter crawler falls back to og:* tags automatically — which is why, in practice, a solid OG implementation partially covers your Twitter requirements without duplication.
Platform-by-Platform Behaviour at a Glance
Facebook / Meta reads og:* tags first. It aggressively caches scraped data; after fixing your tags, you need to run the URL through the Meta Sharing Debugger to force a re-scrape. Facebook also enforces a 300-KB image file size minimum (despite this seeming backwards — images that are too small in kilobytes may be ignored) and has been known to reject images hosted on HTTP rather than HTTPS origins.
LinkedIn follows og:* and has a notoriously long cache TTL — sometimes 7 days. Its Post Inspector tool exists but is less reliable than Meta's. LinkedIn also specifically validates og:image aspect ratio and may substitute its own thumbnail if the ratio deviates too far from 1.91:1.
Slack and Discord both primarily read og:* tags and display them within their own styled embed cards inside channel messages. Discord additionally respects theme-color to colorise the left border of the embed — a small detail that brand-conscious communities appreciate.
WhatsApp and iMessage show the og:image as a thumbnail with og:title and og:description. WhatsApp compresses images aggressively, so starting with a high-quality 1200×630 source preserves visual fidelity after their compression pass.
The Practical Hierarchy: Which Tag Wins?
When both og:* and twitter:* tags are present, each platform uses its own namespace first. Twitter uses twitter:* and falls back to og:* if the former is absent. Facebook and LinkedIn use og:* and ignore twitter:* entirely. Search engines use the <title> element and name="description" meta tag; they largely ignore og:* properties for organic snippet generation (though structured data via JSON-LD or Schema.org is a separate, parallel system).
The practical upshot: you need both systems. A minimal correct implementation includes a <title>, a name="description" meta, four og:* properties (title, type, image, url), and at minimum twitter:card. Everything else — og:locale, og:site_name, twitter:site, article:* — is additive polish that matters more as your platform scales.
Common Mistakes That Break Unfurling
The most frequent error is a relative URL in og:image. The property must be an absolute URL including the https:// scheme; crawlers do not resolve relative paths. Close behind that is setting og:image to a URL protected by login or a CDN that blocks bots by User-Agent — social crawlers have their own UAs (facebookexternalhit, LinkedInBot, Twitterbot) and if your server returns a 403, the image will never appear.
The second most common failure is mismatched og:url vs canonical URL. If your page is served at multiple URLs (www vs non-www, trailing slash vs none, HTTP vs HTTPS) and you specify og:url as one variant while the canonical link points elsewhere, Facebook may merge engagement counts incorrectly or choose the wrong URL to display in share dialogs.
Finally, many CMS plugins auto-generate og:description by truncating the meta description to exactly 160 characters. This often cuts mid-sentence. A better approach is to treat og:description as its own field — a punchy 1-2 sentence teaser written specifically for social context, not repurposed from an SEO snippet.
Getting these tags right is not a one-time setup task. Every time you redesign a page, change your CDN, or update your CMS, it is worth re-validating that the tags are correct, the image loads for bots, and the dimensions hit the 1200×630 target. The generator above makes that validation loop fast — fill the form, check the live preview, copy the output, and paste it into your <head>.