When someone shares a URL on Facebook, LinkedIn, or Twitter, the platform automatically looks for the og:image meta tag to know which image to display in the preview. Without og:image or with the wrong specifications, social platforms randomly pick an image — often with poor results. A properly optimized preview image increases CTR by 5–7× compared to no image.
Content with images is shared 650% more than text-only content. Facebook posts with properly optimized images receive 2.3× more clicks than posts without images.
What Is Open Graph Image and Why Does It Matter for SEO?
Open Graph protocol was developed by Facebook in 2010 and is now universally adopted by all major social platforms. The og:image tag in a page's <head> specifies the image displayed when the URL is shared. For SEO, OG images affect rankings indirectly through: increased social traffic, improved brand awareness, and higher share rates — all positive authority signals for Google.
Standard Dimensions for Each Platform in 2026
- ▸Facebook / Zalo: 1200×630px (1.91:1 ratio) — official recommended size
- ▸Twitter/X Cards: 1200×628px (summary_large_image) or 800×418px (summary)
- ▸LinkedIn: 1200×627px — LinkedIn favors landscape images at 1.91:1
- ▸WhatsApp: 400×400px minimum, displays as square thumbnail
- ▸Universal safe size: 1200×630px, file <5MB, JPG or PNG
Always maintain a "safe zone" — keep important content like text and logos within the center 1000×540px of a 1200×630px image. Social platforms may crop 10–15% of image edges depending on context.
Designing Effective Open Graph Images
- ▸Article title in short form (under 60 chars) overlaid on image — large enough to read on mobile
- ▸Brand logo in corner — recognition when image is reposted without original context
- ▸High contrast between background and text — test on dark AND light mode
- ▸Avoid text-heavy layouts — OG images need to communicate at a glance, not like an infographic
- ▸Consistent brand colors — users recognize the source before reading the headline
OG Image Implementation in HTML and CMS
Plain HTML
Add to <head>: <meta property="og:image" content="ABSOLUTE_IMAGE_URL">. URL must be absolute (https://...), not a relative path. Add: og:image:width (1200), og:image:height (630), og:image:type (image/jpeg).
WordPress (Yoast SEO / RankMath)
Both Yoast SEO and RankMath include a "Social Image" field per post and page. This is where you upload a dedicated OG image. If not set, the plugin falls back to the featured image — so featured images also need to follow the 1.91:1 ratio.
Next.js
Use generateMetadata() with openGraph: { images: [{ url, width: 1200, height: 630, alt }] }. Next.js 13+ supports dynamic OG image generation with the ImageResponse API — generate OG images from templates without Photoshop.
Testing and Debugging OG Images
- ▸Facebook Sharing Debugger (developers.facebook.com/tools/debug) — cache, preview and validate OG tags
- ▸Twitter Card Validator (cards-dev.twitter.com/validator) — preview Twitter cards
- ▸LinkedIn Post Inspector (linkedin.com/post-inspector) — validate LinkedIn shares
- ▸OpenGraph.xyz — check OG image across all platforms simultaneously
When updating an OG image, Facebook caches the old image for 24–48 hours. Use Facebook Sharing Debugger and click "Scrape Again" to force an immediate cache refresh.