What OpenGraph is and how it shapes your link previews

The preview problem

Paste a link into Facebook, LinkedIn, WhatsApp or Slack and the app fetches the page and builds a preview card with an image, a title and a line of text. If the page gives it nothing to work with, the app guesses. It takes the first image it finds and the first text it can scrape, and the guess is often bad.

Picture a hotel sharing its seasonal offer. The card shows the cookie banner as the picture and the navigation menu as the description. Nobody clicks that.

What OpenGraph is

OpenGraph is a protocol Facebook published in 2010. It adds <meta> tags to the page's <head> that state what the preview should show. LinkedIn, WhatsApp, Slack, Discord and most other apps that draw link previews read the same tags, so one set covers nearly all of them.

A typical set looks like this:

<meta property="og:title" content="Summer rooms at the Lakeside Hotel" />
<meta property="og:description" content="Three nights for the price of two, June to August." />
<meta property="og:image" content="https://yoursite.com/images/summer-rooms.jpg" />
<meta property="og:url" content="https://yoursite.com/offers/summer-rooms" />
<meta property="og:type" content="article" />

• og:title is the headline on the card. It can differ from the page's <title>, which is usually written for search results.
• og:description is the line or two under it.
• og:image is the picture, and the picture decides whether anyone reads the rest. Make it 1200×630 pixels, a size most platforms handle well.
• og:url is the page's canonical address. Facebook counts shares of that address together, even when people share it with different tracking parameters.
• og:type says what kind of thing the page is, usually website or article.

When an app finds these tags, it uses them and stops guessing.

Why it is worth the effort

On a social feed the preview is the whole pitch. People decide from the image and the headline, in about the time it takes to scroll past. A card you chose will do better than one assembled from scraps of your navigation.

Different pages also need different cards. Your home page, an event and a blog post each have their own point to make, and a single site-wide image under every link makes them all look the same. Site-wide defaults are the floor. Per-page values are what make a share look like it belongs to that page.

Previews are cached

This catches people out. Facebook and LinkedIn keep the preview they built the first time a link was shared. Change the image afterwards and they may keep showing the old one for a while. Facebook's Sharing Debugger and LinkedIn's Post Inspector fetch the page again and refresh the card, so run a changed page through both.

OpenGraph and Twitter Cards

X reads its own set of tags, called Twitter Cards, such as twitter:card, twitter:title, twitter:description and twitter:image. Where the Twitter tags are missing, X falls back to the OpenGraph ones, except for twitter:card itself, which has no OpenGraph equivalent. Most sites publish both. The post on Twitter Cards covers the X side.

Per-article overrides

A site-wide default image and description is the minimum. On a Joomla blog or news site, each article should share its own picture and its own description. The article's intro image is usually a good choice. Sometimes it is a cropped detail that means nothing out of context, and then an editor needs a field to set a different image for that one article.

How AI Boost for Joomla handles OpenGraph

AI Boost for Joomla writes OpenGraph tags on your pages once you switch on "Enable Open Graph tags" on its Social Sharing screen. Twitter Card tags have a separate switch, "Enable Twitter Card meta tags". The same screen holds the Default OG Image, which AI Boost recommends at 1200×630 pixels.

For per-page control it uses Joomla custom fields, which a button on the Social Sharing screen creates. Articles get six fields, for OG Title, OG Description, OG Image, OG Type, OG Video URL and Twitter Card. Categories get three, named Category OG Title, Category OG Description and Category OG Image. Every one of these labels starts with the AI Boost prefix.

The image follows a fixed order. On an article, an OG Image set on the article wins, then the article's intro image, or its full-text image when there is no intro image, then the Default OG Image. On a category page, the Category OG Image wins, then the category's own image, then the default. OpenGraph and X get the same picture.