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.
Every major sharing surface reads OG metadata:
- 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
- Facebook — shows the image in the post preview
- Discord — embeds the image when a URL is pasted
Any page that gets shared anywhere benefits from having a well-formed OG image.
What Happens When the Tag Is Missing
Platforms have fallback behavior, and none of it is flattering. LinkedIn will attempt to find an image on the page — usually landing on a navigation icon, a footer logo at the wrong aspect ratio, or nothing at all. Twitter will render a small "summary" card with no image. Slack shows a gray box.
The practical consequence is lower click-through rate. A branded image with a clear title tells the reader exactly what they are clicking into. A blank card tells them nothing and gives them no reason to stop scrolling.
This matters particularly for:
- Blog posts and articles shared by users or the brand account
- Product landing pages linked in sales outreach
- Case studies and portfolio pieces shared on LinkedIn
- Documentation pages linked from Slack and Discord communities
- Event pages and announcement posts
How to Check If a Site Has OG Images
The fastest check is to look at the page source. In Chrome DevTools, open the Elements panel and search for og:image. If you do not find it, the tag is missing.
From the command line, curl works well:
curl -s https://example.com | grep og:image
For a proper validation pass, use the platform-specific tools:
- Twitter Card Validator — cards.twitter.com/validator
- LinkedIn Post Inspector — linkedin.com/post-inspector
- OpenGraph.xyz — previews all major platforms at once
- Facebook Sharing Debugger — developers.facebook.com/tools/debug
Run a client site through OpenGraph.xyz before every handoff. It takes thirty seconds and will catch issues that are painful to explain to a client after launch.
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
- Minimal text — three to five words of supporting context at most
What it should not include: full paragraphs of text, charts that are illegible at thumbnail size, or a generic stock photo that could belong to any company.
The Real Problem: Most Sites Ship Without Them
Most CMS templates and static site starters do not auto-generate OG images. They might include the meta tag in the template, but they leave the content attribute empty or point it at a generic fallback. A client with a 60-page site needs 60 different images — one per page, each reflecting that page's content and branding.
Doing that manually in Figma or Canva is not a realistic workflow for most agency engagements. The design time alone makes it cost-prohibitive unless the client specifically budgets for it.
The practical solution is automation. Tools like MakeOG let you paste a URL and get a branded, correctly-sized OG image in seconds. The AI reads the page, pulls the brand colors and logo, and generates an image that looks like it belongs to the site — without opening a design tool. For agencies delivering sites at volume, that changes the economics of OG image coverage entirely.
Add MakeOG to your launch checklist. It is a small addition that protects the client's brand every time their content gets shared. Try it free at makeog.com — 10 generations per month at no cost, no account required.