# Open Graph tags: the complete guide for share previews

[Canonical HTML page](https://gradiently.design/guide/open-graph-tags)

Every shared link becomes a little poster for your page, built from a few meta tags. Get them right and the preview looks designed; miss one and platforms guess. Here is the complete set, with markup to copy.

## The short version

- Open Graph tags are meta tags in a page's head that tell social platforms and messaging apps which title, description and image to show when the link is shared.
- The Open Graph protocol treats og:title, og:type, og:image and og:url as the basic required tags, and og:description and og:site_name are strongly recommended.
- An og:image of 1200×630 pixels, referenced with an absolute https URL, works well across Facebook, LinkedIn, X, Slack, iMessage and most other apps.
- X reads twitter:card to choose the preview layout and falls back to Open Graph tags for the title, description and image when its own tags are missing.
- Platforms cache previews, so after changing tags you need to rescrape the URL in a debugging tool such as Facebook's Sharing Debugger or LinkedIn's Post Inspector.

**Open Graph tags** are `<meta>` tags in the `<head>` of a page that decide how it looks when shared: the title, the short description, the image and the link. Facebook created the protocol, and today LinkedIn, X, Slack, Discord, WhatsApp, iMessage and most other apps read it. Four tags form the core, `og:title`, `og:type`, `og:image` and `og:url`, and adding a description, an image size and a Twitter card tag covers almost every platform.

## The Open Graph tags every page needs

Paste this into the head of a page and replace the values. Each tag uses `property`, not `name`, and every URL is absolute.

```html
<head>
  <title>Spring menu at Harbour Kitchen</title>
  <meta name="description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://harbourkitchen.example/spring" />
  <meta property="og:title" content="Spring menu at Harbour Kitchen" />
  <meta property="og:description" content="Twelve new plates for spring, from wild garlic soup to rhubarb tart." />
  <meta property="og:site_name" content="Harbour Kitchen" />
  <meta property="og:locale" content="en_GB" />
  <meta property="og:image" content="https://harbourkitchen.example/og/spring.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="The spring menu title over a soft green gradient" />

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

A complete, working set. X will borrow the title, description and image from the Open Graph tags above.

| Tag | What it does | Tips |
| --- | --- | --- |
| `og:title` | The bold headline of the preview | Under about 60 characters; no site name needed |
| `og:description` | One or two lines under the title | Around 110 to 160 characters; some apps hide it |
| `og:image` | The preview picture | Absolute https URL, 1200×630 |
| `og:url` | The canonical address of the page | Match your canonical link, without tracking parameters |
| `og:type` | What the page is | `website` for most pages, `article` for posts |
| `og:site_name` | Your brand, shown small | Keep it the same on every page |
| `og:image:alt` | A description of the image | Read aloud by screen readers on some platforms |

The tags that matter in practice. The full list lives at the protocol's own site, ogp.me.

## The og:image: size and format

The image is what people actually notice. Use **1200×630 pixels**, a ratio of about 1.91:1, which is the size platforms expect for large previews and the one listed in [Open Graph image size](https://gradiently.design/guide/open-graph-image-size). Keep the important words and logo away from the edges, because some apps crop to a square or round the corners.

- Open Graph 1200×630: 1200 × 630
- LinkedIn link image 1200×627: 1200 × 627
- Square crop 1200×1200: 1200 × 1200

The large preview shape and the square that some chat apps and the X summary card crop to. Centre the message so it survives both.

Save it as PNG when it is mostly type and gradient, or as a high quality JPEG for photographs, and keep the file small, ideally a few hundred kilobytes, since platforms set their own size limits and large files load slowly in feeds. [PNG vs JPG](https://gradiently.design/guide/png-vs-jpeg) explains the choice, and [optimising images for the web](https://gradiently.design/guide/lighthouse-image-performance) covers compression.

A wide 1200 by 630 share image with a restaurant name, a headline about a spring menu and a booking line over a soft gradient

A share image built for the preview: short words, centred, large enough to read at the size a feed shows it.

> **The image must be reachable** Platforms fetch `og:image` from their own servers. A relative path, a page behind a login, a firewall that blocks unknown bots or an expired signed URL all give you a blank preview.

## Twitter card tags for X

X uses its own `twitter:` tags, written with `name` rather than `property`. The one that matters is `twitter:card`. When `twitter:title`, `twitter:description` or `twitter:image` are missing, X falls back to the matching Open Graph tags, so you rarely need to duplicate them.

| Tag | Values | Notes |
| --- | --- | --- |
| `twitter:card` | `summary_large_image` or `summary` | Large image, or a small square thumbnail |
| `twitter:site` | `@yourbrand` | The account for the site |
| `twitter:creator` | `@author` | The author of an article |
| `twitter:image:alt` | Text | Use when the image differs from the og version |

Add only these and let Open Graph supply the rest.

## Open Graph tags for articles

Blog posts and news pages can say more about themselves with `og:type` set to `article` and a few extra properties. Some apps show the date or author, and they help platforms understand the page.

```html
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-10-01T09:00:00Z" />
<meta property="article:modified_time" content="2026-10-03T14:30:00Z" />
<meta property="article:author" content="https://harbourkitchen.example/about/ana" />
<meta property="article:section" content="Menus" />
```

Dates use ISO 8601. Keep modified_time honest; update it only when the content meaningfully changes.

## Setting Open Graph tags in a framework

Most frameworks generate these tags from data. In Next.js, export a metadata object from the page or layout and the framework writes the tags for you. Set a `metadataBase` once so relative image paths become absolute.

```ts
export const metadata = {
  metadataBase: new URL('https://harbourkitchen.example'),
  title: 'Spring menu at Harbour Kitchen',
  description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
  openGraph: {
    type: 'website',
    url: '/spring',
    title: 'Spring menu at Harbour Kitchen',
    description: 'Twelve new plates for spring, from wild garlic soup to rhubarb tart.',
    siteName: 'Harbour Kitchen',
    images: [{ url: '/og/spring.png', width: 1200, height: 630, alt: 'The spring menu title over a soft green gradient' }],
  },
  twitter: { card: 'summary_large_image', site: '@harbourkitchen' },
}
```

Check your framework version's documentation, since metadata APIs change between releases. For generated images per page, see [dynamic OG images](https://gradiently.design/guide/dynamic-og-images).

## Testing and fixing share previews

1. **View the source** Open the page source, not the inspector, and confirm the tags are in the server HTML. Many crawlers do not run JavaScript.
2. **Check the image URL** Paste the og:image address into a private window. It should load without a login.
3. **Rescrape** Run the URL through Facebook's Sharing Debugger and [LinkedIn's Post Inspector](https://www.linkedin.com/post-inspector/) to clear their caches.
4. **Version the image** If an old image sticks, change its filename or add a query string such as `?v=2` and rescrape.
5. **Share it privately** Send the link to yourself in Slack or a messaging app to see a real preview.

### Blank or wrong preview

- Tags injected by client side JavaScript
- Relative og:image path
- og:url points at a different page
- Tiny or oddly shaped image
- Tags changed, preview unchanged

### Fix

- Render tags on the server
- Use a full https URL
- Match og:url to the canonical address
- Export at 1200×630
- Rescrape, or rename the image

The tags are the easy part; the image is the design work, and it needs to read at thumbnail size. In Gradiently, the link preview is one of the built in sizes at 1200×630, the Mark keeps its calmest area behind the words, and the Designer can make the share image for a page from a sentence, then the matching post sizes for [every platform](https://gradiently.design/guide/social-media-image-sizes).

## FAQ

### What are Open Graph tags?

Meta tags in a page's head, such as og:title and og:image, that tell social platforms and messaging apps what to show when the link is shared.

### Which Open Graph tags are required?

The protocol lists og:title, og:type, og:image and og:url as the basic tags. Add og:description and og:site_name for a complete preview.

### What size should an og:image be?

1200×630 pixels works across Facebook, LinkedIn, X and most chat apps. Use an absolute https URL and keep key content centred.

### Do I need Twitter card tags if I have Open Graph tags?

Add `twitter:card`, usually set to `summary_large_image`. X falls back to Open Graph for the title, description and image.

### Why is my link preview not updating?

Platforms cache previews. Rescrape the URL in Facebook's Sharing Debugger or LinkedIn's Post Inspector, or rename the image file.

### Should I use property or name for og tags?

Open Graph tags use `property`, and Twitter tags use `name`. Most parsers accept either, but following the convention avoids surprises.