S.EE Blog

Link Previews Explained: How Open Graph Tags Control What Your Short Link Looks Like When Shared

Learn how Open Graph and Twitter Card tags shape link previews, how short-link redirects affect them, and how to fix missing images, titles, and stale cards.

David9 min read
Link Previews Explained

You paste a link into a team channel or a LinkedIn post and wait for the preview card to appear. Instead of your carefully designed image and headline, you get your logo stretched into a strange crop, last month's title, or nothing at all.

Link previews feel like magic when they work and like a mystery when they don't. In reality, they follow a simple set of rules, built mostly on a standard called Open Graph, and almost every broken preview comes down to a handful of fixable causes.

When you share a URL on a platform like Slack, LinkedIn, Facebook, X, Discord, WhatsApp, or iMessage, the platform fetches that URL in the background. A crawler, usually identified by its own user agent such as facebookexternalhit, LinkedInBot, or Slackbot, downloads the page's HTML and reads specific tags in the <head> section.

From those tags, the platform builds a preview card: a title, a short description, an image, and the site name. If the tags aren't there, the platform guesses, usually using the page's <title> and the first image it finds, which is how you end up with a tiny logo or an unrelated banner.

Platforms then cache the preview. Once a URL has been fetched, the same card is often reused for a while, even if you update the page. That caching is behind many "I fixed it but it still looks wrong" moments.

#The Open Graph tags that matter

The Open Graph protocol was introduced by Facebook in 2010 and is now read by nearly every platform that shows link previews. It's a set of <meta> tags with property attributes starting with og:.

These are the core tags:

html
<meta property="og:title" content="The 2026 Holiday Gift Guide">
<meta property="og:description" content="Twenty gifts under $50, picked by our team.">
<meta property="og:image" content="https://www.example.com/images/gift-guide-2026.jpg">
<meta property="og:url" content="https://www.example.com/gift-guide">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Example Store">

og:title and og:description control the text. Keep titles to roughly 60 characters and descriptions to around 150, since most platforms truncate beyond that.

og:image is the most important tag for engagement. A widely used size is 1200 by 630 pixels, a 1.91 to 1 ratio, which displays well on most platforms. Use an absolute URL starting with https://, keep the file a reasonable size, and make sure it's publicly accessible.

og:url tells platforms the canonical address of the page, which helps them group shares of the same content.

#X and Twitter Card tags

X uses its own tags, still called Twitter Cards, alongside Open Graph. If X-specific tags are missing, it falls back to Open Graph for most fields, but one tag is worth adding explicitly:

html
<meta name="twitter:card" content="summary_large_image">

Without it, X may show a small square thumbnail instead of a large image card. You can also set twitter:title, twitter:description, and twitter:image if you want X previews to differ from other platforms, though most sites simply reuse the Open Graph values.

When you share a short link, the platform's crawler requests the short URL first. A well-behaved link shortener responds with an HTTP redirect, usually a 301 or 302, pointing to the destination. The crawler follows the redirect, loads the destination page, and reads its Open Graph tags.

That means the preview for a short link is the preview for its destination. If the destination page has good Open Graph tags, the short link shows a good preview automatically. Changing the destination of a short link changes its preview too, once the platform's cache refreshes.

This only works when the redirect is a real server-side redirect. Crawlers generally don't run JavaScript, so a shortener that uses a JavaScript redirect, an interstitial ad page, or a "click to continue" screen will show a preview of that intermediate page instead of your content. Use the curl commands below to inspect the redirect chain.

The page has no Open Graph tags. The platform falls back to guessing. Add at least og:title, og:description, and og:image.

The image URL is relative or private. og:image content like /images/card.jpg fails on many platforms. Use the full https:// URL, and make sure the image isn't behind a login, a hotlink block, or a firewall rule.

The crawler is blocked. Bot protection, rate limiting, or a firewall can block preview crawlers or serve them a challenge page. Check your security settings and allow known preview crawlers if needed.

The tags are added by JavaScript. If your site renders its <head> with client-side JavaScript, crawlers that don't execute scripts never see the tags. Server-side rendering or static generation for meta tags fixes this.

The tags are too far down the page. Some crawlers only read the first part of an HTML document. Put Open Graph tags near the top of the <head>, before large inline scripts or styles.

The platform cached an old version. If you fixed the tags after the link was first shared, the platform may still show the old card until its cache refreshes or you force a new scrape.

#Smart routing and A/B tests can change the preview

Some short link features change where a link goes depending on who's asking. That's useful for people, and occasionally surprising for crawlers.

With geo-targeted links, the crawler's location decides which destination it sees. Crawlers usually run from data centers, often in the US, so a link that sends US visitors to one page and others to another will show the US page's preview to everyone.

Device targeting works the same way. A crawler doesn't look like an iPhone or an Android phone, so it'll typically see your desktop or fallback destination.

With link rotation for split testing, the crawler sees whichever destination it happens to be sent to, and that preview gets cached. If your variants have different Open Graph images, the shared card may not match what most people land on.

The simple fix is to give every destination in a routed or rotating link the same Open Graph title, description, and image, or at least ones that make sense for all audiences.

Use the platforms' own tools. Facebook's Sharing Debugger shows exactly what its crawler sees and lets you force a fresh scrape. LinkedIn's Post Inspector does the same for LinkedIn. For other platforms, general-purpose Open Graph preview tools show how a URL is likely to appear.

Check the redirect chain from the command line. This inspects a redirect chain using HEAD requests. Some sites handle HEAD differently from GET, so follow it with a GET check when the result is unexpected:

bash
curl -sIL -A "facebookexternalhit/1.1" https://s.ee/example
# GET headers across the chain, discarding the body:
curl -sS -L -D - -o /dev/null -A "facebookexternalhit/1.1" https://s.ee/example

You want to see one redirect, ideally, followed by a 200 OK from the destination. Long chains, JavaScript redirects, or a 403 at the end all point to preview problems.

When you've fixed something, force a re-scrape where the platform allows it, and for others, give the cache time to expire before testing again. A new test URL can help diagnose caching, but a platform may key its cache by the shared short URL or canonical URL. Changing only the destination query string may not refresh an existing card; use the platform debugger where available.

Before sharing an important link, check that the destination has og:title, og:description, og:image, and og:url tags near the top of the <head>, plus twitter:card set to summary_large_image. Make sure the image is 1200 by 630 pixels, served over HTTPS from an absolute URL, and publicly accessible.

Confirm the short link uses a single server-side redirect, that crawlers aren't blocked by bot protection, and that every destination in a routed or rotating link has consistent preview tags. Then run it through a preview tool before it goes out.

#Wrapping up

Link previews are built from Open Graph tags on the destination page, fetched by each platform's crawler and then cached. Short links pass previews through automatically when they use proper server-side redirects, so the work happens on the destination: set the right tags, use a correctly sized absolute image URL, keep crawlers unblocked, and keep tags consistent across routed and rotating destinations.

When a preview looks wrong, test the redirect chain, check what the crawler sees, and force a refresh.

Thanks for reading! If you want short links on your own branded domain, with click analytics across every channel, S.EE covers URL shortening, custom domains, QR codes, and link-in-bio pages in one place.

Ready to get started? Create your first link or view pricing to see what fits.

##What are Open Graph tags?

Open Graph tags are <meta> tags in a web page's <head> that tell platforms what title, description, and image to show when the page is shared. They were introduced by Facebook and are now read by most platforms that generate link previews.

Common causes are a missing og:image tag, a relative or private image URL, an image that's too small or the wrong shape, a crawler blocked by bot protection, or a cached old preview. Use the platform's debugging tool to see what its crawler sees.

Not if the shortener uses a proper server-side redirect. The platform's crawler follows the redirect and reads the destination's Open Graph tags. JavaScript redirects and interstitial pages can break previews.

##What size should an Open Graph image be?

1200 by 630 pixels, a 1.91 to 1 aspect ratio, is the most widely used size and displays well across most platforms. Serve it over HTTPS from an absolute URL.

Use Facebook's Sharing Debugger or LinkedIn's Post Inspector to fetch the URL again. Other platforms refresh their cached previews on their own schedule.

Preview crawlers usually run from data centers in a single region, so they only see the destination for that region. Give every destination in a routed link the same Open Graph tags to keep previews consistent.

Keep reading