Open GraphSEO: highInside <head>

og:image

The image displayed in social share cards — the most visually impactful Open Graph tag for driving clicks from social shares.

og:image is the single most important Open Graph tag for social engagement. A compelling, well-sized image in a share card dramatically increases click-through rates compared to a link with no image or a poorly-sized image. Facebook, LinkedIn, Twitter/X, and Slack all use og:image for link preview cards.

Recommended dimensions: 1200×630px at 2:1 aspect ratio for optimal display across all platforms. Minimum size: 600×315px. The image must be publicly accessible (no auth, no HTTPS errors) and should be under 8MB. Use a CDN-hosted image URL for fast loading by scrapers.

For dynamic OG images (different image per page), modern frameworks support automatic generation: Next.js has built-in opengraph-image.tsx files that generate images at build time using React components, allowing you to programmatically create branded OG images with page-specific titles and data.

HTML Example

<meta property="og:image" content="https://example.com/images/core-web-vitals-guide-og.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Core Web Vitals guide showing LCP, CLS, and INP metrics">

Attributes

og:imageAbsolute URL to the image. 1200×630px recommended.
og:image:widthWidth in pixels (1200 recommended).
og:image:heightHeight in pixels (630 recommended).
og:image:altAlt text for accessibility and in case image fails to load.
Check this tag on your site
Audit your og:image implementation on any URL
Social Share Preview →

Related Tags

og:title
The title displayed when your page is shared on Facebook, LinkedI…
og:description
The description shown in social share cards when your page is sha…
og:url
The canonical URL of the page for social sharing — used to aggreg…
twitter:image
The image displayed in X (Twitter) Card previews — falls back to …
← All Meta Tags