Glossary

What Is OG Image (Open Graph Image)?

An OG Image (Open Graph Image) is a specific image declared in a webpage's <head> via the <meta property='og:image'> tag, part of the Open Graph Protocol introduced by Facebook in 2010 and now supported by virtually every major platform including Twitter/X, LinkedIn, Slack, and iMessage. It controls the preview thumbnail displayed when a URL is shared on social media or messaging apps, functioning as the visual ambassador for that page. Unlike favicon or body images, the OG image is purely metadata-driven — it never renders in the browser but is fetched directly by social crawlers.

What Is OG Image (Open Graph Image)?

How OG Image (Open Graph Image) Works

When a user shares a URL on a platform like LinkedIn or Slack, the platform's link-preview crawler (e.g., LinkedIn's Draftbot, Twitter's Twitterbot, or Facebook's facebookthird-partyhit) sends an HTTP GET request to that URL and parses its HTML <head> for Open Graph meta tags. The crawler specifically looks for <meta property='og:image' content='https://example.com/preview.jpg'> and related tags like og:image:width, og:image:height, og:image:type, and og:image:secure_url. The image URL must be absolute, not relative, and publicly accessible without authentication — crawlers cannot follow redirects indefinitely or handle cookies. Once the crawler retrieves the og:image URL, it fetches the image file itself and typically caches it for a period ranging from 24 hours to several weeks depending on the platform. Facebook's scraper caches aggressively and requires using the Sharing Debugger tool at developers.facebook.com/tools/debug to force a cache refresh when you update an OG image. Twitter/X tends to re-fetch more frequently but still caches for hours. This caching behavior means that deploying a corrected OG image won't immediately fix broken previews on all platforms — cache invalidation must be done manually per platform. The Open Graph Protocol is a subset of RDFa (Resource Description Framework in Attributes), which is why the meta tags use the property attribute rather than name. The og: prefix maps to the http://ogp.me/ns# namespace. Beyond the image, a complete OG implementation includes og:title, og:description, og:url, og:type, and og:site_name. Twitter introduced its own parallel system called Twitter Cards using <meta name='twitter:card'> and <meta name='twitter:image'>, though Twitter now falls back to og:image if Twitter Card tags are absent, making og:image the single most critical social sharing meta tag. Image format and dimension requirements vary by platform but practical standards have converged around a JPEG or PNG at 1200×630 pixels (a 1.91:1 aspect ratio), which Facebook defined as the canonical recommendation in their developer documentation. Images smaller than 600×315 render as tiny inline thumbnails rather than large hero previews on Facebook. LinkedIn enforces a minimum of 1200×627. File size should stay under 8MB, though keeping it under 300KB is a better practice since crawlers have fetch timeouts and users on slow connections benefit from faster previews.

Best Practices for OG Image (Open Graph Image)

Always use absolute URLs in the og:image content attribute — relative paths like /images/preview.jpg will break on every platform because crawlers resolve against their own origin, not yours. Serve OG images from a CDN or your primary domain with proper cache-control headers, but ensure the URL is stable; changing the filename breaks all previously cached previews across platforms. Design OG images at exactly 1200×630px and keep critical content (text, logos) within a 1100×550px safe zone to account for platform-specific cropping, particularly on mobile Twitter cards which crop to a 2:1 ratio. Include explicit og:image:width and og:image:height tags (e.g., <meta property='og:image:width' content='1200'>) so crawlers don't need to fetch the image to determine dimensions, which reduces the chance of a platform falling back to a generic preview. For sites with many unique pages — blog posts, product pages, landing pages — generate dynamic OG images programmatically using tools like Vercel's @vercel/og, Cloudinary's image transformation URLs, or a headless browser screenshot service, rather than maintaining static images manually. Always validate your implementation using the Facebook Sharing Debugger, LinkedIn Post Inspector, and Twitter Card Validator before launch.

OG Image (Open Graph Image) & Canvas Builder

Canvas Builder's production-ready HTML output includes a clean, minimal <head> structure built on Bootstrap 5 standards, which provides the ideal foundation for implementing Open Graph meta tags — there's no theme framework injecting competing og: tags or a CMS abstracting the markup away from you. Because Canvas Builder generates static HTML that developers fully own, adding og:image and the full Open Graph tag suite is as simple as editing the <head> directly, with no plugin installs, admin panel configurations, or platform-specific workarounds required. For developers building landing pages or marketing sites with Canvas Builder, the semantic, well-structured HTML output also ensures that social crawlers can parse the page reliably, since extraneous JavaScript-rendered content or malformed markup — common in bloated website builders — are known causes of OG tag parsing failures.

Try Canvas Builder →

Frequently Asked Questions

Does every page on a site need its own unique OG image, or can you use one sitewide image?

A single sitewide OG image is technically valid and better than having no OG image at all, but it's a missed opportunity for pages where specific content matters — blog posts, product pages, and event pages all benefit from unique previews that visually communicate the specific content. The practical rule is: use a unique OG image for any page you expect to be shared individually on social media, and fall back to a sitewide default for utility pages like login, terms, or contact. Programmatic OG image generation using tools like Vercel's @vercel/og or Cloudinary makes per-page images scalable without manual design work.

Why does my updated OG image still show the old version when I share the link?

Social platforms aggressively cache OG metadata and images, sometimes for days or weeks, which means updating the image file at the same URL won't immediately propagate to new shares. The fastest fix is to use the platform's official cache-busting tools: Facebook's Sharing Debugger (developers.facebook.com/tools/debug), LinkedIn's Post Inspector (linkedin.com/post-inspector), and Twitter's Card Validator. If you need immediate control over cache invalidation in the future, version your OG image URLs by including a hash or timestamp in the filename (e.g., preview-v2.jpg) so each update is treated as a new resource by all crawlers.

How does Canvas Builder support OG image implementation in its generated HTML output?

Canvas Builder generates clean, semantic HTML5 output with a properly structured <head> section, which means the Open Graph meta tags slot in exactly where they belong without fighting against CMS-injected markup or conflicting template tags. Because Canvas Builder outputs production-ready Bootstrap 5 HTML that you fully own and can edit directly, you can add og:image, og:title, og:description, and Twitter Card meta tags to the <head> with no plugin dependencies, theme limitations, or platform restrictions. This direct HTML ownership also makes it straightforward to implement dynamic OG image URLs server-side by modifying the template before deployment.