For MarketersFor DevelopersFor Product
6 min read

Social Preview Links

When you share a link on social media, platforms show a preview card with an image, title, and description. These previews dramatically affect click-through rates — a compelling preview can increase engagement by 2-3x.

What you'll learn

  • How Open Graph and Twitter Card metadata work
  • Configuring rich previews for different social platforms
  • Testing and debugging your social preview cards

Why social previews matter

Compare these two shared links:

Without preview metadata:

https://ulink.to/summer23

Just a plain URL. No context, no visual appeal, easy to scroll past.

With preview metadata: A rich card showing your product image, a compelling title, and a clear description. Much more likely to get clicked.

Key Concept

Social previews are your link's first impression. They're essentially free advertising real estate — make every pixel count.

How social previews work

When you share a link, platforms like Facebook, Twitter, LinkedIn, and Slack fetch the URL and look for special metadata tags:

  1. Crawler visits URL — Platform's bot fetches your link
  2. Metadata extracted — Reads Open Graph and Twitter Card tags
  3. Preview generated — Displays image, title, and description
  4. Cached — Preview is stored (sometimes for days)

Open Graph tags

Open Graph (OG) is the standard used by Facebook, LinkedIn, and most platforms:

<meta property="og:title" content="Summer Collection 2023" />
<meta property="og:description" content="Shop our latest arrivals" />
<meta property="og:image" content="https://yoursite.com/preview.jpg" />
<meta property="og:url" content="https://ulink.to/summer23" />

Twitter Card tags

Twitter uses its own format (with OG fallback):

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Summer Collection 2023" />
<meta name="twitter:description" content="Shop our latest arrivals" />
<meta name="twitter:image" content="https://yoursite.com/preview.jpg" />

Platform-specific requirements

Facebook/Instagram: Image should be 1200x630px. Title limited to 60 chars, description to 155 chars. Caches aggressively — use their debugger to refresh.

Configuring previews in ULink

When creating a link, you can set social preview metadata:

Title — Compelling headline (50-60 characters ideal)

Description — Clear value proposition (150-160 characters)

Image URL — High-quality image (1200x630px recommended)

These values are served when social platforms crawl your short link.

Gotcha

Social platforms cache previews aggressively. If you update your preview metadata, use each platform's debugging tool to force a refresh — otherwise users may see stale content for days.

Best practices for preview images

Do:

  • Use 1200x630px dimensions (works across all platforms)
  • Include your logo or branding
  • Use high contrast, readable text (if any)
  • Test how it looks cropped to square (some contexts)

Don't:

  • Use tiny images (they'll look blurry)
  • Put critical info at the edges (may get cropped)
  • Use misleading images (damages trust)
  • Forget alt text for accessibility

Testing your previews

Before sharing widely, test your previews:

These tools also let you clear cached previews and force a refresh.

Quick recap

  • Social previews dramatically increase click-through rates
  • Use Open Graph tags for broad compatibility
  • Images should be 1200x630px for best results
  • Test on each platform and clear caches when updating