What Is OG Image (Open Graph Image)?
An OG Image (Open Graph Image) is a specific meta tag defined by the Open Graph Protocol (ogp.me) that designates which image platforms like Facebook, LinkedIn, Twitter/X, Slack, and iMessage should display when a URL is shared as a link preview card. Specified via the `<meta property="og:image" content="...">` tag in a page's `<head>`, it gives developers explicit control over the visual thumbnail rather than leaving platforms to guess. Without it, crawlers fall back to heuristically selecting any image from the page DOM, often producing incorrect or visually poor results.
What Is OG Image (Open Graph Image)?
An OG Image (Open Graph Image) is a specific meta tag defined by the Open Graph Protocol (ogp.me) that designates which image platforms like Facebook, LinkedIn, Twitter/X, Slack, and iMessage should display when a URL is shared as a link preview card. Specified via the `<meta property="og:image" content="...">` tag in a page's `<head>`, it gives developers explicit control over the visual thumbnail rather than leaving platforms to guess. Without it, crawlers fall back to heuristically selecting any image from the page DOM, often producing incorrect or visually poor results.
How OG Image (Open Graph Image) Works
The Open Graph Protocol was originally developed by Facebook in 2010 and formalizes a set of `<meta>` tags that transform an ordinary webpage into a structured 'rich object' within a social graph. When a user pastes a URL into a social platform or messaging app, the platform's link-preview crawler (e.g., Facebookbot, LinkedInBot, Twitterbot) issues an HTTP GET request to the URL and parses the HTML `<head>` section, specifically looking for Open Graph tags. The crawler reads `og:image`, `og:title`, `og:description`, and `og:url` to compose the preview card — no JavaScript execution occurs in most crawlers, so the tags must be present in the initial server-rendered HTML payload. The `og:image` value must be an absolute URL pointing to the image file — relative paths are not reliably supported across all crawlers. The image is fetched by the crawler's servers, not the user's browser, so it must be publicly accessible (no authentication walls, no localhost URLs). Platforms cache the fetched image aggressively; Facebook, for example, stores cached previews for up to 7 days by default, which is why developers use the Facebook Sharing Debugger to force a re-scrape after updating an OG image. There are companion tags that refine how the image is handled: `og:image:width` and `og:image:height` (in pixels) allow crawlers to render the card without waiting for the image dimensions to load, preventing layout shifts in the preview UI. `og:image:type` (e.g., `image/jpeg`, `image/png`, `image/webp`) signals the MIME type explicitly, though not all platforms honor `image/webp` for OG images. Twitter/X introduced its own parallel system via `twitter:image`, `twitter:card`, and `twitter:title` meta tags; if Twitter-specific tags are absent, the platform falls back to reading the standard `og:*` equivalents. For pages with multiple intended share contexts (e.g., a blog post with a product listing), you can specify multiple `og:image` tags — the first valid image in document order is treated as the primary one by most crawlers. This ordering behavior is defined in the Open Graph spec's array handling rules, where the first occurrence takes priority unless a crawler implements preference scoring.
Best Practices for OG Image (Open Graph Image)
Use a minimum image size of 1200×630 pixels at a 1.91:1 aspect ratio, which is the canonical recommendation from both Facebook and LinkedIn to ensure the image renders at full width in feed previews without cropping or letterboxing. Always include `og:image:width` and `og:image:height` tags alongside the image URL to eliminate render-blocking dimension-detection requests in crawlers. Serve OG images from a CDN with a stable, versioned URL structure (e.g., `/og/homepage-v2.jpg`) so that when you update the image, you change the URL and force crawlers to re-fetch rather than serve a stale cache — do not simply overwrite the same filename in place. Keep text overlaid on OG images within the central 80% of the canvas to avoid platform-specific cropping on smaller display contexts like mobile link previews. Use JPEG for photographic OG images (targeting under 8MB, though under 1MB is practical for fast crawler fetches) and PNG for images with transparency or sharp text, as WebP still has inconsistent support across older crawler implementations. Finally, test every OG image against multiple validators simultaneously: Facebook Sharing Debugger, LinkedIn Post Inspector, and Twitter Card Validator all use different crawlers that may cache or interpret images differently.
OG Image (Open Graph Image) & Canvas Builder
Canvas Builder exports production-ready Bootstrap 5 HTML with a properly structured `<head>` section that includes Open Graph meta tag scaffolding out of the box, meaning developers don't need to retrofit social preview support after the fact — the correct tag slots (`og:image`, `og:title`, `og:description`, `og:url`, and `twitter:card`) are already present in the generated markup. Because Canvas Builder produces static, server-renderable HTML rather than client-side JavaScript-driven output, all meta tags are present in the initial HTTP response body, which is exactly what social media crawlers require since most do not execute JavaScript during link preview scraping. The clean, semantic HTML output also means there are no conflicting `<meta>` tag duplications or malformed `<head>` structures that could cause crawlers to misread or ignore the specified OG image.
Try Canvas Builder →