Back to blog

What Is an OG Image? Social Media Previews Explained

March 10, 2026 · Instant OG Team

If you have ever pasted a link into Twitter, Facebook, LinkedIn, Slack, or iMessage and seen a rich preview card appear — with a title, description, and image — you have seen an OG image in action. OG stands for Open Graph, a protocol that controls how your links look when shared across the internet. The image in that preview card is your OG image, and it is often the single biggest factor in whether someone clicks your link or keeps scrolling.

The Open Graph protocol

Open Graph was originally created by Facebook in 2010 to give website owners control over how their content appears when shared on the platform. It quickly became the standard that almost every social network, messaging app, and communication tool adopted. When you share a URL, the receiving platform fetches your page, reads its Open Graph meta tags, and uses that data to build a social media preview card.

The most important Open Graph tags are:

  • og:title — the headline shown in the preview card
  • og:description — a short summary of the page content
  • og:image — the URL of the preview image (the OG image)
  • og:url — the canonical URL of the page
  • og:type — the type of content (article, website, product, etc.)

These tags live in the <head> section of your HTML. Without them, platforms have to guess — and they usually guess poorly.

What makes a good social media preview image

Your OG image is the visual first impression of your content. It appears in social media feeds, chat apps, link aggregators, search results, and anywhere else URLs get shared. A good social media preview image has a few key qualities:

  • 1200 × 630 pixels — this is the standard size that works across all platforms
  • Clear, readable text — your title should be legible even at small sizes in a mobile feed
  • Brand consistency — colors, fonts, and logos that match your site so people recognize your links at a glance
  • Relevant imagery — a product photo for an e-commerce page, a hero image for a blog post, or a clean typographic design for a landing page

The worst thing you can do is leave the OG image empty. When there is no image, platforms either show a blank grey box or skip the preview entirely. Your link becomes invisible in a feed full of rich visual cards.

Where social preview images appear

OG images are not just for Facebook and Twitter. They show up everywhere links are shared:

  • Social networks — Twitter/X, Facebook, LinkedIn, Reddit, Pinterest
  • Messaging apps — Slack, Discord, WhatsApp, Telegram, iMessage
  • Productivity tools — Notion, Linear, Jira, Confluence
  • Search engines — Google sometimes uses OG images in search results and Discover feeds
  • Link aggregators — Hacker News, Product Hunt, Pocket, Instapaper

Every one of these surfaces is a place where your content competes for attention. A compelling link preview image gives you an edge over every link that does not have one.

OG image vs. Twitter Card image

You might see references to both og:image and twitter:image. Twitter (now X) has its own set of meta tags called Twitter Cards. In practice, Twitter falls back to Open Graph tags if no Twitter-specific tags are present. Most sites set both to the same image to be safe:

<meta property="og:image" content="https://example.com/og.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/og.png" />

The twitter:card tag with the value summary_large_image tells Twitter to display the large preview card format rather than the small square thumbnail.

How to add OG images to your site

At its simplest, you add a single meta tag to each page:

<head>
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="A short description." />
  <meta property="og:image" content="https://example.com/your-image.png" />
</head>

The challenge is that every page on your site should have its own unique OG image. A blog post should show its title and author. A product page should feature the product photo and price. A landing page should display the headline and value proposition. Creating these images manually for every page quickly becomes impractical.

Automating OG image generation

This is where dynamic OG image generation comes in. Instead of designing each image by hand, you define a visual template and let a service generate a unique image for each page automatically. The template pulls in the page title, description, author name, product image, or any other metadata, and produces a perfectly formatted 1200×630 preview image on demand.

With Instant OG, the process works like this: you pick a template, point it at your site, and the API handles everything. It extracts your page metadata, renders a branded preview image, caches it on a global CDN, and serves it whenever a platform requests it. No design tool needed. No manual uploads. Every page gets a unique, professional social media preview image.

Generate social preview images automatically

Instant OG creates unique, branded OG images for every page on your site. Start free with 1,000 credits — no design skills required.

Get started free →