Everything you need to know about Open Graph images and how to make your shared links look irresistible on every platform.
Every time someone shares your website link on social media, an image appears alongside it. That image — the OG image — is your content's first impression in the social feed. It's the difference between someone scrolling past your link and someone clicking through to your website. Despite its enormous impact on traffic and engagement, many website owners and marketers treat OG images as an afterthought, or worse, don't set them at all.
This guide covers everything about Open Graph images: what they are, how they work, why they matter, and exactly how to implement and optimize them for every major social platform. By the end, you'll know how to make every shared link look polished and professional.
The Open Graph protocol is a set of meta tags introduced by Facebook in 2010 that allows web pages to become rich objects in social graphs. When you add Open Graph tags to your HTML, you're telling social platforms exactly what title, description, and image to display when someone shares your page. The most important of these tags is og:image, which defines the preview image.
Without OG tags, social platforms try to guess what to display. They might pull a random image from your page, use your favicon, or show no image at all. With properly configured OG tags, you have full control over how your content appears in every social feed, messaging app, and link preview across the internet.
The impact of OG images on click-through rates is substantial. Studies consistently show that social media posts with high-quality preview images receive 2-3 times more engagement than those without. Here's why they're critical:
Before anyone reads your headline or meta description, they see your OG image. In a crowded social feed, this image is your hook. A compelling, well-designed OG image stops the scroll and draws attention to your content. A missing or low-quality image sends the opposite signal — it suggests the content behind the link isn't worth the click.
Consistent OG images across your site create a recognizable visual identity in social feeds. When people repeatedly see your branded preview cards, they start associating that visual style with your content. This builds trust and recognition over time, making people more likely to click your links in the future.
While OG images aren't a direct Google ranking factor, they influence signals that do matter. Higher click-through rates from social shares drive more traffic to your site, which sends positive engagement signals. Social shares themselves can lead to backlinks as more people discover and reference your content. The compounding effect of well-optimized OG images is real, even if the path from image to ranking isn't direct.
When someone shares a URL on a social platform, the platform's crawler fetches the page's HTML and looks for Open Graph meta tags. These tags live in the <head> section of your page and follow a specific format. Here's a minimal but complete set of OG tags:
<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/images/og-image.jpg"> <meta property="og:url" content="https://example.com/your-page"> <meta property="og:type" content="article">
For best results, include these additional OG image properties that tell platforms exactly how to handle your image:
<meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Description of the image for accessibility">
Specifying width and height helps platforms render the preview correctly without having to download and analyze the image first. The alt text provides context and improves accessibility. Together, these tags ensure your image displays exactly as intended across all platforms.
Here's what a fully optimized head section looks like for a blog post:
<head> <meta property="og:title" content="10 Tips for Better Web Performance"> <meta property="og:description" content="Practical techniques to speed up your website and improve user experience."> <meta property="og:image" content="https://example.com/images/web-performance-tips.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta property="og:image:alt" content="Speed meter and performance charts"> <meta property="og:url" content="https://example.com/blog/web-performance-tips"> <meta property="og:type" content="article"> <meta property="og:site_name" content="Your Website Name"> <meta property="article:published_time" content="2026-04-13"> </head>
While the Open Graph protocol is standardized, each platform interprets and displays OG images slightly differently. Understanding these differences helps you create images that work everywhere.
Facebook was the original adopter of Open Graph and remains the most faithful to the protocol. Link previews display at 1200 × 630 pixels on desktop, with the image taking up roughly half the preview card width. On mobile, the image is displayed full-width at a slightly cropped version of the same dimensions. Facebook's crawler is thorough — it will re-scrape your page when you use the Sharing Debugger, making it relatively easy to fix broken previews.
Twitter supports both Open Graph tags and its own Twitter Card meta tags. When twitter:image is set, it takes priority over og:image. When it's not set, Twitter falls back to og:image. Twitter offers several card types: summary (small square image), summary_large_image (large banner image), and player (video/audio). For most content, summary_large_image with a 1200 × 628 pixel image delivers the best results.
LinkedIn closely follows the Open Graph protocol. Link previews display the OG image at approximately 1200 × 627 pixels. LinkedIn has a more aggressive caching system than other platforms, and it can take several days for updated OG images to appear. Use LinkedIn's Post Inspector tool to force a re-scrape and verify your previews.
Discord uses OG tags to generate link embeds in chat messages. The preview displays the og:image prominently, along with the og:title and og:description. Discord renders OG images well at standard dimensions and supports both JPEG and PNG formats. For maximum quality in Discord embeds, 1200 × 630 pixels works perfectly.
Slack generates unfurl previews using OG tags when links are shared in channels. The image appears as a thumbnail alongside the title and description. Slack prefers images around 1200 × 630 pixels and will display them at a reduced size. One thing to note: Slack caches link previews aggressively, and there's no official tool to clear the cache — the preview updates when Slack's bot re-crawls the URL, which can take hours to days.
The universal sweet spot for OG images is 1200 × 630 pixels with a 1.91:1 aspect ratio. This dimension works on Facebook, Twitter, LinkedIn, Discord, Slack, and virtually every other platform that supports link previews. Going smaller than 600 pixels wide risks the image not appearing at all. Going larger is fine but provides no visible benefit since platforms resize to their display dimensions anyway.
OG images are displayed relatively small in social feeds, especially on mobile. If you include text in your OG image, use a minimum font size of 40 pixels at the full 1200 × 630 resolution. Avoid more than 6-8 words of text — OG images are not infographics. The text should complement the meta title and description, not duplicate them.
Social feeds are visually noisy. Your OG image needs to stand out against photos, videos, and other content. Use bold, saturated colors and high contrast between elements. Dark backgrounds with bright text tend to perform well because they create strong visual contrast against the predominantly white or light gray backgrounds of social feeds.
Add your logo, brand colors, or a consistent visual element to every OG image. This builds recognition over time. Place your logo in a consistent position — top-left or bottom-right corners work well because they don't interfere with the center content and are less likely to be cropped on different platforms.
Large image files slow down page loading and can cause social platform crawlers to timeout or fail. Keep your OG image under 1MB for optimal performance. Use JPEG at 80-85% quality for photographic images, or PNG-8 for graphics with limited colors. Modern formats like WebP offer even better compression but aren't universally supported by all platforms yet.
The og:image content must be an absolute URL (starting with https://). Relative URLs like /images/og.jpg won't work because the social platform's crawler doesn't know what domain to resolve them against. Always use the full URL including the protocol.
If the wrong image or no image appears when you share a link, first check that your og:image meta tag is correctly formatted and uses an absolute HTTPS URL. Then verify that the image URL is publicly accessible — if it's behind authentication or blocked by robots.txt, the platform can't fetch it. Finally, clear the platform's cache using their debugging tools: Facebook Sharing Debugger, Twitter Card Validator, or LinkedIn Post Inspector.
Cropping happens when your image's aspect ratio doesn't match what the platform expects. Stick to 1.91:1 (1200 × 630) and you'll avoid most cropping issues. If you must use a different aspect ratio, test it across platforms first. Distortion usually means the platform is forcing your image into a fixed container without maintaining the aspect ratio — this is rare with properly sized images.
All social platforms cache OG data to reduce load on their systems. When you update your OG image, the cached version may persist for hours or days. Use the platform's official debugging tool to force a re-scrape. For Facebook, the Sharing Debugger has a "Scrape Again" button. For Twitter, paste your URL into the Card Validator. For LinkedIn, use the Post Inspector. If the cache persists after using these tools, try appending a cache-busting query parameter like ?v=2 to your image URL.
See exactly how your URLs will look on Facebook, Twitter, LinkedIn, Discord, and Slack before you share them. Use our free OG Image Preview tool.
Preview Your OG Images →If you run a blog or content-heavy site, creating unique OG images for every page is time-consuming. Dynamic OG image generation solves this problem by automatically creating preview images from your page's title, description, and other metadata.
Services like Vercel OG, Placid, and Cloudinary can generate OG images on the fly from templates. You pass the page title, author name, and other variables via URL parameters, and the service returns a ready-to-use image. This approach ensures every page has a consistent, branded OG image without manual design work for each one.
If you're technically inclined, you can also build your own OG image generator using serverless functions and HTML-to-image libraries like Puppeteer or Sharp. This gives you full control over the design template while keeping the process automated.
OG images are one of the highest-leverage optimizations you can make for your website's social presence. They're relatively simple to implement, they work across all major platforms, and they have a direct, measurable impact on click-through rates and social engagement. If you haven't already audited your site's OG images, there's no better time to start. Check your pages with a preview tool, fix any missing or broken images, and establish a consistent template for all future content.
The few minutes you spend on OG image optimization can translate into thousands of additional clicks over the lifetime of your content. It's a small investment with an outsized return.
An OG (Open Graph) image is the preview image that appears when someone shares a link on social media platforms. It's defined in your HTML using the og:image meta tag as part of the Open Graph protocol originally created by Facebook.
The recommended size is 1200 × 630 pixels with a 1.91:1 aspect ratio. This works across Facebook, Twitter, LinkedIn, Discord, and Slack. Minimum recommended width is 600 pixels.
Common causes include missing og:image meta tags, inaccessible image URLs (blocked by robots.txt), images over 8MB, HTTP instead of HTTPS URLs, or stale platform cache. Use Facebook's Sharing Debugger and Twitter's Card Validator to diagnose and fix.
Use RiseTop's free OG Image Preview tool to see exactly how your links will appear on all major platforms. You can also use Facebook's Sharing Debugger and Twitter's Card Validator for official testing.
og:image is used by Facebook, LinkedIn, Discord, and most platforms. twitter:image is Twitter's own tag that overrides og:image for Twitter. If twitter:image is not set, Twitter falls back to og:image. For most cases, a single og:image is sufficient.