The Essential Guide to OG Images (and How They Appear on Social and Google)

When someone shares your web page on social media, a preview card usually appears showing an image, title, and short description. That image, known as an OG (Open Graph) image, helps define how your content looks before anyone even clicks. This guide explains what OG images are, how to set them up properly, and why they play an important role not only on social platforms but also in how your pages can appear in Google search results.

Glenn

October 20, 2025

2025-10-20

What Is an OG Image?

An OG (Open Graph) image is a special type of metadata added to your web pages to control how they appear when shared on social platforms or messaging apps.

Originally developed by Facebook, the Open Graph protocol is now widely supported by LinkedIn, X (Twitter), Pinterest, Slack, and others. Some search engines, including Google, may also use this image as a reference when displaying image thumbnails in search results.

Without an OG image, platforms try to guess which image from your page to display, often grabbing your logo, a small icon, or nothing at all. By specifying your own OG image, you take control of that first visual impression.

Why OG Images Matter

Your OG image acts like your site’s digital handshake, the first thing people see before deciding whether to click.

Here’s why getting it right matters:

Visual impact: A strong, relevant image grabs attention and drives engagement.
Brand consistency: Every share, across every platform, looks unified and professional.
Improved click-through rates: Attractive link previews perform significantly better on social media.
Professional credibility: Having defined OG images signals attention to detail and enhances your brand presence.
Indirect SEO benefit: OG tags themselves don’t boost rankings, but they help generate more clicks and shares, which support broader visibility.
Possible influence in Google search results: Google sometimes displays image thumbnails beside listings, and your OG image can inform which image is chosen, though this is not guaranteed.

Technical Specifications

To ensure your OG image displays properly across major platforms and search results, follow these guidelines:

Recommended size: 1200 × 630 pixels (1.91 : 1 aspect ratio).
Common alternative: 1200 × 628 pixels for a slightly more precise fit.
Minimum size: 600 × 315 pixels, smaller images risk pixelation.
File format: Use JPEG for photos, PNG for graphics or transparency.
File size: Keep it under 5 MB, ideally closer to 1 MB for faster load times.

<meta property="og:image" content="https://yourdomain.com/images/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Descriptive alt text for accessibility">

Crawlability: Make sure your /images/ directory isn’t blocked by your robots.txt file.
Schema alignment: Use the same image in your page’s schema markup (WebPage or Article type) under the image property. This gives Google another reference when deciding which image to display in search.

Note: While OG images are primarily used by social networks, Google may also use them when deciding which image to show in search results. There’s no guarantee, but keeping your OG image high-quality, relevant, and consistent with your schema increases the likelihood of a good result.

Designing an Effective OG Image

Whether you’re using Webflow, Framer, WordPress, or another builder, the same design principles apply:

Keep it clean and central. Social and search previews often crop edges, so keep the main subject within a safe central area.
Maintain strong branding. Subtle use of your logo or brand colours helps reinforce identity without clutter.
Check text legibility. Any text should remain clear at small thumbnail sizes.
Use strong contrast. Choose tones that hold up against light and dark backgrounds.
Avoid over complication. Simple, bold visuals consistently outperform busy or over-designed images.

For homepages, use a single image that encapsulates your brand’s essence.

For blogs or product pages, use tailored images relevant to each topic or product.

If your CMS allows it, set a default OG image that appears whenever a specific one isn’t defined, ensuring all pages still look polished when shared.

How to Add OG Images on Popular Platforms

Webflow

Open Page Settings → Open Graph Settings.
Paste the full image URL (it must be a hosted image). You can reference any image from your Webflow Assets Manager by copying its file URL.
Define the title and description fields if they differ from your SEO meta tags.
Webflow applies these settings page by page, there is currently no global OG image option.

Framer

Open Page → Settings → Page Images and upload your OG image under Social Preview (1200 × 630 px).
Framer also allows a site-level Social Preview image under Settings → Site Images → Social Preview, which acts as the default OG image if a specific page doesn’t define one.

WordPress

Use a plugin such as Yoast SEO or RankMath to upload OG images on individual pages or posts.
You can override the default featured image with a dedicated Open Graph image in each post’s social settings.

Squarespace

Open Page Settings → Social Image and upload your chosen image.
This image becomes your OG image and controls how the page appears when shared on social media.
If no image is defined, Squarespace uses your site logo or the first large image on the page as fallback.
There’s no global OG image setting, so it must be configured per page.

Wix

Open Settings → SEO (Google) → Social Share Settings, or go to Page Settings → SEO Basics and scroll to the Social Share section.
Upload or replace your OG image and preview how it will appear on social media before publishing.
Wix also lets you set unique titles and descriptions for social platforms.
For full details, see Wix’s official guide.

After uploading, test how the image appears with these tools:

These preview tools help confirm your OG tags are being read correctly and allow you to refresh caches if old images persist.

Twitter Card Fallback

Although Twitter (now X) uses its own meta tags, such as twitter:image, it will fall back to your og:image if one isn’t defined. For full control, include both:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/images/og-image.jpg">

This ensures your image displays correctly even if the platform doesn’t read Open Graph tags by default.

OG Images and Google Search Results

While Open Graph tags are designed primarily for social sharing, Google sometimes references them when generating rich snippets or image thumbnails in search results, particularly on mobile.

However, there’s no guarantee that your OG image will appear in Google’s SERPs. The image shown in search results is chosen algorithmically and may depend on factors such as:

The content of the page and relevance of images within it
Whether structured data (for example, schema markup) aligns with the OG image
Image dimensions, aspect ratio, and crawlability
How often your page has been indexed and cached

To improve the likelihood of your OG image being chosen:

Use clear, relevant imagery that accurately represents the page.
Match your OG image with your featured image and schema markup.
Avoid decorative images that don’t reflect the content.
Ensure your images are crawlable (not blocked by robots.txt).
Keep filenames descriptive and relevant.

So while there’s no absolute control, following OG best practices ensures that, when Google does decide to show a thumbnail, it’s much more likely to be the right one.

Common OG Image Mistakes

Avoid these pitfalls to keep your previews looking sharp:

No image defined: Social platforms and search engines pick a random image or none.
Incorrect aspect ratio: Images appear cropped or off-centre.
Oversized file: Some networks ignore heavy images.
Old cache: New images don’t appear until re-indexed or re-scraped.
Text too close to edges: Important details get cut off in previews.
Missing alt text: Reduces accessibility and clarity.
Relying solely on OG tags for Google: They help but aren’t the only factor influencing SERP thumbnails.

Testing and Maintenance

Once your OG images are live, check them regularly, particularly after design updates, URL changes, or platform migrations.

Quick steps for periodic checks:

Run your URL through the Facebook Sharing Debugger, LinkedIn Post Inspector, or X (Twitter) Card Validator
Perform a Google search for your page to see if a thumbnail appears.
Review your image in both light and dark-mode previews where possible.
If the wrong image displays, re-scrape via debugging tools or request re-indexing in Google Search Console.

In Summary

An OG image isn’t just a bit of code, it’s your digital first impression.

It defines how your content looks when shared, influences how users interact with your links, and may even appear in search listings. While there’s no guarantee Google will always display it, the OG image is still a vital part of a professional, SEO-ready web presence.

By using the correct dimensions (1200 × 630 px), strong, relevant imagery, and properly implemented tags, your website will always present itself in the best possible light, whether viewed on social media, messaging apps, or right there in Google’s search results.