The Complete Guide to OG Tags

Learn how Open Graph tags work across different platforms and how to optimize your link previews.

The Complete Guide to Open Graph Tags

Open Graph (OG) tags are HTML meta tags that control how your URLs appear when shared on social platforms. Each platform reads these tags to generate rich link previews — but they don't all behave the same way.

What Are OG Tags?

The Open Graph protocol was originally created by Facebook in 2010 to allow any web page to become a rich object in a social graph. When you paste a URL into a chat or social media post, the platform's crawler visits that URL, reads the OG meta tags in the <head> section, and uses them to build a visual link preview card.

Without OG tags, platforms have to guess what to display — often pulling random text and images from the page with poor results. With proper OG tags, you control exactly what users see before they click.

A well-crafted OG preview can increase click-through rates by up to 2x compared to a bare URL.

Required vs Optional Tags

Not all OG tags carry equal weight. Here's a breakdown of what's essential and what's nice to have.

Required Tags

These four tags are the absolute minimum for a proper link preview on any platform:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description of your page" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />

| Tag | Purpose | Example | |-----|---------|---------| | og:title | The headline shown in the preview card | "Launch Your Startup in 30 Days" | | og:description | A short summary shown below the title | "A step-by-step guide to going from idea to MVP" | | og:image | The preview image URL (must be absolute) | "https://example.com/hero.jpg" | | og:url | The canonical URL of the page | "https://example.com/guide" |

If you only set one tag, make it og:image. Previews without images get dramatically less engagement across every platform.

Optional (But Recommended) Tags

These tags give you finer control and better rendering:

<meta property="og:type" content="website" />
<meta property="og:site_name" content="OGShort" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="ko_KR" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Description of the image" />

| Tag | Purpose | When to Use | |-----|---------|-------------| | og:type | Content type (website, article, product) | Always — defaults to website if omitted | | og:site_name | Your brand name shown above the title | Always — reinforces brand recognition | | og:locale | Language and region (en_US, ko_KR) | For multilingual sites | | og:image:width / og:image:height | Image dimensions in pixels | Always — helps platforms render faster without downloading the image first | | og:image:alt | Alt text for the preview image | Always — improves accessibility |

Platform-Specific Differences

Each platform has its own crawler, rendering rules, and quirks. Here's what you need to know for each one.

Facebook & Instagram

Facebook / Instagram

Facebook created the Open Graph protocol, so it follows the standard most closely. Instagram uses the same system for link previews in stories and bios.

Image size: 1200 x 630 pixels (1.91:1 ratio) — the gold standard
Minimum image size: 600 x 315 pixels
Title limit: ~60 characters before truncation
Description limit: ~65 characters on mobile, ~100 on desktop
Supports og:image:width and og:image:height for faster rendering
Caches previews aggressively for 24-72 hours

Use the Facebook Sharing Debugger (developers.facebook.com/tools/debug) to preview and clear cached OG data. You can also force a re-scrape by clicking "Scrape Again".

Twitter (X)

Twitter / X

Twitter has its own meta tag system (twitter:card) that takes priority over OG tags. If Twitter-specific tags are missing, it falls back to standard OG tags.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourbrand" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />
<meta name="twitter:image:alt" content="Image description" />

Card types: summary (small square image), summary_large_image (large banner image), app, player
Image size: 1200 x 628 pixels for summary_large_image, 144 x 144 minimum for summary
Title limit: ~70 characters
Description limit: ~200 characters
File size limit: Images must be under 5MB
Falls back to og: tags if twitter: tags are missing

The twitter:site tag associates the card with your brand's Twitter handle, adding credibility. The twitter:creator tag can credit the content author separately.

Discord

Discord renders OG previews as embedded cards in chat messages and has some unique behaviors:

Image size: 1200 x 630 pixels (same as Facebook)
Large image threshold: Images wider than 400px are displayed as large embeds
Title limit: ~256 characters (generous, but keep it short)
Description limit: ~350 characters
Supports the theme-color meta tag to set the embed's left border color
Respects twitter:card type — summary_large_image shows a large image embed
Reads og:video for inline video previews
Strips tracking parameters from displayed URLs

<!-- Discord picks up theme-color for the embed accent -->
<meta name="theme-color" content="#5865F2" />

Discord is one of the few platforms that supports og:video for inline playback. If you're sharing video content, include both og:video and og:image (as a fallback thumbnail).

LinkedIn follows OG standards closely and is particularly important for B2B and professional content:

Image size: 1200 x 627 pixels (nearly identical to Facebook's ratio)
Minimum image size: 200 x 200 pixels (but previews will look poor at this size)
Title limit: ~70 characters
Description limit: ~100 characters
Supports og:type values like article for blog posts
Caches very aggressively — previews can persist for days

LinkedIn's cache is notoriously sticky. Use the LinkedIn Post Inspector (linkedin.com/post-inspector) to force a re-scrape after updating your OG tags. Even then, it may take several minutes to update.

Slack

Slack renders OG previews inline in messages with a distinctive format:

Image size: Follows standard 1200 x 630, but also supports smaller images
Displays a colored left sidebar using the theme-color meta tag
Shows the favicon alongside the site name (sourced from og:site_name)
Supports standard OG tags — no proprietary meta tags needed
Title is shown as a clickable link
Description appears as muted text below the title
Unfurls links automatically in channels (can be disabled per-workspace)

<!-- Slack uses theme-color for the sidebar accent -->
<meta name="theme-color" content="#6C5CE7" />

Slack's bot identifies itself as Slackbot-LinkExpanding. It follows redirects and respects robots.txt, so make sure your OG-tagged pages are crawlable.

KakaoTalk

KakaoTalk is the dominant messaging app in South Korea with over 50 million users. It uses standard OG tags but has distinct rendering behavior:

Image ratio: Prefers 800 x 400 pixels (2:1 ratio) for optimal display in chat bubbles
Title limit: ~30 characters in the compact card view
Description limit: ~50 characters before truncation
Scrapes OG tags similarly to Facebook
Korean text in titles and descriptions renders more naturally and uses space more efficiently
Uses its own cache system — clear it via Kakao's developer tools (developers.kakao.com)

KakaoTalk's link preview cards appear directly in the chat stream, making them highly visible. Optimizing OG tags for KakaoTalk is essential if your audience includes Korean users.

Quick Reference: Image Sizes by Platform

| Platform | Optimal Image Size | Aspect Ratio | Max File Size | |----------|-------------------|--------------|---------------| | Facebook / Instagram | 1200 x 630 | 1.91:1 | 8 MB | | Twitter / X | 1200 x 628 | 1.91:1 | 5 MB | | Discord | 1200 x 630 | 1.91:1 | 8 MB | | LinkedIn | 1200 x 627 | 1.91:1 | 5 MB | | Slack | 1200 x 630 | 1.91:1 | No strict limit | | KakaoTalk | 800 x 400 | 2:1 | 5 MB |

A single 1200 x 630 image works acceptably on all platforms. Only create per-platform images when you need pixel-perfect optimization — especially for KakaoTalk's 2:1 ratio.

Per-Platform OG Tags with OGShort

The real power comes when you can customize OG tags per platform. OGShort detects the requesting bot's user agent and serves different metadata for each:

| Platform | User Agent Contains | What You Can Customize | |----------|-------------------|----------------------| | Facebook | facebookexternalhit | Title, description, image, type | | Twitter | Twitterbot | Card type, title, description, image | | Discord | Discordbot | Title, description, image, theme color | | KakaoTalk | kakaotalk-scrap | Title, description, image (Korean-optimized) | | LinkedIn | LinkedInBot | Title, description, image | | Slack | Slackbot | Title, description, image, theme color |

This means you can:

Show a professional headline on LinkedIn but a casual title on Twitter
Use different images optimized for each platform's aspect ratio
Write Korean descriptions for KakaoTalk and English for others
Set brand colors for Discord and Slack embed accents
Use summary cards on Twitter for some links and summary_large_image for others

Always provide fallback OG tags for crawlers you don't specifically target. Unknown bots and search engines should still get a good preview.

Best Practices

Always include an image — previews without images get significantly less engagement across all platforms
Test on every platform — don't assume consistent rendering; each platform has quirks
Keep titles concise — aim for 40-60 characters to avoid truncation everywhere
Use absolute URLs for images — relative paths won't work with any crawler
Set image dimensions explicitly — helps platforms render previews faster without downloading the image first
Clear platform caches after updating tags — every platform caches aggressively
Use HTTPS for image URLs — some platforms block or deprioritize HTTP images
Include og:site_name — builds brand recognition across all preview cards
Add og:image:alt — improves accessibility and is increasingly used by platforms
Validate regularly — OG tags can break silently when pages are redesigned

Next Steps

Ready to start customizing your link previews per platform? Sign up for OGShort and create your first short link with per-platform OG tags in minutes.