Open Graph Tags: What Happens When You Skip Them

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 right
• summary_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.

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.