What is an OG image? The complete guide for non-developers

When you paste a link into Twitter, LinkedIn, Slack, or iMessage, something happens automatically. A little card appears. It shows a title, a short description, and an image.

That image is called an OG image.

Most guides about OG images assume you know what a meta tag is. This one doesn't.

Where the name comes from

"OG" stands for Open Graph. It's a protocol Facebook created in 2010 to give websites a way to control how they appear when shared on social platforms.

Facebook needed a standard way for websites to say: "when someone shares this link, show them this image, this title, and this description." So they built Open Graph.

Other platforms — Twitter, LinkedIn, Slack, iMessage — eventually adopted the same system. Now OG tags are the universal standard for link previews across the web.

Why your OG image matters more than you think

Most people ignore their OG image. It's invisible on the page itself and usually handled (or not handled) by whoever built the site.

That's a mistake. Your OG image is shown every single time someone shares your content. It's the first thing someone sees before they decide whether to click.

Research on social media consistently shows that posts with images get significantly more engagement than those without. But it's not just about having any image — a well-designed, on-brand OG image signals professionalism and builds trust before a visitor even arrives on your site.

A broken or generic OG image does the opposite. It suggests the site might be unfinished, outdated, or not worth clicking.

How it works technically (explained simply)

Your website has an invisible section in its code called the "head". Visitors never see it, but search engines and social platforms read it constantly.

Inside the head, you can add short instructions called "tags". Open Graph tags look like this:

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="A short description" />
<meta property="og:image" content="https://yoursite.com/your-image.png" />

When someone shares your link, the platform reads these tags and uses them to build the preview card. If the tags are missing, it guesses — usually badly.

You don't need to write this code yourself. Most website builders (Webflow, Framer, Squarespace, WordPress) have a field where you paste in the image URL. That's all.

How different platforms handle OG images

They all use the same Open Graph standard, but each platform has its own quirks.

Twitter / X Twitter reads OG tags but also has its own twitter:card and twitter:image tags. To get a large image card instead of a tiny thumbnail, you also need:

<meta name="twitter:card" content="summary_large_image" />

Without this, Twitter shows a small square thumbnail in the corner — nowhere near as impactful.

LinkedIn LinkedIn reads og:image and generally displays it well. It's more forgiving about image dimensions than Twitter. It does cache aggressively though — so if you change your image, you need to use their Post Inspector to force an update.

Slack Slack renders OG images inline in messages, making them hard to miss. This makes your OG image especially valuable in team contexts — shared links in Slack channels get much more visibility than most people realise.

iMessage Apple reads standard OG tags and shows a preview when you paste a URL. The image is shown as a thumbnail, so simpler designs with bold text read better than complex ones.

WhatsApp Similar to iMessage — reads OG tags and shows a compact preview. If you're sharing links in group chats, a clean, recognisable OG image makes a real difference.

What makes a good OG image

OG images are displayed at 1200×630 pixels by most platforms. That's a landscape format — wider than it is tall.

At smaller sizes (in Slack, iMessage previews), the image gets compressed significantly. Text that looks fine at full size can become unreadable at thumbnail scale. Keep any text large, and stick to one or two lines maximum.

What works:

• Your logo, clearly visible
• One short, bold headline
• A clean background (not a photograph with text on top)
• Brand colours that are recognisable

What doesn't:

• Walls of small text
• Stock photography with no branding
• The same OG image on every page of your site
• A screenshot of your homepage

The difference between a static and dynamic OG image

A static OG image is a file you upload once. It stays the same forever.

This causes problems. Companies change their tagline. Products get redesigned. New features ship. But nobody remembers to update the OG image — so it keeps showing outdated copy or visuals.

A dynamic OG image is generated from a template. You update the template, and every share immediately reflects the change — even for URLs that were already shared.

Opengraphly generates dynamic OG images. You design the template once in a visual editor, and we give you a URL that you paste into your og:image tag. When your messaging changes, you update the template in Opengraphly. The URL stays the same. Every future share shows the updated image.