← Back to blog
5 min read

OG Image Best Practices for Web Agencies

OG images are one of those details that seem simple until you start getting them wrong. Wrong dimensions, unreadable text, no logo, or a generic background — any of these reduces the value of the image to near zero. This post is a reference you can return to whenever you are speccing or reviewing OG images for a client project.

Correct Dimensions Per Platform

Platforms have slightly different recommended sizes. The differences are small but they matter at the edges — a pixel row of important content can get clipped if you use the wrong spec.

  • Open Graph / Facebook — 1200 x 630 px (1.91:1 ratio). This is the baseline spec. If you only produce one image size, use this.
  • Twitter / X — 1200 x 628 px for summary_large_image cards. The two-pixel height difference is minor; a 1200x630 image will render correctly in practice, but 628 is the official spec.
  • LinkedIn — 1200 x 627 px for link posts. LinkedIn is strict about aspect ratio; images outside the expected range may be cropped or displayed at reduced size.
  • iMessage / iOS — reads the og:image tag; 1200x630 renders correctly.
  • Slack / Discord — both read og:image; standard dimensions work fine.

For most projects, generating at 1200x630 and accepting the minor pixel difference on other platforms is the right tradeoff. If LinkedIn is a primary channel for the client, generate a separate 1200x627 image.

Design Rules That Hold Across Platforms

The image renders at roughly 500x261 pixels in a typical desktop feed, and smaller on mobile. Design for that rendering size, not the full 1200x630 canvas.

  • Minimum font size 48px at full resolution. Below that, text becomes unreadable at thumbnail size. Headlines should be 64–96px. If the headline does not fit at that size, shorten it.
  • High contrast between text and background. A 4.5:1 contrast ratio is the WCAG AA standard. At thumbnail size, even higher contrast is better. Avoid colored text on colored backgrounds.
  • Logo in a consistent position. Top-left or bottom-left are conventional. The logo anchors the image to the brand and builds recognition across repeated shares.
  • One clear message. The image communicates a single idea — the page title, or a short descriptor of the content. It is not a billboard. Save details for the page itself.
  • Avoid transparent backgrounds. Some platforms render transparency as white, others as black. Specify a solid background color.
  • Use brand colors, not generic ones. A blue gradient on a white background looks like a stock template. The client's actual brand palette is what makes the image recognizable in a crowded feed.

Common Mistakes

These show up repeatedly in site audits:

  • One image for the entire domain. A homepage hero image on every blog post looks lazy and confuses users clicking through from social. Every content page should have a unique image.
  • Wrong aspect ratio. A portrait photo or a square logo used as-is will be cropped or letterboxed. Always use an image that fills the 1.91:1 frame.
  • Text that is too small or too dense. Bullet lists, full paragraphs, or fine-print disclaimers in the OG image are unreadable and look unprofessional.
  • No logo. An image without a logo provides no brand recognition. Someone scrolling past on LinkedIn has no idea whose content it is.
  • Cached previews after update. Platforms cache OG images aggressively. After updating an image, run the URL through the platform's debugger tool to force a cache refresh. This is a common source of "it still shows the old image" support requests.
  • Missing og:title and og:description. The image is only one part of the link preview. If these tags are missing, the platform fills in the gap with whatever it scrapes from the page — often badly.

How AI Generation Handles This Automatically

Manually designing an OG image that follows all of the above rules requires a designer, a design tool, and time. At scale — across dozens or hundreds of pages — it is not practical without tooling.

MakeOG handles this automatically. When you submit a URL, the AI reads the page and extracts the brand color palette from CSS variables and theme metadata, detects the logo from the page header, reads the page title and description, and generates a properly-sized WebP image at 1200x630 that follows the design rules above. You do not write a template, choose colors, or place elements. The output is specific to that URL, not a generic fill-in-the-blank.

Testing Your OG Images

Before delivery, validate through the official platform tools:

  • Twitter Card Validator — cards.twitter.com/validator — shows exactly how the card will render in a tweet, including cropping behavior.
  • LinkedIn Post Inspector — linkedin.com/post-inspector — validates the image and forces a cache refresh on LinkedIn's CDN.
  • OpenGraph.xyz — previews all major platforms simultaneously. Useful for a quick cross-platform check before handing off.
  • Facebook Sharing Debugger — developers.facebook.com/tools/debug — required if the client publishes to Facebook Pages.

Run each key page through at least one of these tools. Pay particular attention to any page that will be shared as part of a campaign — launch announcements, blog posts promoted on social, product update pages.

Client Handoff Checklist

Include this in every site delivery:

  • og:image, og:title, and og:description are set on every indexable page
  • twitter:card is set to summary_large_image on pages where a large image card is appropriate
  • Images are 1200x630 (or platform-specific variants where required)
  • All images validated through OpenGraph.xyz or equivalent
  • LinkedIn Post Inspector run on high-priority pages to pre-warm the cache
  • Image URLs are absolute (not relative paths)
  • Images are served over HTTPS — some platforms reject HTTP image URLs
  • File sizes are under 8MB (LinkedIn limit) — WebP at quality 85 is typically well under 200KB

OG images are a deliverable, not an afterthought. Adding this checklist to your standard handoff process is the simplest way to ensure they get done consistently. MakeOG can generate images for every page in your client's sitemap in minutes — start with the free tier at makeog.com, or move to the Pro plan at $19/month for API access and bulk generation.