Design & Marketing Tools

OG Image Preview

Preview how your URL will appear when shared on Facebook, Twitter, LinkedIn, and WhatsApp.

Run OG Image Preview online

In-browserDocument processing runs on your device. External resources may still load.

Enable JavaScript to use the interactive tool. Read the instructions, limitations and FAQs below before starting.

Open Graph image preview tools simulate how your URL appears when shared on social media platforms — Facebook, Twitter/X, LinkedIn, Instagram, and WhatsApp. Each platform has specific requirements for image dimensions, aspect ratios, and character limits for title and description. Without testing, you cannot predict how a link will appear when shared — a poorly configured OG image can result in cropped images, missing previews, or text overflow that makes shared links look unprofessional.

Platform-specific OG preview requirements: Facebook — 1200×630px image (1.91:1 ratio), title up to 100 chars (truncated at ~40 in compact view), description up to 300 chars. Twitter/X — two card types: 'summary' (1:1 square image, small preview) and 'summary_large_image' (1200×628px, large hero preview); title up to 70 chars. LinkedIn — 1200×627px, article title up to 100 chars. WhatsApp — uses og:image (any size but centers/crops to 1:1), shows title and domain. Each platform caches OG tags — new tags require cache clearing via platform-specific developer tools before they reflect.

Common OG preview failures seen in Indian web projects: using relative image URLs (breaks on all platforms), using small images below 200×200px (platforms ignore them), missing og:type tag causing classification as generic website, outdated cached previews (platform cached old image before update), og:image not publicly accessible (behind login or firewall), and missing twitter:card tag (causing Twitter to fall back to basic link display without image). A proper OG preview testing workflow should be part of every web launch checklist.

How to use this utility

  1. Use the controls below—paste text, pick files, or adjust options as described on the tool.
  2. Click the main action button. Processing runs in your browser on this device.
  3. Download or copy the output. Check the processing note for any external services used by this operation.

Common use cases

  • Testing how a startup's homepage appears when shared on LinkedIn before a Product Hunt launch
  • Verifying WhatsApp preview of a Diwali sale campaign landing page shows the correct offer image and text
  • Debugging why a news article shares without image on Facebook despite having og:image tag set
  • Comparing Twitter/X summary vs summary_large_image card types to choose better presentation
  • Validating that a new blog post's Open Graph data is correctly implemented across all major platforms

Tips for best results

  • 1Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug) to scrape and refresh Facebook's cache after changing OG tags — Facebook caches aggressively
  • 2Test OG images on both light and dark mobile themes — many images look fine on desktop but read poorly on mobile dark mode WhatsApp previews
  • 3Include your brand name or logo in the og:image itself — when the URL is shared, the image is the first thing seen; brand recognition in the image increases click-through
  • 4For e-commerce product pages, generate dynamic OG images with the product photo, price, and brand — static OG images the same across all pages are a missed opportunity
  • 5LinkedIn's Post Inspector (linkedin.com/post-inspector) specifically refreshes LinkedIn's cache — Facebook and LinkedIn cache separately and both must be cleared after OG changes

Frequently asked questions

Is Konnect2Tools free?
Yes. These in-browser tools are completely free to use with no account required for core functionality.
Do my files leave my device?
Browser document operations run locally, except where the operation uses an external service, such as AI summarisation. Read the processing note before using sensitive inputs.
Is the OG Image Preview tool safe to use?
Local operations process document content on your device. External-service operations may send inputs as described in the processing note. Keep originals and inspect the output.
Why does my OG image not show when sharing a link on WhatsApp?
Common reasons OG image fails on WhatsApp: (1) Image URL is relative (e.g., /images/banner.jpg) instead of absolute (https://www.site.com/images/banner.jpg); (2) Image is behind authentication or a firewall — WhatsApp crawler cannot access it; (3) Image size is below 200×200px — WhatsApp minimum; (4) Image server blocks non-browser user agents (WhatsApp crawler uses specific UA); (5) og:image tag is missing or has syntax error; (6) HTTPS mixed content — og:image URL is HTTP while site is HTTPS; (7) CloudFlare or CDN caching with aggressive cache-control headers preventing WhatsApp crawler access. Debug by checking the image URL directly in incognito mode — if it loads, WhatsApp should also be able to access it.
How do I refresh the OG preview cache on social platforms?
Each platform has specific cache clearing tools: Facebook/Meta: Facebook Sharing Debugger (developers.facebook.com/tools/debug) — enter URL, click Fetch New Scrape. LinkedIn: Post Inspector (linkedin.com/post-inspector) — enter URL, click Inspect. Twitter/X: Card Validator (cards-dev.twitter.com/validator) — enter URL, click Preview Card. Pinterest: does not have a manual refresh tool; cache expires automatically in 24-48 hours. WhatsApp: no manual cache clearing; WhatsApp caches for 24 hours; wait or use a new URL with cache-busting query parameter (e.g., ?v=2). Telegram: automatic; paste the link in a new message — Telegram fetches fresh OG data for each new link paste.
What image dimensions should I use for OG images?
Recommended dimensions by platform: Facebook — 1200×630px (1.91:1). Twitter/X summary_large_image — 1200×628px. LinkedIn — 1200×627px. WhatsApp — 1200×630px (same as Facebook). General recommendation: use 1200×630px as the universal size — works acceptably on all platforms. The image should have a content-safe zone of 1080×540px centered in the 1200×630px canvas — text and critical visuals in this zone avoid cropping on platforms that slightly vary their display. File format: JPEG preferred (smaller file size). Maximum file size: keep under 1MB — larger files may cause preview timeout or lower quality re-compression by the platform.
How do I generate dynamic OG images for my website?
Dynamic OG image generation methods for modern web: (1) Vercel/Cloudflare Workers OG image generation — use @vercel/og or similar libraries to generate images on-the-fly based on URL parameters; (2) Puppeteer headless browser screenshot — render an HTML template and screenshot it; (3) Cloudinary text overlays — if hosting images on Cloudinary, use their URL-based transformation API to add dynamic text to base images; (4) Canvas API — server-side canvas rendering (Node.js canvas library). For Indian small businesses: simpler approach — create 5-10 templatized OG images in Canva for different page categories (product, blog, offer) and manually assign them via CMS. Dynamic generation is worth the engineering investment only for sites with 100+ unique page types.

Continue with another utility in design & marketing tools.

Explore all categories