OG Image Best Practices for Maximum Click-Through
Most OG images are either blank, wrong-sized, or visually generic. The ones that actually drive clicks follow a set of straightforward design and technical principles. Here's what separates good social cards from great ones.
Always include the page title in the image
The title rendered inside the image gives readers context before they read the meta title below the card. Large, legible text at a minimum 48px equivalent makes the card readable even in small feed thumbnails.
Use your brand color and logo consistently
A consistent visual style across all your OG images builds brand recognition. Readers who've seen your cards before will recognize your content in their feeds — even before reading the title.
Keep the design simple — one focal point
Social cards are small. Cluttered designs lose their impact at thumbnail size. The most effective OG images have one clear visual element: the title, a striking background, or a central product screenshot.
Set og:image:alt for accessibility
The `og:image:alt` meta tag provides alt text for screen readers when the card is rendered. Write a brief description of the image (e.g., "Blog post card: How to Add OG Images to Next.js") rather than leaving it empty.
Generate your OG image in seconds
Paste a title, pick a brand color, and get production-ready social cards for every platform — with framework-specific meta tag snippets included.
Generate a best-practice OG image