What your links look like when you're not looking
You spend weeks building a beautiful landing page. Then someone shares it on Slack, and the preview shows... nothing. No image, no title, just a bare URL. That's what happens when you skip Open Graph tags.
Open Graph (OG) tags are meta tags that control how your page appears when shared on social media, messaging apps, and anywhere else that generates link previews. Without them, platforms guess what to show - and they usually guess wrong.
The four essential OG tags
At minimum, every page should have these four tags:
<meta
property="og:title"
content="LintPage - Pre-Launch SEO Linting"
/>
<meta
property="og:description"
content="Catch SEO disasters before launch."
/>
<meta
property="og:image"
content="https://lintpage.com/og-image.png"
/>
<meta
property="og:url"
content="https://lintpage.com/"
/>
- og:title - The headline in the link preview. Can differ from your
<title>tag (and often should - social titles can be more conversational). - og:description - The supporting text below the title. Keep it under 200 characters.
- og:image - The preview image. This is the single biggest factor in whether someone clicks a shared link.
- og:url - The canonical URL for the content. Helps platforms deduplicate shares.
Getting the image right
The og:image is the most impactful tag and the most commonly broken. Here's what you need to know:
Size: 1200x630 pixels (1.91:1 aspect ratio). This works across Facebook, Twitter, LinkedIn, and Slack. Some platforms crop slightly, so keep important content centered.
Format: Use PNG or JPG. Keep the file size under 5MB. Some platforms won't load images over 8MB.
URL: Must be an absolute URL starting with https://. Relative paths don't work. The image must be publicly accessible - platforms fetch it from their servers, not from the user's browser.
<!-- Won't work: relative path -->
<meta
property="og:image"
content="/images/og.png"
/>
<!-- Will work: absolute URL -->
<meta
property="og:image"
content="https://example.com/images/og.png"
/>
Dynamic images: For pages with unique content (blog posts, product pages), generate OG images dynamically. Next.js has built-in support for this with the opengraph-image.tsx convention or the ImageResponse API.
Twitter Card tags
Twitter (X) has its own set of meta tags that override OG tags when present:
<meta
name="twitter:card"
content="summary_large_image"
/>
<meta
name="twitter:title"
content="LintPage - Pre-Launch SEO Linting"
/>
<meta
name="twitter:description"
content="Catch SEO disasters before launch."
/>
The twitter:card value determines the preview layout:
summary- small square image on the left, title and description on the rightsummary_large_image- large image above the title and description (this is what you usually want)
If you don't set Twitter-specific tags, Twitter falls back to your OG tags. But setting twitter:card is important because there's no OG equivalent - without it, Twitter defaults to the small summary format.
Common mistakes
1. Forgetting og:type
While not required, og:type helps platforms understand your content:
<meta
property="og:type"
content="website"
/>
<!-- Or for blog posts -->
<meta
property="og:type"
content="article"
/>
2. Stale cached previews
Platforms cache link previews aggressively (sometimes for weeks). If you update your OG tags but the preview doesn't change, use the platform's debug tool to force a refresh:
- Facebook: Sharing Debugger
- LinkedIn: Post Inspector
- Twitter/X: Card Validator was deprecated — post a test tweet or use a third-party preview tool instead
3. Missing og:site_name
This tag shows the site name in a smaller font above the title in some platforms:
<meta
property="og:site_name"
content="LintPage"
/>
It's a subtle branding touch that makes your shared links look more professional.
Open Graph Tag Preview
Check your Open Graph and Twitter Card tags for social media sharing.
Setting up OG tags in Next.js
Next.js makes OG tags straightforward through the Metadata API:
export const metadata: Metadata = {
openGraph: {
title: 'My Page Title',
description: 'My page description',
url: 'https://example.com/my-page',
type: 'website',
siteName: 'My Site',
},
twitter: {
card: 'summary_large_image',
title: 'My Page Title',
description: 'My page description',
},
};
For dynamic OG images, create an opengraph-image.tsx file in your route directory. Next.js will automatically generate and serve the image, and add the appropriate meta tags.
Check your tags before sharing
The frustrating thing about OG tags is that you only discover they're broken after sharing a link publicly. By then, the ugly preview is already in the Slack channel or the tweet is live.
Run your URL through the LintPage Open Graph Checker before you share. It shows you exactly what your link preview will look like and flags any missing or misconfigured tags. Fix them before anyone sees the broken version.