A link shared to Slack, Twitter, or Facebook that shows up as bare blue text with no image or description didn't fail randomly. It's missing, or has malformed, Open Graph meta tags, and fixing that is a five-minute job once you know exactly which tags each platform actually reads.
Step 1: Add the four required Open Graph tags
Every page that gets shared needs at minimum og:title, og:description, og:image, and og:url in the document head. These are what Facebook, LinkedIn, and most other platforms read to build the preview card, and skipping any one of them tends to produce a broken or incomplete card rather than a graceful fallback.
<meta property="og:title" content="Page title here" />
<meta property="og:description" content="One or two sentence summary" />
<meta property="og:image" content="[your page's absolute image URL, protocol and domain included]" />
<meta property="og:url" content="[your page's absolute canonical URL]" />
Step 2: Get the image dimensions right
og:image is the tag that fails silently most often, usually because the image is too small, the wrong aspect ratio, or served over an insecure connection when the page itself is HTTPS. Most platforms want a minimum of 1200 by 630 pixels for a full-width card, and an image smaller than 200 by 200 pixels may get rejected outright rather than just displayed small.
Also confirm the image URL is absolute, not relative. A relative path that works fine when a browser loads the page directly will fail when a social platform's crawler tries to fetch it independently, since that crawler has no browsing context to resolve the relative path against.
Step 3: Add Twitter Card tags separately
Twitter, now X, reads its own separate tag set rather than falling back to Open Graph tags automatically in every case. Adding twitter:card, twitter:title, twitter:description, and twitter:image alongside your Open Graph tags covers the gap, and twitter:card set to summary_large_image is what produces the full-width image card most people expect.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Page title here" />
<meta name="twitter:image" content="[your page's absolute image URL]" />
Step 4: Test with the actual platform tools, not just a preview
Social platforms cache the Open Graph data for a URL the first time it's shared, which means fixing a broken tag after the fact won't update existing shared links until the cache clears. Facebook's Sharing Debugger and similar tools from other platforms let you force a re-scrape after making changes, which is the only reliable way to confirm a fix actually took effect.
Testing before the first real share, rather than after, avoids the caching problem entirely. Once a broken card has been shared and cached, getting every platform to pick up the fix can take longer than fixing the tags themselves did.
Step 5: Keep titles and descriptions within safe limits
Open Graph titles that run past roughly 60 characters and descriptions past roughly 155 characters get truncated inconsistently across platforms, sometimes mid-word. Since these are frequently the same fields used for the page's actual SEO meta title and description, keeping both within search-engine-safe limits solves the social truncation problem at the same time.
Step 6: Handle dynamic pages and single-page apps separately
Sites built as single-page applications have a specific failure mode worth knowing about, one that MDN's documentation on rendering strategies touches on more broadly: if Open Graph tags are injected client-side with JavaScript after the initial page load, most social platform crawlers never see them, because those crawlers typically fetch the raw HTML and don't execute JavaScript the way a browser does. A page that looks completely correct when you view it in a browser can still share as a blank card if the tags only exist after a script runs.
The fix is server-side rendering the Open Graph tags into the initial HTML response, or using a pre-rendering service that serves crawlers a fully rendered version of the page. This is a common gap on modern JavaScript-heavy sites that otherwise have their metadata strategy completely right, and it's worth specifically testing rather than assuming a working meta tag setup covers it automatically.
Step 7: Don't forget the fallback fields
Not every platform reads every tag, and a reasonable fallback chain matters more than people expect. LinkedIn, for instance, sometimes falls back to a page's standard <title> tag and first paragraph if it can't find valid Open Graph data, which can produce an awkward or incomplete card even on a page that has some metadata, just not quite the right fields.
Setting a standard <title> tag and a <meta name="description"> tag alongside the Open Graph and Twitter Card tags, even though they're technically redundant with og:title and og:description, closes that gap for any platform or crawler that doesn't fully support the newer tag standards. It's a small amount of extra markup for a meaningful reduction in how often a share looks broken on some platform you didn't specifically test.
Common mistakes worth double-checking
A few issues show up repeatedly across sites that otherwise have their Open Graph setup mostly right. Serving the image over HTTP on an HTTPS page causes some platforms to reject it silently rather than falling back gracefully. Using a CDN URL that requires authentication or has aggressive hotlink protection blocks the crawler from fetching the image at all, even though it loads fine in a regular browser session. And forgetting to update og:image after a page redesign means old cached shares keep showing outdated visuals long after the page itself has changed.
Running through this list after any major site change, not just at initial launch, catches regressions that a one-time setup wouldn't.
Step 8: Verify the fix actually took, not just that you made a change
After correcting a tag, it's worth confirming the crawler is actually reading the updated value rather than assuming the fix worked because it looks right in the page source. Cached results from before your fix can persist on some platforms for a surprising amount of time, and a quick re-check with the platform's own debugging tool closes the loop with certainty instead of hoping.
This step gets skipped more often than any other on this list, mostly because fixing the code feels like the finish line. Treating verification as a separate, mandatory step rather than an optional extra catches the cases where a fix looks correct in isolation but something else, a caching layer, a CDN configuration, an unrelated redirect, is still serving the old version to crawlers.
A checklist for a full site audit, not just one page
Auditing Open Graph tags across an entire existing site, rather than just a new page as you publish it, is a worthwhile project periodically, since tags that were correct at launch can silently break after a redesign, a CMS migration, or a CDN change. A reasonable audit checks a sample of pages across different templates or content types, since a bug in one template can affect dozens or hundreds of pages identically without anyone noticing until someone happens to share one of them.
Prioritize the highest-traffic pages first if a full audit isn't practical all at once. Those are the pages most likely to actually get shared, which means a broken card there costs more in lost engagement than the same issue on a page nobody links to.
Generating the full tag set without hand-writing it
Writing out og:, twitter:, and standard SEO meta tags by hand for every page, then remembering to test each one, adds up fast across a real site. The free meta tag generator by EvvyTools generates the complete set at once with live preview cards for Google, Facebook, and Twitter, so you can see exactly what a shared link will look like before it ever goes out.
For the broader picture of what a search engine and a content scoring tool are actually checking beyond social metadata, the guide on auditing content for on-page SEO before publishing covers keyword placement, structure, and readability in more depth. The Open Graph protocol's own specification is worth a read if you want the complete tag reference beyond the four essentials covered here.
Top comments (0)