Why Your Open Graph Image Crops on LinkedIn & Discord (And How to Fix It in Next.js)

Few things undermine a new feature release like sharing a link on LinkedIn or Discord only to find the title cropped in half or the brand logo chopped off at the bottom.

If you designed your Open Graph asset at 1200x630 and assumed every platform renders it identically, you have likely hit the aspect ratio trap.

Here is why it happens and how to structure your Open Graph assets and dynamic Next.js App Router metadata to look sharp across every platform.

---

1. The Aspect Ratio Trap: 1.91:1 vs 1:1 vs 16:9

While the standard Facebook Open Graph recommendation is 1200x630 px (1.91:1), platforms interpret cards differently:

• LinkedIn Feed: Scales 1200x627 or 1200x630 cleanly on desktop, but dynamically center-crops on mobile viewports.
• Discord: If your image is under 300px or has dimensions Discord flags as a thumbnail, it forces a tiny 1:1 square crop to the right of your text instead of a full-width card. Full embeds crop to 16:9.
• X / Twitter (summary_large_image): Displays at 2:1 or ~16:9, frequently chopping off 15–20 pixels from the top and bottom margins compared to a 1.91:1 canvas.

The Universal Fix: The 40px Safe Zone

Always design your base image at 1200 x 630 px, but enforce an internal safe zone:

• Canvas: 1200px x 630px
• Safe Area: 1080px x 520px (Center aligned)
• Margin: Keep all essential text, logos, and focal points at least 60px from the edges and 40px from top/bottom.

---

2. Dynamic Next.js App Router Setup

If you use Next.js 14/15 App Router, configure your metadata object with explicit width, height, and card format tags:

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next';

type Props = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPost(slug);

  const ogUrl = `https://omniseotools.com/api/og?title=${encodeURIComponent(post.title)}`;

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: `https://omniseotools.com/blog/${slug}`,
      siteName: 'OmniSEO Tools',
      images: [
        {
          url: ogUrl,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
      type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [ogUrl],
    },
  };
}

Important: Specifying width: 1200 and height: 630 inside the openGraph.images array helps platforms like LinkedIn and Facebook compute aspect ratios immediately without having to pre-fetch the full binary asset before determining the layout.

---

3. Verify Before Deploying

Instead of deploying to production and spamming post preview links to clear caches, test your Open Graph tags and crops locally:

1. Free Web Simulator: Test live previews for Twitter, LinkedIn, and Discord in real time using the free Social Meta & OpenGraph Card Simulator (https://omniseotools.com/tools/open-graph-meta-generator).
2. NPM Package: If you need programmatic validation or tag generation directly in your build pipelines, check out omniseo-core on npm (https://www.npmjs.com/package/omniseo-core).