You shipped the site. The design looks great in the browser. The client signed off. Then someone shares the homepage on LinkedIn and the preview is a blank gray box with a truncated URL underneath it. The client emails you the next morning.
This is one of the most common handoff failures in web development, and it is almost entirely invisible during QA because you are looking at the site in a browser — not at how it renders inside a social media card.
What OG Images Actually Are
Open Graph images are defined by a single <meta> tag in the <head> of an HTML page:
<meta property="og:image" content="https://example.com/preview.png" />
When a platform like LinkedIn, Twitter/X, Slack, iMessage, or Facebook fetches a URL to generate a link preview, it reads that tag. If the tag is missing, the platform either shows nothing, shows a random image it scraped from the page, or renders a blank card. None of those outcomes are good.
- LinkedIn — shows the image prominently above the link title in feed posts
- Twitter / X — "summary_large_image" card fills the full width of a tweet
- Slack — unfurls the link with image, title, and description inline
- iMessage — renders a Rich Link preview with the OG image
What a Good OG Image Should Include
The image is 1200 pixels wide and 630 pixels tall for most platforms. Within that space, a useful OG image includes:
- The page title or a clear headline — readable at small sizes
- The brand logo — builds recognition in the feed
- Brand colors — distinguishes the card from generic content
The practical solution is automation. Tools like MakeOG let you paste a URL and get a branded, correctly-sized OG image in seconds.