Open Graph meta tags determine the title, description, and image shown whenever a page link is shared on Facebook, LinkedIn, Slack, Discord, and most other platforms that generate link previews.
1The Core Open Graph Properties
og:title, og:description, and og:image, placed as <meta property="..." content="..."> tags in the <head>, form the foundation of any Open Graph implementation. They're deliberately distinct from a page's regular <title> and meta description — a share card often benefits from punchier, more visual language than a search-result snippet does.
Without these tags, sharing platforms attempt a best-effort fallback, usually scraping the page's <title> and guessing at a representative image, which frequently produces an unappealing or even broken-looking card.
2Correct og:image Sizing
The de facto standard og:image size is at least 1200x630 pixels, at roughly a 1.91:1 aspect ratio — large enough to render crisply on high-density displays and wide enough to fill the horizontal card layout most platforms use.
Images smaller than this get upscaled by the platform's renderer, producing visible blur. Images at a significantly different aspect ratio (a tall portrait photo, for instance) get cropped unpredictably by each platform's own algorithm, often cutting off important visual content.
3og:type For Content-Specific Enrichment
og:type declares what kind of content the page represents — website (the general default), article, product, video.other, and more. Declaring a specific type unlocks access to that type's additional namespace of properties; article, for instance, allows article:published_time, article:author, and article:section.
Some platforms use these additional fields to render enriched cards — showing a publish date or author byline directly in the share preview — though support varies by platform, making the core trio still the highest-priority investment.
4Step-by-Step Breakdown
Controlling How Your Page Looks When Shared. Paste a link into Slack, LinkedIn, or Facebook and a rich preview card appears automatically — a title, description, and image. That card isn't scraped visually; it's read directly from Open Graph meta tags in the page's <head>, a protocol originally created by Facebook and now used almost universally.
The Core Open Graph Trio. Three properties cover the vast majority of Open Graph's value: og:title (the headline shown in the card), og:description (the supporting text), and og:image (the preview thumbnail). Without them, platforms fall back to guessing from the page's <title> and first image, often with poor results.
Core OG Properties. Without any Open Graph tags, what does a sharing platform typically use to build a fallback preview card?
- →It guesses from the page's <title> and first detected image, often poorly
- →It refuses to generate any preview card at all
- →It always inserts a random stock photo
og:image Has Strict Size Recommendations. Platforms recommend og:image be at least 1200x630 pixels for crisp rendering across devices, with a roughly 1.91:1 aspect ratio. Images that are too small get upscaled and blurry; wildly different aspect ratios get awkwardly cropped by each platform's card renderer.
og:image Sizing. Why does the recommended og:image size matter beyond just 'looking good'?
- →It's an arbitrary suggestion with no real functional impact
- →Undersized or mismatched-ratio images get blurry upscaling or awkward cropping
- →Platforms reject any image over 1200x630 outright
og:type Describes What Kind Of Content This Is. og:type tells platforms whether a page represents a generic website, an article, a product, or a video, which some platforms use to render specialized card layouts and metadata fields (like article:published_time for blog posts).
og:type Purpose. What does setting og:type="article" specifically unlock, beyond the basic title/description/image trio?
- →Nothing; it's purely decorative metadata
- →Access to additional type-specific fields like article:published_time
- →A guaranteed direct search-ranking boost
Share Cards Mastered. You now know how to control exactly what appears when your pages are shared across social and messaging platforms, including correct image sizing and type-specific metadata for richer preview cards.
Add Open Graph Tags For Link Previews. og:title and og:image control how the page appears when shared on social platforms.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Open Graph Metadata Is Invisible To Assistive Technology On The Page Itself
It only affects how external platforms render a share preview; it has no bearing on the actual page's screen-reader experience, and should never be treated as a substitute for on-page alt text or headings.
SEO Implications
- 1
Open Graph Tags Are Not A Direct Google Ranking Factor, But Drive Social Referral Traffic
A compelling share card increases click-through rates when content is shared on social platforms, indirectly benefiting overall traffic and engagement signals even though Open Graph itself isn't part of core search ranking algorithms.
- 2
og:title/og:description Can And Should Differ From Regular SEO Title/Description
Search snippets and social cards serve different psychological contexts — a snippet answers a search query, a share card needs to earn a click from a social feed, so tailoring each separately typically performs better.
Best Practices
Always Provide An Explicit og:image At Least 1200x630px
It's the single highest-impact Open Graph property visually, and platform fallback behavior when it's missing or undersized is inconsistent and often unappealing.
Set og:type Deliberately Rather Than Leaving The Default
Choosing 'article' for blog content or 'product' for e-commerce pages unlocks type-specific enrichment fields some platforms use to render more informative cards.
Frequent Bugs
A shared link shows a blurry, stretched preview image on Slack and LinkedIn.
The og:image is smaller than the recommended 1200x630px. Provide a properly sized, high-resolution image.
A page shows an outdated title and image when shared, despite the page content being updated.
Most platforms cache Open Graph data aggressively. Use each platform's cache-debugging tool (e.g. Facebook's Sharing Debugger) to force a re-scrape after content updates.
Real-World Examples
Dynamic OG Image Per Article
A blog platform generating a unique og:image per post using an image-generation service, ensuring every share card is accurate and on-brand.
<meta property="og:image" content={`https://example.com/api/og?title=${encodeURIComponent(title)}`} />