What are OG Images? — MyOG.social

Q: What is an Open Graph image?

An Open Graph image (OG image) is the preview image that appears when you share a link on social media platforms like Facebook, Twitter/X, LinkedIn, and messaging apps like Slack and iMessage. It's defined using the og:image meta tag in your page's HTML and helps make your shared links more visually appealing and clickable.

Q: How do I create an Open Graph image?

You can create OG images manually using design tools like Figma or Canva, then add the image URL to your page with the meta property og:image tag. Alternatively, services like MyOG.social generate images automatically on-the-fly — just point your og:image tag to their URL and the image is created dynamically based on your page content. The recommended size is 1200 x 630 pixels.

Q: What makes a good Open Graph image?

A good OG image has large, legible text (40-60px minimum), high contrast between text and background, consistent branding with your logo and colors, and content that accurately represents the page. Keep important elements away from edges and limit text to 5-10 words for readability on mobile devices.

Q: What does OG mean in SEO?

OG stands for Open Graph, a protocol created by Facebook that turns web pages into rich objects in social graphs. While OG tags primarily control social media previews, they indirectly benefit SEO by increasing click-through rates, driving more traffic, and improving brand visibility across platforms like Google Discover.

What is an OG Image?

Paste a link into Slack or tweet a URL and a card pops up — image, title, description. That image is the OG image (short for Open Graph image). It's set with an og:image meta tag in your HTML, part of the Open Graph protocol that Facebook introduced in 2010.

It's the first impression your link makes. Before anyone reads your title or description, they see the image. On a busy Twitter/X or LinkedIn feed, that visual determines whether someone stops scrolling and clicks.

Open Graph image example showing a social media preview card on X (Twitter) — An OG image appearing in a post on X

Where OG Images Appear

More places than you'd expect. Facebook, Twitter/X, LinkedIn, Pinterest — those are obvious. But they also show up when you drop a link in Slack, Discord, iMessage, WhatsApp, or Telegram. Notion, Trello, and Asana render them too. SEO tools pull them into their dashboards.

Technical Specifications

1200 x 630 pixels, JPG or PNG, under 1MB. That's the 1.91:1 aspect ratio that works on every major platform. Avoid SVG, GIF, and WebP — a surprising number of platforms still can't handle them.

See our OG Image Size Guide for platform-specific dimensions and requirements.

How to Create an Open Graph Image

However you create the image, the page setup is the same — an og:image meta tag in your <head>.

Adding the Meta Tag

<meta
  property="og:image"
  content="https://example.com/og-image.png"
/>
<meta
  property="og:image:width"
  content="1200"
/>
<meta
  property="og:image:height"
  content="630"
/>
<meta
  property="og:image:alt"
  content="Description of the image"
/>

The URL must be absolute (with https://) and publicly accessible. Platforms fetch it from their servers, so relative paths like /image.png won't work. The og:image:alt tag is for accessibility — screen readers use it.

Manual Design

Figma, Canva, Photoshop — pick your tool. We also have a free OG Image Generator if you want something quick. The downside of manual design: you need a new image for every page. Fine for a 5-page marketing site. Falls apart with blogs, product catalogs, or anything dynamic.

Automated Generation

Point your og:image tag to MyOG.social's URL and we generate the image on the fly from your page's title and content. Every page gets a proper preview, no design tool involved. Check how your pages look with our free OG Preview Tool, or grab our Chrome extension to inspect OG tags on any page as you browse.

Hosted vs. self-hosted? We wrote a comparison of MyOG.social vs @vercel/og that walks through the trade-offs.

We also have platform-specific guides: OG Images in WordPress and Pre-rendering in Vue for SPA sites.

What Makes a Good Open Graph Image

These images show up as tiny cards in a Twitter feed, thumbnails in Slack, small previews on mobile. The image needs to work at every size.

Readability

Go bigger than you think on text. 40-60px minimum for headlines — the image gets shrunk down on mobile. High contrast matters. If you have to squint to read it on a light background, it won't work. Keep it to 5-10 words max.

Visual Hierarchy

One clear focal point. Don't cram your logo, headline, subtitle, URL, and a decorative pattern all into one image. Leave whitespace. Keep important content away from the edges — some platforms crop a few pixels off each side.

Branding

Include your logo, but it doesn't need to dominate. Consistency matters more — same colors, fonts, and layout across all your OG images. When someone sees three of your links in a feed, they should recognize them as yours immediately.

Content Relevance

Match the page content. Clickbait OG images might get the initial click, but they tank your bounce rate and erode trust. Show what someone will actually find when they land on the page.

What Does OG Mean in SEO?

OG stands for Open Graph — the protocol that turns a plain URL into a rich preview card. Built for social sharing, but it has a real impact on SEO too, even if indirect.

Social Signals and SEO

Google doesn't use social shares as a ranking signal directly. But posts with images get 2-3x more engagement than text-only links. More engagement, more clicks, more traffic, more chances someone links to your content from their blog. Second-order effect, but real.

Search Result Previews

Google Discover — the feed on Android and the Google app — often pulls in your OG image alongside the page title. If some articles look better than others in Discover, the OG image is usually the difference.

Rich Snippets and Social Proof

Drop a link on Reddit or Hacker News and the preview card is what people judge before they click. A polished OG image signals credibility. A missing one — or worse, a random image pulled from your page — does the opposite.

The Complete Meta Tag Picture

OG tags aren't the only meta tags that matter. Pair them with:

og:title and og:description control the social preview text
twitter:card and twitter:image let you customize the Twitter/X preview separately
The standard meta description handles search engine results

Get these right and your content looks polished everywhere — Google results, Twitter feeds, Slack messages.

Why OG Images Matter

Increased Engagement

Links with images get 2-3x more clicks, likes, and shares than plain text links. A visual preview stands out in a wall of text. The numbers vary by platform, but the pattern is consistent.

E-commerce Click-Through Rates

For e-commerce, OG images earn their keep. When a customer shares a product link in a group chat or on social media, the preview card is a free ad. A sharp product image drives more click-throughs than the generic fallback most platforms show.

Typical product page share

Amazon product page with missing OG image showing poor social media preview

With optimized OG image

Amazon product page with optimized Open Graph image for better social sharing

Brand Consistency

Without an OG image, platforms grab whatever image they find on your page. Sometimes your logo, sometimes a random stock photo from the sidebar, sometimes nothing. With an OG image, you control exactly what people see.

Inconsistent branding

Consistent, branded preview

NYTimes page with consistent branded OG image

Professional Appearance

A missing OG image means the platform shows a grey placeholder, and your link looks like spam. A broken image URL is even worse — some platforms just show nothing at all.

No OG image set

Professional preview

Control the Narrative

Highlight a key stat, a product screenshot, or just your brand name on a clean background. Your call, not the platform's algorithm.

No control over preview

No OG image set

You decide what people see

Common Pitfalls

The same mistakes come up over and over. No OG image at all — platform shows nothing or grabs a random image from your page (often your favicon stretched to 1200px). Wrong dimensions — aspect ratio is off, platforms crop awkwardly, you lose important text. Relative URLs — /image.png doesn't work because platforms fetch from their servers, not yours. Oversized files — image takes more than a couple seconds to load, the platform gives up.

CORS errors and caching headaches are covered in our OG Image Testing Guide walks through how to diagnose and fix them.

How MyOG.social Helps

Automatic OG Image Generation

Add one meta tag to your site and we generate OG images for every page on the fly, from your page's title and content. No Figma, no Canva, no exporting PNGs.

Flexible Integration

You don't have to go all-in. Custom OG image for your homepage? Keep it. MyOG.social only generates where you point it — mix hand-crafted images with auto-generated ones however you want.

Free Tools

Free tools, usable whether or not you're a customer:

OG Image Generator — pick a template, customize it, download the image
OG Preview Tool — see exactly how your link looks on different platforms
Bulk OG Checker — scan your whole sitemap for missing or broken OG tags

Catches missing images, CORS problems, and broken URLs before your audience does.

Frequently Asked Questions

What is an Open Graph image?

The preview image that shows up when you share a URL on social media or in a messaging app. Set with an og:image meta tag in your HTML. Without one, platforms show nothing or grab a random image from your page.

How do I create an Open Graph image?

Design one manually in Figma or Canva and add it with a <meta property="og:image" content="your-image-url"> tag. Or use a service like MyOG.social that generates images automatically from your page content. Target 1200 x 630 pixels.

What makes a good Open Graph image?

Big text (40px+), strong contrast, your branding. Most OG images fail on at least one of these. The image shows up small on mobile, so anything subtle gets lost. Stick to 5-10 words, keep important elements away from edges — some platforms crop slightly.

What does OG mean in SEO?

OG stands for Open Graph — Facebook's protocol for turning web pages into rich preview cards. Not a direct ranking factor, but it drives more clicks from social platforms and Google Discover, which means more traffic and more potential backlinks.

Ready to get started?

Add automatic OG images to your website in under 2 minutes.

Already have an account?

What is an Open Graph Image?