The mechanics of social previews
When a URL is shared on platforms like X, Facebook, LinkedIn, or messaging apps like Slack and WhatsApp, platform scrapers fetch the target HTML and parse the <head> block for meta properties. The Open Graph (OG) protocol converts static URLs into interactive visual preview cards.
If your cards are displaying as blank squares, cropping awkwardly, or falling back to low-resolution site logos, it is almost always caused by specific server-side or architectural misconfigurations.
The Open Graph Safe Zone
To display full-width cards on standard high-density screens, the recommended dimensions are 1200 × 630 pixels with an aspect ratio of 1.91:1. However, messaging platforms and social feeds crop and trim card borders depending on screen size and orientation.
To prevent edge clipping across all major apps, you must implement a centralized safe zone. Keep headlines, branding assets, and focal subjects within the inner 1080 × 600 pixel container. Anything outside this boundary is at risk of being cropped on mobile viewports.
Missing dimension tags delay rendering
If og:image:width and og:image:height tags are missing from your HTML, a platform's parser cannot pre-allocate card dimensions on the first share. The scraper must download and analyze the asset asynchronously.
This asynchronous process often causes the card to display without an image on its initial share. Adding explicit dimension tags (e.g., <meta property="og:image:width" content="1200" />) forces immediate synchronous card rendering.
Client-Side JavaScript injection
Modern single-page applications (SPAs) built with React, Vue, or Next.js often inject metadata dynamically using client-side routers or custom hooks.
Because social scrapers (like facebookexternalhit or LinkedInBot) do not execute JavaScript, they only parse raw, server-returned HTML. If your OG tags are missing from the raw payload, the scraper will fail to fetch the image. You must implement Server-Side Rendering (SSR) or Static Site Generation (SSG) to pre-render metadata in the raw HTML payload.
WhatsApp compression limits
High-resolution Open Graph images often appear blurry or pixelated after sharing. WhatsApp compresses image previews aggressively.
If the source file exceeds 300 KB, WhatsApp's compression introduces visible artifacting around text. Keep your PNG or WebP file weight under 300 KB without dropping the resolution below the 1200 × 630 standard.
Relative asset paths
Web scrapers parse HTML and look for fully qualified absolute URLs. A relative path such as /images/og.png will silently fail. Scrapers require a structured protocol, subdomain, and domain sequence (e.g., https://example.com/images/og.png).
Generate perfect Open Graph tags instantly
If you need a perfectly sized Open Graph image and the exact HTML snippet to make it work, try our OG / Social Smart Resizer. It crops your image to the exact 1200 × 630 dimensions with a draggable focal point so your subject stays centered, and generates a copy-paste ready <meta property="og:image"> block (with og:image:width and og:image:height) for your <head>.