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.
On this page
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.
<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>og:titleWhat it does
Tips
og:descriptionWhat it does
Tips
og:imageWhat it does
Tips
og:urlThe canonical address of the pageTips
og:typeWhat it does
Tips
website for most pages, article for postsog:site_nameWhat it does
Tips
og:image:altWhat it does
Tips
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. 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
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 explains the choice, and optimising images for the web covers compression.
A share image built for the preview: short words, centred, large enough to read at the size a feed shows it.
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.
twitter:cardValues
summary_large_image or summaryNotes
twitter:siteValues
@yourbrandNotes
twitter:creatorValues
@authorNotes
twitter:image:altValues
Notes
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.
<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" />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.
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' },
}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 to clear their caches.
- 4
Version the image
If an old image sticks, change its filename or add a query string such as
?v=2and 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.
Questions people ask
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.
Written by Gradiently
The team behind Gradiently, a design tool built around Marks: living gradients that make everything you design look like yours.
See our profile