explainers

Custom OG Previews: How to Control Link Previews on Social Media

Custom OG previews control how your links look on Facebook, LinkedIn, X, Slack, and iMessage. Here's how the tags work, image sizes, and how to override them.

Team U2L • 20 min read

Paste any link into Slack, iMessage, LinkedIn, or a Facebook comment. In half a second, an OG preview blooms open: a title, a snippet of text, an image. That card is not magic and it is not decided by the social media platform. It is decided by a handful of <meta> tags on the destination page, and if those tags are wrong (or missing, or ugly), the preview is wrong, missing, or ugly. Every time. On every platform.

Most teams find this out the hard way. A launch tweet goes out. The preview shows a stock photo from the header, a headline from three articles ago, and no description. Screenshots of that broken card are already circulating in Slack while somebody scrambles to fix the meta tags on the destination page. Sometimes you can't fix them at all, because the destination isn't yours (an affiliate link, a partner site, a client's page you don't have edit access to).

This guide is about the preview card itself and, above all, about overriding it on the short link when the destination page won't cooperate. If you own the page and want the full tag-by-tag implementation reference (frameworks, CMS plugins, every optional tag), our complete Open Graph tags guide is the companion piece. Here we cover what the card is, the few tags that decide it, the image sizes that work in 2026, and the override workflow. If you send links to humans for a living, this is the SEO you should be optimizing first, because it is the SEO that decides whether they click.

An Open Graph preview is the card that appears when you share a link on social media or messaging apps. It's built from <meta property="og:*"> tags in the HTML of the destination page: og:title becomes the headline, og:description becomes the snippet, og:image becomes the picture, and og:url becomes the canonical link. Facebook created the protocol in 2010, and X, LinkedIn, Slack, iMessage, Discord, and WhatsApp all read the same tags today.

An Open Graph preview (or "OG preview") is the visual card generated by social platforms and messaging apps when a link is shared. It is populated from Open Graph meta tags (og:title, og:description, og:image, og:url) placed in the <head> of the linked page. Platforms fetch these tags with a crawler at the moment of sharing (or from their cache) and use them to build the preview card without loading the full page.

Table of Contents

What Is an OG Preview?

An OG preview is the card that appears next to a link when you share it on Facebook, LinkedIn, X, Slack, Discord, iMessage, WhatsApp, or almost any modern chat or social platform. It's built from Open Graph meta tags on the destination page and shows up in a rectangle with a title, description, and image, so readers can decide whether to click without actually clicking.

The Open Graph protocol was released by Facebook in 2010 as a way to give web pages structured social-sharing metadata. It caught on immediately because every platform wanted its previews to look good, and reading <meta property="og:*"> tags was cheaper than building a bespoke parser per site. Fifteen years later, the same four tags are still the source of truth for basically every preview card you see anywhere.

The stakes are higher than they look. A post with a proper preview card simply looks more clickable than a bare URL on the same channel, because a well-designed card is a mini ad running before the link. On dark social (DMs, group chats, KakaoTalk, iMessage forwards), where a large share of link sharing actually happens, the preview is often the only thing the recipient sees. If it looks wrong, nobody taps.

The Four Tags That Actually Matter

You'll see long lists of OG tags floating around the web (og:audio, og:video, og:locale, og:site_name, og:type, and a dozen more). Ignore most of them for now. Four tags do 95% of the work, and if you get these right, your previews look good everywhere:

og:title - The headline shown in the preview card. Keep it under 60 characters or it gets truncated on X and LinkedIn. Write it like a hook, not like a page title. "Free URL Shortener" is fine. "Free URL Shortener - Fast, No Login, Custom Aliases" is better because it fills the space.

og:description - The gray text under the title. Aim for 100-155 characters. Longer is fine on desktop but gets clipped on mobile. Make the first 90 characters carry the pitch, because that's what fits on iPhone previews.

og:image - The most visually important tag. This is the picture that fills 60-70% of the card real estate. Ratio and size are non-negotiable (see the next section). If this tag is missing, most platforms fall back to a tiny link icon and your card looks anemic.

og:url - The canonical URL of the page. This should point to the actual destination, not a redirected version. Getting this wrong causes duplicate-content issues in Facebook's cache and can leave your preview stuck on a version from three redesigns ago.

Two useful bonus tags. og:site_name shows the publisher next to the card on some platforms and helps brand recognition. og:type tells the platform whether this is an article, video.other, product, or generic website. For most marketing pages, website is fine. For blog posts, article unlocks richer LinkedIn cards with a byline.

X uses its own set of twitter:* meta tags too, but if you don't set them, X falls back to the OG tags, which is what most sites do. Only bother with dedicated twitter:card, twitter:title, and twitter:image tags if you want a distinct X preview from your other platforms. In practice, we've almost never seen the effort pay off.

OG Image Size and Format in 2026

The right OG image size in 2026 is 1200 x 630 pixels, JPG or PNG, ideally under 1MB (Facebook's hard cap is 8MB). This single dimension renders correctly on Facebook, LinkedIn, X large-card, Slack, Discord, iMessage, WhatsApp, and every other platform we've tested this year.

Here's the platform-specific breakdown for reference, though sticking with 1200x630 covers all of them:

Platform Recommended Size Aspect Ratio Notes
Facebook 1200 x 630 1.91:1 Minimum 600x315, max 8MB
LinkedIn 1200 x 627 1.91:1 Effectively identical to Facebook
X (large card) 1200 x 600 2:1 1200x630 also renders fine
Slack 1200 x 630 1.91:1 Falls back to og:image
iMessage 1200 x 630 1.91:1 Cache is aggressive, see debug section
Discord 1200 x 630 1.91:1 Renders quickly, no known quirks

Two practical rules save more previews than any other tip. First, keep the important content (headline text, faces, logo) inside the center 1080x600 pixels. Platforms crop edges differently on mobile, so anything at the border might get cut. Second, use PNG for text-heavy images and JPG for photos. PNG keeps small text crisp; JPG saves file size on photographic content. WebP works on some platforms in 2026 but is still inconsistent, so we don't recommend it as a default yet.

A word on image weight. A 3MB hero image loaded by Facebook's crawler adds real latency before the preview renders in someone's feed. If the crawler times out (Facebook's is fairly patient, LinkedIn's less so), the card falls back to no image at all. Compress aggressively. A well-optimized 200-400KB JPG is often indistinguishable from a 3MB original at preview sizes.

How Each Platform Reads Your Tags

Not every platform reads OG tags the same way. Understanding the differences saves debugging time when a preview looks fine on Facebook but broken on iMessage.

Facebook and Instagram DMs. Read all four OG tags. Cache aggressively (up to 30 days on the same URL). The Facebook Sharing Debugger is the canonical tool for forcing a re-scrape.

LinkedIn. Reads OG tags. Uses og:type=article to add richer card layouts with author attribution when you also supply article:author. Cache is shorter than Facebook but still measured in days. LinkedIn's Post Inspector tool clears the cache.

X. Prefers twitter:* tags, falls back to og:* if missing. The twitter:card value controls layout: summary is small square, summary_large_image fills the width with a 2:1 image. Most modern OG setups implicitly get summary_large_image behavior from the platform's fallback logic.

Slack. Reads OG tags on every paste and unfurls the preview inline. Very fast, minimal caching. Slack respects og:site_name and shows it as a chip above the card.

iMessage. Reads OG tags but caches aggressively per URL per device. If the recipient's iMessage cached a bad preview yesterday, they may see the bad one indefinitely even after you fix the tags. Best defense: fix before the first send.

Discord. Reads OG tags. Renders previews in real time. Almost never a caching issue.

WhatsApp. Reads OG tags. Behaves similar to iMessage with device-level caching.

Google Search. Not a preview card, but a reader of the same tags. Google lists og:title among the sources it can draw on for title links, and says og:image can influence which image Discover shows as the thumbnail.

The Problem: When You Can't Control the Destination

This is where a lot of teams get stuck. OG tags live on the destination page. If you own the page, you control the tags. But plenty of the links you share are on pages you don't own or can't easily edit:

  • Affiliate links. Amazon, ClickBank, ShareASale destinations - the OG tags reflect Amazon, not your brand.
  • Partner and client pages. You promote a client's landing page, but their preview is stale from last quarter's campaign.
  • News articles and third-party research. You share a Bloomberg piece as social proof, but the preview says "Bloomberg - Are you a robot?".
  • App store links. iOS/Play Store previews rarely reflect the app you're actually promoting.
  • PDFs and documents. Google Drive links, Dropbox previews, PDF hosts often have zero OG data.
  • Old CMS pages. Legacy pages on WordPress without a proper SEO plugin, or on Squarespace before you fixed the tags.
  • Redirects and forms. Typeform, Calendly, Tally links all use the tool's OG tags by default.

For all of these, the OG data is out of your hands. Any share of the raw URL will show whatever the destination decided to show, which is often "nothing" or "worse than nothing." This is exactly the case where custom OG on the short link itself is the workaround.

A short link with custom OG tags is essentially a two-stage page. When a social preview fetcher (Facebook's crawler, LinkedIn's bot, Slackbot, WhatsApp, Discord, and the like) requests the short link URL, the short link server returns a lightweight HTML page with your OG tags on it. When a human clicks the same URL, the server issues a normal redirect to the real destination. Two different responses to two different visitors, decided by the User-Agent string.

The upshot: you control the preview card even when you can't control the destination. Amazon affiliate link? Wrap it in a short link with your custom OG image showing the product and your review score. Client landing page? Wrap it with your own OG copy so the preview matches the campaign, not the client's last edit. Typeform survey? Preview shows your logo and question count, not Typeform's generic card.

U2L AI supports custom OG previews on short links. The link form has a Custom Social Previews section with fields for a title, description, and image URL, plus a live preview, and every share of that short link (on any platform reading OG) uses those overrides regardless of what the destination page contains. The short link still redirects to the real destination when a human clicks it - the OG override only affects what preview fetchers see.

There's a subtle SEO point worth calling out. On U2L AI, the custom preview page is served only to social preview fetchers. Search engine crawlers like Googlebot get the same normal redirect a human does, so they index the destination and never see a separate preview page. Custom OG on a short link therefore doesn't create duplicate-content issues. How search engines treat the redirect itself is covered in our 301 vs 302 redirects guide.

Here's the workflow we use to override an OG preview when the destination won't cooperate.

Step 1: Design your OG image

Create a 1200x630 pixel image in your design tool of choice. Keep the important content in the center 1080x600 safe zone. Use PNG for text-heavy visuals, JPG for photos. Export under 1MB and host it at a public HTTPS URL (your CDN, your site, any public image host). If you don't have a designer, tools like Canva have ready-made "Facebook Ad" or "OG Image" templates at this exact size.

Sign in to u2l.ai and click Create Link. Paste your long destination URL (the affiliate link, client page, PDF, whatever the raw target is). Choose a slug like u2l.ai/spring-launch that reads well when shared.

Step 3: Open the Custom Social Previews section

On the link create/edit form, expand Advanced Options and find Custom Social Previews. This is where you'll enter the overrides for title, description, and image.

Step 4: Fill in title and description

Type your OG title (under 60 characters, hook-style) and description (100-155 characters, benefit-forward). Preview them in the panel. These are what will show up on every platform that renders the preview.

Step 5: Add the OG image URL

Paste the public URL of the 1200x630 image from Step 1 into the image field. U2L AI puts it on the short link's preview page whenever a preview fetcher asks.

Step 6: Save and share

Save the link. Copy the short URL. Before you post publicly, paste the short URL into the Facebook Sharing Debugger or the LinkedIn Post Inspector and click Debug. You'll see the exact preview card the platform will render, with your custom OG data.

Step 7: Post it

Share the short link on your channels. Every platform reading OG (Facebook, LinkedIn, X, Slack, iMessage, WhatsApp, Discord) will show your custom preview regardless of what's on the destination page.

That's the whole flow. Once you've done it once, subsequent links take under two minutes. Where this really pays off is when you're running the same campaign across affiliate offers, partner pages, and lead-gen forms - one short-link-based OG lets the whole campaign look like one campaign, not a dozen different destinations mashed together.

If you already use short links for tracking and analytics, custom OG stacks on top for free. And if you're new to branded short domains, our guide on what a branded link is and why it lifts CTR explains the pairing: branded domain + custom OG = a preview card that looks unmistakably like you.

OG Preview Mistakes We See Every Week

The failure modes are surprisingly consistent across teams. Watch for these:

Reusing the header image as the OG image. A website hero at 1920x400 is not an OG image. When social platforms fetch it, they crop it to 1.91:1 and lose the top and bottom, which usually contains the headline. Always design a separate 1200x630 asset.

Text-heavy OG images. If your OG image is 90% text, it's illegible on mobile. Facebook used to actively downrank ads with more than 20% image text. The rule was retired officially but the ergonomics didn't change: a headline plus a small tagline plus a visual anchor is the ceiling for readability at preview size.

Broken relative image URLs. OG image tags require absolute URLs (https://yoursite.com/og.jpg, not /og.jpg). We've debugged more previews broken by relative paths than any other single cause. Always spec absolute URLs.

Missing description with only title and image. Platforms render an incomplete card if the description is missing. The card looks sparse, hurts CTR, and screams "we forgot the details." Always fill all three.

Ignoring cache. Facebook and LinkedIn cache OG data for days. If you fix the tags after sharing, the fix doesn't propagate until you force a re-scrape. Always debug through Facebook and LinkedIn's inspector tools before the first public share.

Different content on the preview vs the destination. If you use custom OG on a short link, the preview and the destination should be about the same thing. A misleading preview that redirects to a completely unrelated page is a clickbait pattern that platforms will eventually flag, and Facebook has explicit policies against it.

How to Debug a Broken Preview

If a preview renders wrong, work through this in order. It handles 95% of cases:

  1. Check the raw HTML. Open the destination page and view source. Search for og:title, og:description, og:image, og:url. If any are missing or wrong, that's your issue. Fix the tags.

  2. Force a re-scrape. Paste the URL into the Facebook Sharing Debugger and click "Scrape Again." Do the same on the LinkedIn Post Inspector. This clears the platform cache and forces a fresh fetch.

  3. Verify the image loads. Copy the og:image URL into a browser tab. If it 404s, redirects, or requires auth, the crawler can't fetch it either. Fix the image URL or move the image to a public CDN.

  4. Check for platform-specific weirdness. WhatsApp needs the image to be under a certain size and served over HTTPS. iMessage caches previews per device with no way to force-refresh from the sender's side. If a preview looks fine on Facebook but wrong on iMessage, it's a device-cache issue, not a tag issue.

  5. Test with a fresh URL. Some caching is per-URL. Adding a query parameter (?v=2) makes the URL new to every platform's cache and can force a fresh preview render.

  6. Try a custom OG short link. If you can't fix the destination page (someone else owns it, or CMS access is limited), wrap it in a short link with custom OG. Problem solved.

For a broader picture on how link previews interact with campaign tracking, our UTM parameters guide covers how to attach tracking data to OG-optimized short links without breaking either.

Frequently Asked Questions

What is an OG preview on social media?

An OG preview is the visual card that appears when you share a link on Facebook, LinkedIn, X, Slack, iMessage, and other platforms. It's built from Open Graph meta tags (og:title, og:description, og:image, og:url) on the destination page, and it decides what readers see before they click.

What size should an OG image be in 2026?

Use 1200 x 630 pixels as your default. This aspect ratio (1.91:1) works on Facebook, LinkedIn, X large card, Slack, Discord, WhatsApp, and iMessage. Keep file size under 1MB, use PNG for text-heavy images and JPG for photos, and keep important content inside the center 1080x600 safe zone.

Can I customize the link preview without editing the destination page?

Yes. Use a short link with custom OG data. The short link server returns a preview page with your custom Open Graph tags when a social preview fetcher requests it, and redirects to the real destination when a human clicks. This lets you override previews on affiliate links, client pages, and any other destination you can't edit directly.

Two common causes: the destination page's og:image tag is missing, wrong, or pointing at a broken URL, or the social platform has cached an older version of the tags. Fix the tag first, then force a re-scrape using the Facebook Sharing Debugger or LinkedIn Post Inspector to clear the cache.

Does X use Open Graph or Twitter Cards?

X reads its own twitter:* tags first and falls back to Open Graph tags when Twitter Cards are missing. Most sites only set OG tags and let X's fallback logic handle it, which works fine and produces a large-image card by default. Add explicit Twitter Card tags only if you want a different preview on X than on other platforms.

How long do platforms cache OG previews?

Facebook caches most aggressively (up to 30 days per URL). LinkedIn is a few days. iMessage and WhatsApp cache per-device with no way for the sender to force a refresh. Slack and Discord effectively don't cache. Always test previews through the debugger tools before your first public share.

Not if the preview accurately represents the destination content. Custom OG lets you replace a broken or generic preview with an on-brand version of the same content. It becomes clickbait only if the preview promises something the destination doesn't deliver, which every platform's policies (and your audience's trust) will eventually punish.

Do OG previews affect SEO?

Not directly as a ranking factor. Search engines rank the content on the page, not the OG tags. Google does read them, though: og:title is one of the sources it can use for title links, and og:image can influence the Discover thumbnail. Set OG tags for the humans; the search benefits arrive as a side effect.

Take Control of Every Preview You Send

Every link you share is a mini ad running before the click. OG tags decide what that ad looks like, and getting them right is one of the highest-leverage marketing tasks you'll do this quarter. Design a 1200x630 image, write a hook-style title, aim for a 100-155 character description, and verify the preview in the Facebook and LinkedIn debuggers before you hit send. For pages you can't edit, wrap them in a short link with custom OG and never think about the destination's meta tags again.

U2L AI supports custom OG previews on short links, alongside dynamic QR codes, custom domains, deep links, and full click analytics on one dashboard. If you send links to real audiences, set up your first custom OG short link at u2l.ai/app/signup and take back control of the preview card. For the full feature list, see u2l.ai/features.

Ready to try U2L AI?

Free forever plan. No credit card required.

Get Started Free View Pricing