What Are Open Graph Tags?

When a link is shared on Facebook, LinkedIn, WhatsApp, Slack or Discord, the card made up of an image, a title and a description does not appear by chance. These platforms build that preview by reading the Open Graph (og:*) meta tags in the <head> section of the shared page. If those tags are missing, the platform generally tries to use the page's own title and some arbitrary image; the result is usually a messy card that fails to reflect the brand.

The Open Graph protocol was originally developed by Facebook, but today almost every major platform — LinkedIn, WhatsApp, Slack, Discord — reads these tags when building a link preview. X (formerly Twitter) uses its own separate twitter:* tag set; for full compatibility, both sets should be added.

Why Does the Preview Card Matter?

When a link is shared on social media or in a messaging app, the first thing the user sees is usually not a plain-text URL but this preview card. If the card appears incomplete, broken or with an irrelevant image, the user may scroll past without clicking; Open Graph tags are therefore a technical detail that shapes how a share is perceived just as much as the content itself does.

The Core Open Graph Tags

  • og:title: The title to be shown on the card.
  • og:description: The short description that appears beneath the title.
  • og:image: The address of the image on the preview card.
  • og:url: The full canonical address of the page.
  • og:type: The content type — website, article or product, for example.
  • og:site_name: The site name shown above or below the card.

What Do the og:type Values Mean?

og:type tells the platform what kind of content is being shared. website is the default value used for general pages (a home page, corporate pages). article is for blog posts and news content, while product is used to mark e-commerce product pages. Choosing an og:type that does not match the nature of your page can cause some platforms to process the card in unexpected ways, so using the correct value consistently for each page type matters.

Every Page Should Have Its Own Tags

Using the same og:title and og:image for every page of a static site is a common shortcut, but it lowers the quality of your shares. When each blog post, product page or campaign page is shared with a title, description and image specific to its own content, it is both more meaningful for the user and clearer to the platform about what the page is about. If your site's CMS or template structure allows it, changing at least the title and image on a per-page basis should be a priority.

twitter:* Tags and Card Types

X prioritises its own twitter:* set rather than the og:* tags: twitter:card, twitter:title, twitter:description, twitter:image. There are two basic values for twitter:card: summary_large_image, which shows a wide, large image, and summary, which shows a small square image. The summary_large_image card type falls back to og:image automatically if twitter:image is missing — but for reliability it is always sounder to specify both explicitly.

Which Platform Reads Which Tag Set?

In practice the vast majority of platforms converge on Open Graph, while X takes its own path:

PlatformTag set it reads
Facebookog:*
LinkedInog:*
WhatsAppog:*
Slackog:*
Discordog:*
X (Twitter)twitter:* (falls back to og:image when missing)

The Right Image Size for og:image

The recommended minimum size for og:image is 1200×630 pixels. That size keeps the image sharp on retina/high-DPI screens and matches the roughly 1.91:1 aspect ratio Facebook prefers. Smaller images get scaled up and look blurry, or are dropped to a small square preview on some platforms, which weakens the visual impact of the card.

The image address has to be a publicly accessible, directly reachable absolute URL; an image behind a password, requiring a session, or sitting on a path blocked by robots.txt cannot be downloaded by the preview bots, and the card appears without an image.

Why Don't Changes Show Up Immediately? Caching and Debugger Tools

It is normal for changes not to be reflected in shares immediately after you update your Open Graph tags. Facebook, LinkedIn and the other platforms keep a page's Open Graph data in cache for a while; they carry on showing the old card without re-crawling the page.

Each platform's cache works independently of the others; a cache cleared with the Sharing Debugger on Facebook does not automatically update the stale preview on WhatsApp or Slack. Checking the card separately on every platform you plan to share on, ahead of an important campaign or blog post, is therefore a sensible habit for avoiding surprises.

Common Open Graph Mistakes

  • Writing the og:image address as a relative path; this field has to be an absolute URL (starting with https://).
  • Adding only the og:* tags and never adding the twitter:* set.
  • Publishing the image at a size below 1200×630 and then not understanding why it looks blurry or small.
  • Forgetting to clear the cache with the Sharing Debugger after updating the tags, then panicking because the old card is still showing.
  • Writing og:title and the page's actual <title> tag as disconnected, inconsistent text.
  • Accidentally blocking the folder that hosts the image in robots.txt, so the bots can never download it.

Build and Preview Your Open Graph Tags

Working with a live preview instead of writing these tags by hand lets you see how the card will look before you publish. KEYDAL's Open Graph generator lets you enter the title, description, image, URL, site name and card type, shows an approximate social media preview from what you enter, and produces the <head> tags ready to copy.

Once the tags are published, testing the page once with the Facebook Sharing Debugger or the X Card Validator before you share it is the fastest way to be sure the card looks the way you expect in the wild.