What Are Open Graph Tags? A Guide to Link Previews and Social Sharing

When you share a link on Facebook, LinkedIn, Slack, or Twitter, a preview card usually appears — with a title, description, and image. These previews aren't magic. They're controlled by Open Graph (OG) tags in your page's HTML.

Getting Open Graph tags right means your shared links look professional and get more clicks. Getting them wrong means ugly previews, missing images, or generic fallback text.

What Is the Open Graph Protocol?

Open Graph is a protocol created by Facebook in 2010 that lets web pages define how they appear when shared on social platforms. It uses meta tags in the HTML <head> section:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short summary of the page" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

When a social platform detects a shared URL, it fetches the page and reads these tags to build the preview card.

Essential Open Graph Tags

og:title

The title displayed in the preview card. Keep it under 60 characters for best display across platforms.

<meta property="og:title" content="How to Create Branded Short Links" />

Tips:

Don't just duplicate your <title> tag — optimize for social engagement
Front-load important words
Avoid clickbait (platforms may penalize it)

og:description

A brief summary shown below the title. Aim for 120-160 characters.

<meta property="og:description" content="Create custom branded short links with click tracking and analytics. Set up in 5 minutes." />

og:image

The image displayed in the preview. This is the most impactful tag — posts with images get significantly more engagement.

<meta property="og:image" content="https://example.com/social-preview.jpg" />

Image requirements by platform:

Platform	Recommended Size	Aspect Ratio
Facebook	1200 × 630 px	1.91:1
Twitter	1200 × 628 px	1.91:1
LinkedIn	1200 × 627 px	1.91:1
Slack	500 × 500 px min	Any

Use 1200 × 630 pixels to cover all platforms.

og:url

The canonical URL for the page. This tells platforms which URL to display and helps prevent duplicate content.

<meta property="og:url" content="https://example.com/page" />

og:type

Describes the type of content. Common values:

website — for homepages and general pages
article — for blog posts and articles
product — for product pages

Twitter Card Tags

Twitter uses its own meta tags (in addition to Open Graph) for preview cards:

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

If Twitter card tags aren't present, Twitter falls back to Open Graph tags. Most sites set both for maximum control.

When you share a URL:

1The platform's crawler visits the URL
2It reads the HTML <head> for OG tags
3It caches the preview card data
4Subsequent shares of the same URL use the cached version

Important: Changes to OG tags aren't reflected immediately. Platforms cache aggressively, so you may need to manually clear the cache (see debugging below).

Customizing Link Previews with Linkly

What if you're sharing a URL you don't control — or you want different preview cards for different contexts?

Linkly's custom social previews feature lets you override the Open Graph data for any shortened link:

Set a custom title, description, and image
Different previews for different audiences
No need to edit the destination page's HTML
Works for any URL, even pages you don't own

This is especially useful when:

Sharing third-party content with your own branding
A/B testing different preview cards to see which gets more clicks
The destination page has poor or missing OG tags

Debugging Open Graph Tags

Facebook's tool lets you preview and refresh cached OG data:

1Enter your URL
2Click Debug
3See what Facebook reads from your page
4Click Scrape Again to clear the cache

Twitter Card Validator

Twitter's validator shows how your card will appear and highlights any issues.

LinkedIn Post Inspector

LinkedIn's tool previews your link card and refreshes cached data.

General Tips

Check the source: View your page source and search for og: to verify tags are present
Use absolute URLs: Image URLs must be absolute (start with https://), not relative
Test after changes: Always clear the platform cache after updating OG tags
Check for JavaScript rendering: Some platforms can't execute JavaScript, so OG tags must be in the initial HTML response

Common Mistakes

1Missing og:image: Posts without images get 2-3x fewer clicks
2Image too small: Use at least 1200 × 630 pixels
3Wrong aspect ratio: Images get cropped awkwardly
4Stale cache: Updated your OG tags but forgot to clear platform caches
5Duplicate tags: Multiple OG tags of the same type cause unpredictable behavior
6HTTP images: Use HTTPS for image URLs — some platforms block HTTP images
7Relative URLs: Platform crawlers can't resolve relative paths

Open Graph for Different Content Types

Blog Posts

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-04-02" />
<meta property="article:author" content="Your Name" />

Products

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />

Videos

<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/video.mp4" />

Conclusion

Open Graph tags are a small addition to your HTML that have a big impact on how your content appears across the social web. Getting them right — with the right title, description, and image — directly increases click-through rates when your links are shared.

Want custom link previews without editing HTML? Get started with Linkly and customize the social preview card for any shortened link — set your own title, description, and image.