You paste a link into a group chat or a Facebook post and instead of a clean title, a short description, and a relevant image, you get a blank gray box. Or the wrong image shows up. Or the description is a chunk of raw navigation text scraped from the top of the page. The page itself is fine. The problem lives somewhere nobody looks: a handful of tags in the document head that most site owners never touch directly.
What Actually Builds a Link Preview
Nothing about the browser you're sharing from decides what a link preview looks like. When you paste a URL into Facebook, Slack, or a text message, that platform's own crawler visits the page, reads specific meta tags out of the HTML head, and assembles a card from whatever it finds. If those tags are missing, the crawler falls back to guessing, usually badly.
The tags that matter here come from the Open Graph protocol, a lightweight spec originally built for Facebook that most other platforms adopted because it was simpler than inventing their own. og:title, og:description, and og:image tell any Open Graph aware crawler exactly what to show, instead of leaving it to scrape the page and hope.
Google Doesn't Read the Same Tags Facebook Does
This is where a lot of confusion starts. The <title> tag and <meta name="description"> control what shows up in a Google search result, a completely separate system documented in Google's own Search Central guidance. Open Graph tags control social previews. A page can have a perfect search snippet and a completely broken share card, or the reverse, because fixing one does nothing for the other.
Site owners often edit one, confirm it looks right in a Google search, and assume the whole link-sharing problem is solved. Then someone posts the link on social media and the preview is empty.
The Three Places This Usually Breaks
Almost every broken preview traces back to one of three causes.
Missing tags entirely. No og:image tag anywhere in the head means the crawler has nothing to pull, so most platforms show no image at all rather than guessing at one.
Relative or broken image paths. An og:image tag that points to /images/hero.jpg instead of a full https:// URL fails silently on plenty of crawlers, since they don't resolve relative paths the way a browser does.
Duplicate or conflicting tags. A CMS plugin, a theme, and a manually added tag can all write their own og:title into the same page. Crawlers typically use whichever one appears first, which is rarely the one anyone intended.
Photo by Kader D. Kahraman on Pexels
Open Graph, Without the Spec-Reading
The core Open Graph tags are shorter than they look once you strip out the jargon:
og:title, the headline shown on the card, which can differ from your page's<title>if you want a punchier version for social.og:description, one or two sentences, cut off past a certain length depending on the platform.og:image, an absolute URL to the preview image, ideally at least 1200 by 630 pixels so it doesn't look stretched or blurry on a wide card.og:url, the canonical URL for the page, so shares of a tracking-parameter-heavy link still point back to the clean version.
None of these require touching your page's actual content. They live entirely in the head, invisible to a normal visitor and read only by crawlers.
Twitter and X Cards Play by Slightly Different Rules
X (formerly Twitter) supports its own tag set, twitter:card, twitter:title, twitter:description, and twitter:image, and will fall back to Open Graph tags when its own are missing, but that fallback isn't perfectly reliable across every card type. Setting twitter:card to summary_large_image is what actually produces the big, image-forward card instead of a small thumbnail next to text.
Photo by Connor Scott McManus on Pexels
Why a Broken Preview Costs Clicks, Not Just Looks
A link with a sharp title, a relevant image, and a clear description gets clicked more than the same link showing a blank box, and this isn't a minor aesthetic complaint. On a crowded social feed, the preview card is doing most of the persuading before anyone reads a single word of the actual page. A generic or missing image reads as low-effort or even suspicious, which is exactly the impression you don't want on a link you worked to get shared in the first place.
This matters even more on mobile, where a feed is mostly thumbnails and short headlines competing for a thumb that's already scrolling. A blank card next to ten cards with clean images doesn't just look worse, it gets scrolled past without a second glance. The tags themselves take minutes to write. The cost of skipping them shows up every single time the link gets shared afterward, not just once.
Why an Old, Broken Preview Sometimes Sticks Around After You Fix the Tags
Fixing the tags on your page doesn't automatically fix a preview that's already been shared somewhere. Most social platforms cache the scraped Open Graph data the first time a URL gets shared, so a link posted last month keeps showing last month's broken card even after you correct the underlying tags today. This trips people up constantly. They fix the markup, share the link again in the same thread to check, and the old cached card shows up unchanged.
The fix is almost always a manual re-scrape. Facebook, LinkedIn, and X each provide their own sharing debug tool that forces a fresh crawl of the page and clears the stale cache for that specific URL. If a preview still looks wrong after you've confirmed the tags are correct in your page source, that cache is the first thing to check before assuming the markup itself is still broken.
Meta Descriptions Still Matter for Search, Even When Google Rewrites Them
Google frequently rewrites the visible search snippet using text pulled from the page body instead of your meta description, which leads some site owners to conclude the tag is pointless. It isn't. Moz's long-running SEO research treats the meta description as a lever on click-through rate specifically because it still gets used verbatim often enough to matter, and a well-written one gives Google better raw material even when it chooses to rewrite around it.
The Structured Data Layer Sitting Next to All of This
A related but separate system, structured data from schema.org vocabulary, controls things like star ratings, FAQ dropdowns, and other rich result formatting inside search results. It doesn't touch social share previews at all, but it's worth knowing it exists as its own layer so you don't go looking for star ratings inside an Open Graph tag that was never built to carry them.
Photo by Саша Алалыкин on Pexels
"The failure mode I see constantly is a page with genuinely good SEO meta tags and zero Open Graph tags, so the moment it gets shared anywhere social, the preview card falls back to whatever the platform can scrape off the page, which is usually the wrong image or nothing at all." - Dennis Traina, founder of 137Foundry
Building the Tags Without Guessing at Syntax
Hand-writing these tags is straightforward once you know the list, but it's easy to typo a property name or forget the image needs to be an absolute URL, and neither mistake throws a visible error. The MDN reference on the meta element documents every attribute precisely, but reading a spec page doesn't tell you what your specific card will actually look like once it's live.
That gap, between "the tag is technically correct" and "I can see exactly how this renders on Google, Facebook, and X," is what a live-preview generator is built to close. Filling in a title and description and watching simulated result cards update as you type catches a too-long description or a missing image before either one ships.
Photo by Garley Gibson on Pexels
A Checklist for Before You Publish Anything Public
- Does the page have a unique
og:titleandog:description, not a value copied from the homepage? - Is
og:imagean absolute URL, not a relative path that only works inside a browser already on your domain? - Is the image at least 1200 by 630 pixels, so it doesn't get cropped or blurred on a wide card?
- Does a search for the page's raw HTML turn up more than one
og:titletag, left behind by a plugin or an old template? - Does the meta description actually differ from the Open Graph description, tuned for a search reader instead of a social scroller?
Running through that list takes a few minutes and catches the overwhelming majority of broken previews before they ever go live somewhere public.
Where the Free Generator Fits
The free Meta Tag Generator by EvvyTools builds the full set, SEO meta tags, Open Graph, and Twitter Card markup, with live preview cards for Google, Facebook, and X updating as you type, plus character counters so a title or description doesn't get silently truncated somewhere you can't see. Copy the generated markup into your page head and the guesswork above disappears.
For more tools built the same way, browse the EvvyTools tools directory, or check the EvvyTools blog for more breakdowns of what's actually happening under the hood of tools like this one. Start from the EvvyTools homepage to see the full catalog of free tools.
