What Is Open Graph? The OG Protocol and OG Images Explained

Open Graph is a set of HTML meta tags that tells social networks and messaging apps how to display a link to your page. When someone shares your URL on Facebook, LinkedIn, X (Twitter), Slack, Discord or WhatsApp, the app reads your Open Graph tags to build the preview card: the title, the description, the image and the site name.

The Open Graph protocol was created by Facebook and introduced in 2010. The specification lives at ogp.me. Facebook built it so any web page could become a “rich object” in its social graph, but the format was simple enough that almost every other platform adopted it. Today, if you want a link to look good when it is shared, you need Open Graph tags.

What Open Graph looks like in HTML

Open Graph tags are <meta> tags in the <head> of your page. Each tag has a property attribute that starts with og: and a content attribute with the value:

<head>
    <meta property="og:title" content="SEO Stuff - Keyword Research Tool" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://www.seo-stuff.com" />
    <meta property="og:image" content="https://www.seo-stuff.com/og-image.jpg" />
    <meta
        property="og:description"
        content="Excellent keyword research. Without monthly subscription."
    />
</head>

That is the real markup used by SEO Stuff. When the link is shared, platforms turn it into a preview like this:

Without these tags, platforms have to guess. They may pick a random image from the page (a logo, an icon, an ad), use the raw <title>, or show only a bare URL. Open Graph removes the guessing.

What is an Open Graph image (OG image)?

An Open Graph image, usually called an OG image, is the picture that appears in a link preview. You set it with the og:image tag:

<meta property="og:image" content="https://example.com/images/og/pricing.png" />

The OG image is the largest and most visible part of a link preview, so it has the most influence on whether people click. It does not have to be a photo from the page. Most sites use a purpose-made graphic: the page title in large type, a logo, a product screenshot, or a branded background. Some sites use one image for the whole site; others generate a unique image for every page or blog post.

A good OG image:

• is 1200 × 630 pixels (a 1.91:1 aspect ratio), which works well on nearly every platform;
• keeps important text and logos away from the edges, because some apps crop the image;
• uses large, readable text, since previews are often shown small on phones;
• is a PNG, JPG or WebP file, ideally under 1 MB so it loads fast everywhere;
• is served from an absolute URL (starting with https://) that is publicly reachable, not behind a login or blocked by robots.txt.

You can browse 780+ real OG images from companies and products to see what works.

How platforms use Open Graph

When a URL is pasted into a post or message, the platform’s crawler downloads the page, reads the og: tags in the <head> and stores the result. That is why the preview appears a moment after you paste the link, and why it may not update immediately after you change your tags (platforms cache the result).

Each platform renders the data a little differently:

• Facebook shows the image above the title and domain. It is the reference implementation of Open Graph and supports the full protocol.
• LinkedIn reads og:title, og:image and og:description and shows a large image card in the feed.
• X (Twitter) uses its own twitter: tags first, but falls back to og:title, og:description and og:image when they are missing. You still need twitter:card set to summary_large_image to get the large image layout.
• Slack “unfurls” links using Open Graph (and twitter: tags), showing the site name, title, description and image.
• Discord builds embeds from Open Graph tags. A twitter:card of summary_large_image makes it show the image large rather than as a thumbnail.
• WhatsApp, Telegram and iMessage read og:title and og:image to show a preview inside the chat. WhatsApp is known to skip images that are too heavy, so a small, optimized file is the safest choice.

The four required Open Graph properties

The Open Graph protocol defines four properties that every page should have:

In practice, you should also add og:description (one or two sentences shown under the title) and og:site_name (your brand name). They are technically optional, but almost every platform displays them.

For the full list, including image dimensions, alt text and article tags, see the Open Graph meta tags reference.

Open Graph types (og:type)

The og:type tag tells platforms what kind of thing the page represents. If you leave it out, the specification says the page should be treated as website. The protocol defines these global types:

Some types have extra properties. For example, article supports article:published_time, article:modified_time, article:author, article:section and article:tag. For most sites, website for the home page and article for posts is all you need.

What are Open Graph actions?

You may still see references to “Open Graph actions” or “Open Graph stories.” These were a separate Facebook feature, part of its developer platform rather than the meta tags. Apps could publish activities such as “Jane read an article” or “Tom listened to a song” to a user’s timeline, using built-in or custom verbs.

Facebook deprecated custom Open Graph actions around 2018–2019 as part of tightening its app platform, and they are no longer something you need to think about. Today, “Open Graph” in practice means the meta tags that control link previews.

Recommended OG image size by platform

A single 1200 × 630 px image (1.91:1) is the safest choice. It covers Facebook, LinkedIn, Slack and Discord well, and X crops it only slightly to fit its 2:1 large card.

Format: use PNG for graphics with text and flat colors, JPG or WebP for photos. Avoid SVG: most platforms do not render SVG OG images.

File size: smaller is better. Facebook accepts up to 8 MB and X up to 5 MB, but an image of a few hundred kilobytes loads faster and is more reliably picked up by messaging apps.

Open Graph and SEO

Open Graph tags are not a Google ranking factor. Google does not rank a page higher because it has og:title or og:image, and it uses your <title> tag and meta description (not Open Graph) for search results.

Open Graph still matters for SEO indirectly:

• More clicks from social shares. A link with a clear title and a strong image gets noticeably more attention in feeds and chats than a bare URL.
• More sharing. People are more willing to share links that look professional, which brings more visitors, and more chances for others to link to your page.
• Brand consistency. You control exactly how your page appears everywhere it is shared, instead of letting each platform guess.
• Better previews in other tools. Chat apps, aggregators, link-in-bio tools and some AI assistants and feed readers use Open Graph data when they show your links.

Think of Open Graph as the “search snippet” for social media: it does not change your rank, but it decides whether people click.

A minimal Open Graph example

Here is a complete, minimal setup you can copy and adapt. It includes the four required tags, the two most useful optional tags, image dimensions and alt text, and an X card:

<head>
    <title>How to Price a SaaS Product - Acme Blog</title>
    <meta
        name="description"
        content="A practical framework for choosing your first SaaS price."
    />

    <!-- Open Graph -->
    <meta property="og:title" content="How to Price a SaaS Product" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="https://acme.com/blog/saas-pricing" />
    <meta property="og:image" content="https://acme.com/og/saas-pricing.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="Acme Blog: How to Price a SaaS Product" />
    <meta
        property="og:description"
        content="A practical framework for choosing your first SaaS price."
    />
    <meta property="og:site_name" content="Acme" />

    <!-- X (Twitter) -->
    <meta name="twitter:card" content="summary_large_image" />
</head>

Because X falls back to Open Graph tags, twitter:card is the only X-specific tag you strictly need here.

How to check your Open Graph tags

After adding tags, test them before you share the link:

1. Open our Open Graph debugger and paste your URL. It fetches the page, lists every Open Graph and Twitter tag it finds, flags missing or broken ones, and previews the card.
2. Check that og:image loads when opened directly in a browser and that it is an absolute https:// URL.
3. If a platform still shows an old preview, ask it to re-fetch the page. Facebook has the Sharing Debugger with a “Scrape Again” button, and LinkedIn has the Post Inspector.

The meta tags reference covers the most common mistakes, such as relative image URLs and cached previews, in more detail.

Get inspired by real Open Graph images

The fastest way to design a good OG image is to see what others do. Browse 780+ real Open Graph examples from SaaS products, developer tools, blogs and startups. Each example shows the image alongside the exact tags the site uses, so you can see the design and the markup together.

Ready to write the tags? Continue with the complete Open Graph meta tags reference, with copy-paste HTML and snippets for Next.js, Astro and PHP.