Slack Open Graph Preview Guide

Optimize your Open Graph tags for Slack's workplace communication platform. Learn Slack-specific requirements, image dimensions, and best practices for professional link previews in Slack workspaces.

Updated December 2025 7 min read

Quick Answer

Slack uses standard Open Graph protocol with recommended image size of 1200×630px. Slack caches aggressively (24+ hours) and requires absolute HTTPS URLs. Focus on professional, workplace-appropriate content for best results.

How Slack Uses Open Graph Tags

Slack is a workplace communication platform that uses Open Graph tags to create rich link previews (unfurling) when users share URLs in channels, direct messages, and threads. Slack's implementation follows the standard Open Graph protocol.

Where Slack Shows Open Graph Previews

  • Channels - Link previews in public and private channels
  • Direct Messages - Rich embeds in 1-on-1 conversations
  • Group DMs - Preview cards in group conversations
  • Threads - Link previews in message threads
  • Shared Channels - Embeds in shared channels between workspaces

Slack Image Dimensions & Requirements

Slack follows standard Open Graph image recommendations:

Recommended Image Size

  • Optimal size: 1200×630px (1.91:1 aspect ratio)
  • Minimum size: 200×200px
  • Maximum file size: 5MB (but aim for under 1MB)
  • Format: JPG, PNG, GIF, or WebP
  • Image ratio: 1.91:1 works best, but Slack handles various ratios

Image Best Practices for Slack

  • Use professional, workplace-appropriate images
  • Keep text clear and readable
  • Use high contrast for visibility in Slack's interface
  • Test how images appear in both light and dark Slack themes
  • Consider Slack's compact, professional design aesthetic

Required Slack Open Graph Tags

Slack requires these essential Open Graph tags: 

<!-- Essential Open Graph Tags for Slack -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page 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" />

Recommended Additional Tags

  • og:site_name - Your site or company name
  • og:image:width and og:image:height - Image dimensions
  • og:image:alt - Alt text for accessibility
  • og:locale - Language locale

Slack Caching Behavior

Slack aggressively caches Open Graph data, similar to Discord:

Cache Duration

  • Slack typically caches for 24-48 hours
  • Cache is per-URL, so changing the URL bypasses cache
  • There's no official Slack cache-clearing tool

Cache Workarounds

  • Wait 24-48 hours for natural cache expiration
  • Use query parameters to create a "new" URL (e.g., ?v=2)
  • Test with a different URL to verify your tags are correct
  • Use our preview tool to verify tags without waiting for cache

Slack Link Unfurling

Slack automatically "unfurls" (expands) links into rich previews when shared. Understanding this process helps optimize your Open Graph tags:

Unfurling Process

  1. User shares a URL in Slack
  2. Slack's servers fetch the URL
  3. Slack parses Open Graph tags from the HTML
  4. Slack displays a rich preview card
  5. Preview is cached for future shares

Unfurling Best Practices

  • Ensure your server responds quickly (Slack has timeout limits)
  • Use absolute HTTPS URLs for all OG tags
  • Include all required tags for complete previews
  • Test unfurling in your own Slack workspace

Common Slack Open Graph Mistakes

1. Relative Image URLs

❌ <meta property="og:image" content="/images/og.jpg" />

✅ <meta property="og:image" content="https://example.com/images/og.jpg" />

Slack requires absolute URLs with HTTPS. Relative paths will not work.

2. Slow Server Response

Slack has timeout limits when fetching URLs:

  • Ensure your server responds within 3-5 seconds
  • Use CDN for images to improve load times
  • Optimize your server response time
  • Test with Slack's unfurling to verify performance

3. Not Accounting for Cache

Slack's aggressive caching means updates won't appear immediately:

  • Plan ahead when updating OG tags
  • Test with our preview tool before sharing in Slack
  • Consider using versioned URLs for important updates
  • Communicate cache delays to your team

4. Workplace-Inappropriate Content

Slack is a professional platform. Ensure your previews:

  • Use professional language and imagery
  • Avoid overly casual or entertainment-focused content
  • Focus on business value and outcomes
  • Match the professional tone of workplace communication

Slack Embed Structure

Understanding how Slack structures link previews helps optimize your Open Graph tags:

Preview Components

  • Title - From og:title (clickable, links to og:url)
  • Description - From og:description (truncated if too long)
  • Image - From og:image (displayed prominently)
  • Footer - Shows domain name from og:url
  • Site Name - From og:site_name (appears below title)

Description Length

Slack truncates long descriptions. Best practices:

  • Keep descriptions under 200 characters for full display
  • Put most important information in the first 150 characters
  • Use clear, concise language

Slack Workplace Tips

For workplace and B2B content shared in Slack, consider these optimizations:

Professional Content Strategy

  • Use professional, business-focused language
  • Emphasize business value and outcomes
  • Include relevant data or statistics
  • Use professional imagery (office, team, product demos)

Internal Tool Sharing

  • Many Slack links are internal tools and documentation
  • Make titles clear and descriptive
  • Use descriptions that explain value to team members
  • Include helpful context in the preview

Implementation Examples

Nuxt 3

useSeoMeta({
  ogTitle: 'Your Professional Title',
  ogDescription: 'Your workplace-appropriate description',
  ogImage: 'https://example.com/slack-og-image.jpg',
  ogUrl: 'https://example.com/page',
  ogType: 'website',
  ogSiteName: 'Your Company Name',
  ogLocale: 'en_US',
  ogImageWidth: '1200',
  ogImageHeight: '630'
})

Next.js 14+

export const metadata = {
  openGraph: {
    title: 'Your Professional Title',
    description: 'Your workplace-appropriate description',
    images: [{
      url: 'https://example.com/slack-og-image.jpg',
      width: 1200,
      height: 630,
      alt: 'Professional image description'
    }],
    url: 'https://example.com/page',
    siteName: 'Your Company Name',
    locale: 'en_US',
    type: 'website'
  }
}

Test Your Slack Link Previews

Preview how your links will appear in Slack workspaces and channels.

Try the Free Preview Tool