DEV Community

Michael Lip
Michael Lip

Posted on • Originally published at zovo.one

Your Link Preview Is Your First Impression. Most Developers Ignore It.

#webdev #seo #html #beginners

When you share a link on Slack Twitter LinkedIn or any messaging platform the preview card is generated from your Open Graph meta tags. A missing og image means your link shows up as a bare URL with no visual context. That is a missed opportunity.

What platforms read

When you paste a URL into Slack, Twitter, LinkedIn, Facebook, or Discord, the platform's crawler fetches the page and reads specific meta tags from the HTML head:

<meta property="og:title" content="Your Title">
<meta property="og:description" content="Your description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
Enter fullscreen mode Exit fullscreen mode

If these tags are missing, the platform either shows nothing (bare URL) or tries to infer information from the page content, usually with poor results.

The image is everything

A link shared with an image gets 2-5x more engagement than one without. The og:image tag is the single most impactful meta tag for social sharing.

Image requirements:

  • Minimum size: 200x200 pixels (but too small for most platforms)
  • Recommended: 1200x630 pixels (works everywhere)
  • Maximum file size: 5MB for most platforms
  • Format: JPG or PNG (some platforms support WebP)
  • Aspect ratio: 1.91:1 for large cards

Platform-specific differences

Twitter prefers its own twitter:card meta tags but falls back to OG tags. The twitter:card type determines the layout: summary (small image) or summary_large_image (large image).

LinkedIn strictly caches previews. After the first share, the preview is cached for about 7 days. Use LinkedIn's Post Inspector to force a refresh.

Facebook caches aggressively. Use the Facebook Sharing Debugger to clear the cache and see updated previews.

Slack reads OG tags in real-time but caches for the workspace. Re-sharing the same URL shows the cached version.

Testing before sharing

The worst time to discover your OG tags are broken is after you share the link publicly. Test first:

  • Facebook: developers.facebook.com/tools/debug/
  • Twitter: cards-dev.twitter.com/validator
  • LinkedIn: linkedin.com/post-inspector/

Or use a universal preview tool that shows how the link appears across all platforms simultaneously.

For previewing how your link will appear on every major platform before sharing, I built a preview tool at zovo.one/free-tools/og-preview. Enter a URL, and it fetches the OG tags and renders mock previews for Twitter, Facebook, LinkedIn, Slack, and Discord.

I'm Michael Lip. I build free developer tools at zovo.one. 500+ tools, all private, all free.

Top comments (0)