Open Graph Tags: The Complete Guide for Developers
When someone shares your link on Slack, LinkedIn, X, or Discord, the preview card they see is controlled by Open Graph tags. Missing or misconfigured tags mean your links show up with no image, a wrong title, or a blank card. Here is how to fix that.
What are Open Graph tags?
Open Graph is a protocol created by Facebook that lets you control how your page appears when shared on social platforms. The tags are HTML meta elements in your page's <head>. Every major platform reads them: Facebook, LinkedIn, Slack, Discord, iMessage, WhatsApp, Telegram, and X (Twitter).
Without Open Graph tags, platforms try to guess a title and description from your page content. The result is usually wrong or incomplete.
Essential Open Graph tags
| Tag | Description | Required |
|---|---|---|
og:title | The title shown in link previews. Keep it under 60 characters. | Yes |
og:description | A short summary shown below the title. Under 160 characters. | Yes |
og:image | The preview image URL. Must be 1200x630px, absolute URL. | Yes |
og:url | The canonical URL of the page. Must be absolute. | Yes |
og:type | The type of content: website, article, product. | No |
og:site_name | Your brand name. Shown as a label on some platforms. | No |
X (Twitter) card tags
X reads Open Graph tags as a fallback, but has its own tag namespace for more control. At minimum, add twitter:card with a value of summary_large_image to get the large preview format:
| Tag | Description | Required |
|---|---|---|
twitter:card | Card type: summary_large_image (recommended) or summary. | Yes |
twitter:title | Falls back to og:title if not set. | No |
twitter:description | Falls back to og:description if not set. | No |
twitter:image | Falls back to og:image if not set. | No |
twitter:creator | The @username of the content author. | No |
Raw HTML implementation
If you are working with plain HTML, add these meta tags inside the <head>:
<head> <!-- Open Graph --> <meta property="og:title" content="Your Page Title" /> <meta property="og:description" content="A short description of the page." /> <meta property="og:image" content="https://yoursite.com/og-image.png" /> <meta property="og:url" content="https://yoursite.com/page" /> <meta property="og:type" content="website" /> <meta property="og:site_name" content="Your Brand" /> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:creator" content="@yourhandle" /> </head>
Next.js Metadata API
Next.js generates Open Graph and Twitter tags automatically from the metadata export. This is the recommended approach for any Next.js project:
// app/layout.tsx: site-wide defaults
import type { Metadata } from "next"
export const metadata: Metadata = {
metadataBase: new URL("https://yoursite.com"),
title: {
default: "Your Brand",
template: "%s | Your Brand",
},
description: "One sentence about your product.",
openGraph: {
type: "website",
locale: "en_US",
url: "https://yoursite.com",
siteName: "Your Brand",
images: [{
url: "/og-image.png",
width: 1200,
height: 630,
alt: "Your Brand preview image",
}],
},
twitter: {
card: "summary_large_image",
creator: "@yourhandle",
},
}Override per page by exporting metadata from any page component:
// app/blog/[slug]/page.tsx
export const metadata: Metadata = {
title: "My Blog Post Title",
description: "A specific description for this post.",
openGraph: {
title: "My Blog Post Title",
description: "A specific description for this post.",
images: [{ url: "/blog/my-post-og.png" }],
type: "article",
},
}Common Open Graph mistakes
Wrong image dimensions
Using a square image or an image smaller than 1200x630px. Most platforms will either crop it badly or show no image at all. Always use 1200x630px with a 1.91:1 aspect ratio.
Relative image URLs
Using /og-image.png instead of https://yoursite.com/og-image.png. Social platforms fetch the image from outside your site, so they need an absolute URL. In Next.js, set metadataBase to handle this automatically.
Missing og:image entirely
Without an og:image, your link preview has no visual element. The click-through rate on social shares drops significantly when there is no image.
Duplicate or conflicting tags
Having two og:title tags on the same page, one from the layout and one from the page component. In Next.js, page-level metadata merges with layout metadata. Only set the fields you want to override.
Not testing after deploy
Social platforms cache previews aggressively. After changing tags, use Facebook's Sharing Debugger or LinkedIn's Post Inspector to clear the cache and verify the new tags.
FAQ
What are Open Graph tags?
Open Graph tags are HTML meta tags that control how your page appears when shared on social platforms like Facebook, LinkedIn, Slack, Discord, and X (Twitter). They define the title, description, and image shown in link previews.
What is the correct og:image size?
The recommended size for og:image is 1200 x 630 pixels. This works well on all major platforms including Facebook, LinkedIn, X (Twitter), Slack, and Discord. Use a 1.91:1 aspect ratio.
Do I need both Open Graph and Twitter tags?
X (Twitter) falls back to Open Graph tags if Twitter-specific tags are missing. However, adding twitter:card and twitter:image gives you more control over how your link appears on X. At minimum, add twitter:card with a value of summary_large_image.
How do I debug Open Graph tags?
Use Facebook's Sharing Debugger (developers.facebook.com/tools/debug) to see how Facebook reads your tags. For X, use the Twitter Card Validator. For LinkedIn, use the Post Inspector. Each platform caches previews, so use the debug tool to force a refresh after making changes.
Check your Open Graph tags
SEOLint validates og:title, og:description, og:image dimensions, and twitter:card on every scan.