What is Open Graph?

Open Graph is a set of meta tags in a page's HTML that tell social networks and chat apps which title, description and image to show when the page's link is shared.

Open Graph tags in a page's <head>:

<meta property="og:title" content="Spring launch" />
<meta property="og:description" content="Everything new this season." />
<meta property="og:image" content="https://example.com/cards/spring.png" />
<meta property="og:url" content="https://example.com/spring" />

How it works

A preview built from your page.

When you paste a link into a chat or a post, the app fetches the page and reads its Open Graph tags to build a preview card: a title, a short description and an image. Facebook introduced the format, and LinkedIn, Slack, WhatsApp, iMessage, Discord and most other apps read it.

If the tags are missing, apps fall back to the page title and meta description, or guess. The result is often a plain link, or the wrong image.

The tags

The ones that matter.

og:title

The headline of the card. Falls back to the page <title>.

og:description

One or two lines under the headline.

og:image

The picture. Use an absolute URL; 1200 × 630 pixels works well.

og:url

The canonical address of the page.

og:type

What the page is: website, article, product.

twitter:card

Chooses the layout on X: summary or summary_large_image. X falls back to Open Graph for the rest.

Common problems

Why a preview looks wrong.

Apps cache previews, so a fix can take a while to appear, and some give you a debugger to refresh it. The image must be reachable without a login, served over HTTPS, and referenced by an absolute URL. Tags that JavaScript adds after the page loads are usually not seen, because the crawler reads the HTML only.

FAQ

Common questions

Does Open Graph affect SEO? +

It isn't a ranking factor. It changes how a shared link looks, which can change how many people click it.

Do I need twitter: tags as well? +

Not necessarily. X falls back to Open Graph. Add twitter:card if you want to choose between the small and large card.

Why does a shared link show an old image? +

The app cached the earlier version. Refresh it with the app's sharing debugger, or wait for the cache to expire.

How can I check my tags? +

Use the Open Graph checker. It shows the preview card, lists the tags it found and tests that the image loads.