You're sharing great content. But the clicks aren't coming. The problem might not be your headline or your offer—it might be your Open Graph image.
Open Graph (OG) images are the visual preview cards that appear when you share a link on social media platforms like X, Facebook, LinkedIn, and Pinterest. These images serve as your content's first impression in a crowded social feed. When they're done right, they stop the scroll and drive clicks. When they're done wrong, your best content gets ignored, no matter how valuable it actually is.
Visual previews heavily influence whether someone pauses on a shared link. A well-designed OG image makes the content clearer, more credible, and easier to recognize, while a weak preview turns potential readers into people who scroll past without a second look.
Here are the five critical mistakes that cause social media previews to get ignored, and more importantly, how to fix each one so your content actually gets the attention it deserves.
Mistake 1: Using Low-Resolution Images
Social platforms compress images to load pages faster, but they still expect high-quality inputs. An image that's blurry, pixelated, or looks "off" signals low effort to scrollers—and signals that your content might not be worth their time either.
The recommended OG image size is 1200x630 pixels. This dimension is specifically called out in Open Graph protocol documentation and is supported across all major platforms. Images smaller than this get stretched, resulting in grainy or pixelated previews. Images larger than this get unnecessarily compressed.
Beyond dimensions, the file format matters too. PNG files generally maintain better quality than JPEGs, especially for images with text or graphics with sharp edges. However, PNG files are also larger, which can affect load times—a factor that platforms may penalize.
The fix: Always use images at least 1200x630 pixels in dimension. ogdynamic generates images at exactly these recommended dimensions, optimized for every platform. If you're creating your own images, use design tools that output at minimum 1200x630 and preferably at 2x resolution (2400x1260) to account for compression.
Additionally, test your images by sharing them on different platforms and checking how they appear. What looks sharp on your desktop might appear blurry after platform compression. Tools like ogdynamic that preview across multiple platforms can save you from this embarrassment.
Mistake 2: Text That's Too Small to Read
An image might look great on your screen at full resolution, but on a mobile social feed—where the majority of browsing happens—that text becomes invisible. If your headline can't be read at a glance in a tiny preview card, you lose the most powerful hook you have.
Mobile screens typically display social previews at around 120-150 pixels wide. Text that looks perfectly readable at full desktop size becomes 6pt type in a mobile preview. At that scale, even bold headlines become illegible shapes rather than words.
This mistake is especially common with:
- Detailed product descriptions in OG images
- Multiple lines of text trying to convey too much
- Fine print, disclaimers, or secondary information
- Taglines or brand statements with small typography
The fix: Keep headlines bold and sized above 30px equivalent at the native preview resolution. ogdynamic templates are designed with mobile-first text sizing so your message comes through clearly even in small previews. When designing custom OG images, imagine how your headline will look when scaled down to 150 pixels wide. If it requires squinting, it's too small.
A good rule of thumb: your main headline should be readable and compelling even when the image appears as a small thumbnail. If you can clearly read "Summer Sale" but not "Get 50% Off All Items Through Sunday While Supplies Last," you know what to prioritize.
Mistake 3: Inconsistent Branding
Mixing different fonts, colors, and styles across your Open Graph images makes your brand harder to recognize. Consistency builds familiarity and trust; randomness builds confusion and signals amateurism.
When scrollers see your content repeatedly with consistent visual branding—same color palette, same font family, same layout approach—they start to recognize your content instantly. This recognition is a massive advantage in competitive social feeds. A scroller who might have scrolled past your competitor's post notices YOUR familiar visual and pauses.
Inconsistent branding happens when:
- Different team members create OG images without brand guidelines
- Templates are switched frequently without reason
- Colors and fonts evolve over time but old images aren't updated
- Multiple platforms use different creative approaches
- A/B testing leads to stylistic drift
The fix: Pick a template or style that matches your brand identity and use it consistently across all content. ogdynamic lets you save your brand colors, logo, and preferred fonts so every image stays on-brand automatically. Create a style guide for your OG images that specifies:
- Primary and secondary color palette
- Approved font families (typically 1-2 for headlines, 1 for body text)
- Standard layout structure or positioning
- Logo placement and sizing guidelines
- Minimum padding and margins
Consistency doesn't mean every image looks identical—it means your brand elements are always present in recognizable forms. Think of McDonald's golden arches: they're always there, always the same color, always in the same relative position, even when the background or context changes.
Mistake 4: Ignoring Platform Differences
A Facebook preview card displays differently than an X card. LinkedIn renders Open Graph images differently than Instagram Stories. Reddit's preview behavior differs again. Using the same image across platforms without accounting for aspect ratio means important details get cropped out, potentially removing your headline entirely.
Each platform has its own:
- Preferred aspect ratios: Facebook prefers 1.91:1 (roughly 1200x630), X prefers 2:1 (1200x600), LinkedIn varies, Instagram Stories is 9:16 (vertical)
- Display locations: Some platforms show OG images larger than others
- Compression algorithms: Different platforms compress differently, affecting color and sharpness
- Text rendering: How fonts appear varies across platforms due to different rendering engines
The fix: Generate images in multiple formats or use templates designed with platform-specific cropping in mind. ogdynamic supports both OG (Open Graph for Facebook and LinkedIn) and X card sizes side-by-side, and handles vertical formats for Instagram Stories.
When you can't generate multiple versions, design for the most restrictive format first. A 1200x630 image that's safe to crop (with your headline in the center portion) will survive better than one with critical elements at the edges. The middle 80% of an OG image is typically what survives cropping on alternative formats.
Always preview your OG images on the actual platforms before publishing. What looks perfect in your design tool might have critical elements eaten by platform-specific cropping.
Mistake 5: No Contrast Between Text and Background
Light text on a light background, or dark text on a dark background, makes your message hard to read—especially on mobile screens with varying display quality, brightness settings, and ambient lighting conditions.
This is one of the most common OG image mistakes, and it's often caused by designing on high-quality displays that compensate for poor contrast choices. What looks perfectly readable on your calibrated monitor might be nearly invisible on an iPhone in bright sunlight or an Android phone with slightly washed-out colors.
Contrast failures also happen when:
- Brand guidelines specify colors that don't work for text
- Templates use decorative backgrounds without checking readability
- Designer intuition overrides accessibility principles
- Images are created in RGB but displayed in sRGB (which can shift colors)
The fix: Use high-contrast color pairings. Our templates are designed with contrast ratios that pass accessibility standards and look great on any screen. Aim for a contrast ratio of at least 4.5:1 between text and background colors for body text, and 3:1 for larger text like headlines.
Tools like WebAIM's Contrast Checker can help you verify your color combinations before committing to them. The WCAG (Web Content Accessibility Guidelines) standards exist for good reason—they ensure content is readable by the widest possible audience, including people with less-than-perfect vision or sub-optimal viewing conditions.
For dark backgrounds, use bright, high-saturation text colors. For light backgrounds, use dark, bold colors. Avoid complementary color combinations (like red text on green background) even if they seem high-contrast, as these can create visual vibration that fatigues readers.
Bonus Mistake 6: Forgetting the Purpose
This one goes beyond image design: your OG image needs a clear purpose. Are you trying to get someone to read an article? Buy a product? Visit your portfolio? The design should communicate that purpose instantly.
The best OG images answer the question "what's in it for me?" before the scroller even finishes reading the headline. They convey value through:
- Clear, benefit-oriented headlines
- Relevant imagery that suggests the content's value
- Consistent style that signals trust
- Visual hierarchy that guides the eye to the most important element
The fix: Before designing or selecting an OG image template, define the single action you want someone to take after seeing it. Then design backwards from that goal. If you want article reads, make the headline compelling and benefit-focused. If you want product purchases, show the product with the price visible. If you want portfolio visits, show your best work with a clear visual of the portfolio itself.
Ready to Fix Your Social Previews?
Small changes to your OG images can have an outsized impact on your click-through rates. The difference between a well-designed OG image and a poorly-designed one isn't subtle—it can mean the difference between a social campaign that drives meaningful traffic and one that vanishes into the scroll.
Create your first image with ogdynamic and see the difference professional design makes. Our templates are designed with all five of these mistakes in mind and built for products, blog posts, and landing pages. Start with our gallery of conversion-ready designs and customize them with your own branding, content, and colors.
Your social traffic is waiting. Give it the visual hooks it needs to stop scrolling and start clicking.
If you want a practical walkthrough next, read How to Create Stunning Open Graph Images Without a Designer or review the field mapping examples in our documentation.