Open Graph is code that tells social media what to show when someone shares your link

When you paste a link into Facebook, Twitter, LinkedIn, or Slack, those platforms don't just grab whatever text appears first on the page. They look for Open Graph tags — invisible instructions hidden in a website's code that say "here's the image to display," "here's the headline," and "here's the description." Without these tags, social platforms make their own guesses, which often means a broken image, a confusing headline, or no preview at all.

Open Graph is a standard created by Meta (Facebook's parent company) in 2010 that lets website owners control exactly what appears when their content is shared. It's not something you see on the page itself — it lives in the HTML <head> section, the part of a website's code that browsers don't display to visitors. When a social platform's crawler visits your page, it reads these tags and uses them to build the preview card.

Key Takeaways

  • Open Graph tags are HTML code that tell social media platforms what image, title, and description to show when a link is shared.
  • The four most important tags are og:title, og:description, og:image, and og:url — without these, platforms display whatever they find first.
  • A missing or broken og:image tag often results in no image appearing in the preview, which reduces clicks and shares.
  • You don't need to do anything as a reader — website owners use Open Graph to control how their content looks when you share it.

The four tags that matter most

Every Open Graph implementation starts with four core tags. The og:title tag sets the headline that appears in the preview card — often different from the page's actual title tag. The og:description tag provides the text snippet below the headline, usually 2 to 4 sentences. The og:image tag points to the URL of the image that displays in the preview, and it must be a complete web address, not a file path. The og:url tag specifies the canonical URL of the page, which prevents duplicate content issues if the same article lives at multiple addresses.

A website owner might write these tags like this in their page's code:

<meta property="og:title" content="How to Fix a Leaky Faucet"> <meta property="og:description" content="Step-by-step instructions for replacing a faucet cartridge without calling a plumber."> <meta property="og:image" content="https://example.com/images/faucet-repair.jpg"> <meta property="og:url" content="https://example.com/repair/faucet-leak">

When someone shares that link on Facebook, Facebook's crawler reads these tags and builds a preview card with that exact title, description, and image. If these tags are missing, Facebook falls back to guessing — it might grab the first image on the page (which could be a logo), use the page's technical title, or show no preview at all.

Why the og:image tag fails most often

The og:image tag is the most common point of failure because it requires a complete, working URL. If a website owner writes og:image="/images/photo.jpg" instead of og:image="https://example.com/images/photo.jpg", social platforms can't find the image and show nothing. The image file also has to exist and be accessible from the internet — if it's behind a login or on a private server, the crawler can't reach it.

Image dimensions matter too. Most social platforms recommend images that are at least 1200 pixels wide and 630 pixels tall, in a 1.91:1 aspect ratio. An image that's too small or the wrong shape may display poorly or get cropped in unexpected ways. Website owners often test their Open Graph tags using Facebook's Sharing Debugger tool, which shows exactly what preview will appear when the link is shared.

Other Open Graph tags for specific content types

Beyond the four core tags, Open Graph includes optional tags for different kinds of content. For articles, there are og:type (set to "article"), article:published_time, article:author, and article:section. For videos, there's og:video and og:video:type. For music, there's og:audio. These tags help social platforms understand what kind of content they're dealing with and format the preview accordingly.

The og:type tag is particularly useful because it tells the platform whether the page is an article, a product, a video, a book, or something else. This affects how the preview card is styled and what additional information the platform might request. A news site might set og:type to "article" and include publication date and author, while an e-commerce site might set it to "product" and include price information.

How social platforms use Open Graph data

When you paste a link into Facebook, Twitter, LinkedIn, or Slack, their servers immediately fetch the page and read its Open Graph tags. This happens in the background — you don't see it happening. The platform then caches that data, meaning it stores the preview information so it doesn't have to fetch the page again every time someone shares the same link. If the website owner updates the Open Graph tags, the cached preview doesn't change immediately; it updates after a delay that varies by platform, usually between a few hours and a few days.

Different platforms prioritize different tags. Twitter has its own set of tags called Twitter Card tags that override Open Graph tags for Twitter specifically. LinkedIn respects Open Graph but also looks for LinkedIn-specific tags. Slack reads Open Graph tags to build its link previews. If a website owner wants precise control over how their content appears on every platform, they need to include tags for each one.

What happens when Open Graph tags are missing

When a page has no Open Graph tags, social platforms fall back to their own extraction logic. Facebook might grab the first image on the page, which could be a navigation menu icon or a banner ad. It might use the page's technical title (the content of the <title> tag), which is often different from the headline readers see. The description might be the first paragraph of text, which could be a navigation menu or a disclaimer. The result is usually a preview that doesn't represent the content well and discourages people from clicking.

This is why news sites, blogs, and e-commerce platforms invest time in setting up Open Graph tags correctly. A well-crafted preview card with a compelling image, clear headline, and accurate description gets more clicks when shared. A broken or missing preview gets fewer shares and lower engagement.

Frequently Asked Questions

Do I need to do anything as a reader to see Open Graph work?

No. Open Graph is entirely behind the scenes. You see the results when you share a link and a preview card appears, but you don't interact with the tags themselves. Website owners set them up; you benefit from better-looking link previews.

Can I change how a link looks when I share it?

Not directly. The preview is controlled by the website owner's Open Graph tags. Some platforms like Facebook let you edit the preview text before you post, but the image and initial data come from the tags. If the preview looks wrong, the website owner needs to fix their tags.

Why does the same link look different on Facebook versus Twitter?

Twitter uses its own card system and may prioritize different tags or display information differently than Facebook. Website owners can include both Open Graph tags and Twitter Card tags to control how their content appears on each platform. Some platforms also cache previews differently, so timing can affect what you see.

What if a website updates its Open Graph tags but the old preview still shows?

Social platforms cache preview data to reduce server load. After you update tags, the cached preview usually refreshes within hours to a few days depending on the platform. Facebook's Sharing Debugger tool lets you manually refresh the cache immediately if you need to test changes.