How to Fix Missing og:image — Open Graph for Social Sharing

Q: What size should an OG image be?

1200x630 pixels (1.91:1 ratio). This is the standard recommended by Facebook and works well on Twitter, LinkedIn, and Slack. Use PNG or WebP format.

Q: Does og:image affect SEO rankings?

Not directly. But OG images affect social engagement, which drives traffic and backlinks. Pages shared without an image get significantly fewer clicks.

When someone shares your page on Twitter, Slack, or LinkedIn and there is no og:image, the preview renders as a blank gray box or a generic fallback. This is a visual failure. Links shared without an Open Graph image get dramatically fewer clicks because a rich preview is the difference between a scroll-past and an interaction. Indxel enforces the og-image rule with a critical severity and a weight of 8/100—this is the heaviest single Open Graph rule in our scoring engine.

Social platform crawlers (like Twitterbot or LinkedInBot) do not render JavaScript or intelligently guess which image on your page is the most important. They parse your <head> specifically for the <meta property="og:image" content="..."> tag. If that tag is missing, or if the URL is invalid, the platform drops the preview entirely. You lose control over your content's presentation in the feed.

How do you detect missing OG images?

Run npx indxel check in your terminal to scan your local build or production URL for missing og:image tags. The CLI outputs exact file paths and rule IDs for every page failing the check.

$ npx indxel check http://localhost:3000
 
Validating SEO rules...
 
❌ /about
   [og-image] Missing explicit og:image metadata. (Severity: Critical)
   [missing-twitter-card] Missing twitter:card property.
 
❌ /blog/how-to-configure-caching
   [og-image] Missing explicit og:image metadata. (Severity: Critical)
 
Score: 82/100
Found 3 critical errors across 47 pages.

The og-image rule is classified as critical. If you run Indxel in a CI environment with strict mode enabled, a missing OG image will exit with code 1 and fail your build.

How do you fix missing OG images?

Define a default fallback image in your root layout for static pages, and use Next.js opengraph-image.tsx files to generate dynamic images for routes like blog posts. Every page on your site must resolve an absolute URL to a valid image.

Next.js App Router (Static fallback)

In the App Router, metadata is defined via the exported metadata object. If you omit the openGraph key, Next.js will not generate the required tags.

Bad: No Open Graph field, resulting in blank social previews.

// app/layout.tsx
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'Acme Corp',
  description: 'Enterprise B2B software.',
}

Good: Explicit OG image with dimensions. Defining this in your root app/layout.tsx guarantees that every page inherits a fallback image unless overridden.

// app/layout.tsx
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'Acme Corp',
  description: 'Enterprise B2B software.',
  metadataBase: new URL('https://acmecorp.com'),
  openGraph: {
    images: [
      {
        url: '/og-default.png', // Resolves to https://acmecorp.com/og-default.png
        width: 1200,
        height: 630,
        alt: 'Acme Corp Logo',
      },
    ],
  },
}

Next.js App Router (Dynamic generation)

Sharing the same generic image for all 500 of your blog posts looks repetitive and lowers engagement. Next.js natively supports dynamic OG image generation via @vercel/og using the opengraph-image.tsx file convention.

Good: Drop an opengraph-image.tsx file directly into your dynamic route (e.g., app/blog/[slug]/opengraph-image.tsx). Next.js will automatically generate the image at build time or request time and inject the correct <meta> tags into the page <head>.

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og'
import { getPostBySlug } from '@/lib/db'
 
export const runtime = 'edge'
export const alt = 'Blog Post Cover'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'
 
export default async function Image({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug)
 
  return new ImageResponse(
    (
      <div
        style={{
          background: 'linear-gradient(to right, #0f172a, #1e293b)',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        <h1 style={{ fontSize: 64, fontWeight: 'bold' }}>{post.title}</h1>
        <p style={{ fontSize: 32, color: '#94a3b8' }}>{post.author}</p>
      </div>
    ),
    { ...size }
  )
}

Next.js Pages Router

If you are maintaining a Pages Router application, inject the meta tags manually using next/head.

// pages/blog/[slug].tsx
import Head from 'next/head'
 
export default function BlogPost({ post }) {
  return (
    <>
      <Head>
        <title>{post.title}</title>
        <meta property="og:image" content={`https://acmecorp.com/images/${post.coverImage}`} />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
      </Head>
      <article>...</article>
    </>
  )
}

Plain HTML

For static HTML sites, include the og:image property explicitly in the <head>. Include the dimensions to prevent layout shifts on social platforms.

<head>
  <meta property="og:image" content="https://acmecorp.com/og-image.webp">
  <meta property="og:image:type" content="image/webp">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
</head>

The Indxel SDK Approach

If you use the Indxel SDK to manage metadata, og:image is heavily typed and validated before compilation. Our createMetadata helper automatically mirrors your OG image to your Twitter Card image, preventing duplicate code.

import { createMetadata } from '@indxel/seo'
 
export const metadata = createMetadata({
  title: 'Dashboard',
  description: 'Manage your settings.',
  // Indxel forces this to be an absolute URL or throws a type error
  image: 'https://acmecorp.com/dashboard-og.png', 
})

How do you prevent missing OG images in CI?

Block deployments that introduce missing OG images by running npx indxel check --ci in your GitHub Actions workflow or Vercel build step. This guarantees that no pull request can merge if it breaks social previews.

Use the --diff flag in CI. This tells Indxel to only check the URLs modified in the current pull request. It drops CI check times from 2 minutes down to 3 seconds.

GitHub Actions:

name: SEO Guard
on: [pull_request]
 
jobs:
  validate-seo:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - run: npx indxel check --ci --diff

Vercel Build Command:

If you prefer catching this at the Vercel level, modify your build script in package.json. If Indxel finds a missing OG image, it exits with a non-zero code and fails the Vercel deployment immediately.

{
  "scripts": {
    "build": "next build && npx indxel check --ci"
  }
}

What are the common edge cases?

Developers frequently ship the og:image tag but still get blank previews due to incorrect URL resolution or unsupported file types.

1. Relative URLs Social crawlers do not understand relative URLs. If your tag is <meta property="og:image" content="/og.png">, Twitterbot will request https://twitter.com/og.png and fail. You must provide an absolute URL. In Next.js, always define metadataBase in your root layout so the framework can automatically resolve relative image paths to absolute URLs.

2. File size limits Twitter drops OG images larger than 5MB. LinkedIn drops images larger than 8MB. If you are dynamically generating images with @vercel/og, they typically stay under 200KB. However, if you are passing user-uploaded cover photos directly into the og:image tag, you must compress them or route them through an image optimizer first.

3. Unsupported formats Stick to PNG, WebP, or JPEG. SVGs are strictly ignored by almost all social platforms, including Slack and iMessage.

4. Client-side rendering If your application renders the og:image tag via client-side React (useEffect), social crawlers will never see it. Open Graph tags must be present in the initial HTML payload.

Related rules

missing-og-title: The sibling rule to og-image. Without it, platforms fall back to the standard <title> tag, which often contains site-wide suffixes you don't want in a social card.
missing-og-description: Provides the subtitle text in the social card.
missing-twitter-card: Checks for twitter:card set to summary_large_image. Without this specific tag, Twitter will crop your 1200x630 image into a tiny square, ruining the visual impact.

FAQ

What size should an OG image be?

Create OG images at 1200x630 pixels (a 1.91:1 ratio). This is the exact dimension recommended by Facebook, and it scales perfectly across Twitter, LinkedIn, Slack, and Discord.

Can I use one OG image for my entire site?

You can, but unique OG images per page increase click-through rates. At minimum, define a fallback in your root layout, but implement dynamic opengraph-image.tsx files for high-traffic routes like product pages and blog posts.

Does og:image affect SEO rankings?

Not directly. Google's ranking algorithms do not use og:image as a ranking factor. However, OG images dictate social engagement. Higher engagement drives more traffic and accelerates backlink acquisition, which indirectly improves your search visibility.

Why is my OG image not updating on Twitter or LinkedIn?

Social platforms aggressively cache Open Graph metadata for up to 7 days. If you fix a missing OG image, you must manually invalidate the platform's cache using the Twitter Card Validator or the LinkedIn Post Inspector. Alternatively, append a cache-busting query string to your image URL (e.g., ?v=2).

How do you detect missing OG images?

Run npx indxel check in your terminal to scan your local build or production URL for missing og:image tags. The CLI outputs exact file paths and rule IDs for every page failing the check.

$ npx indxel check http://localhost:3000
 
Validating SEO rules...
 
❌ /about
   [og-image] Missing explicit og:image metadata. (Severity: Critical)
   [missing-twitter-card] Missing twitter:card property.
 
❌ /blog/how-to-configure-caching
   [og-image] Missing explicit og:image metadata. (Severity: Critical)
 
Score: 82/100
Found 3 critical errors across 47 pages.

The og-image rule is classified as critical. If you run Indxel in a CI environment with strict mode enabled, a missing OG image will exit with code 1 and fail your build.

How do you fix missing OG images?

Next.js App Router (Static fallback)

In the App Router, metadata is defined via the exported metadata object. If you omit the openGraph key, Next.js will not generate the required tags.

Bad: No Open Graph field, resulting in blank social previews.

// app/layout.tsx
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'Acme Corp',
  description: 'Enterprise B2B software.',
}

Good: Explicit OG image with dimensions. Defining this in your root app/layout.tsx guarantees that every page inherits a fallback image unless overridden.

// app/layout.tsx
import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: 'Acme Corp',
  description: 'Enterprise B2B software.',
  metadataBase: new URL('https://acmecorp.com'),
  openGraph: {
    images: [
      {
        url: '/og-default.png', // Resolves to https://acmecorp.com/og-default.png
        width: 1200,
        height: 630,
        alt: 'Acme Corp Logo',
      },
    ],
  },
}

Next.js App Router (Dynamic generation)

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og'
import { getPostBySlug } from '@/lib/db'
 
export const runtime = 'edge'
export const alt = 'Blog Post Cover'
export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'
 
export default async function Image({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug)
 
  return new ImageResponse(
    (
      <div
        style={{
          background: 'linear-gradient(to right, #0f172a, #1e293b)',
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        <h1 style={{ fontSize: 64, fontWeight: 'bold' }}>{post.title}</h1>
        <p style={{ fontSize: 32, color: '#94a3b8' }}>{post.author}</p>
      </div>
    ),
    { ...size }
  )
}

Next.js Pages Router

If you are maintaining a Pages Router application, inject the meta tags manually using next/head.

// pages/blog/[slug].tsx
import Head from 'next/head'
 
export default function BlogPost({ post }) {
  return (
    <>
      <Head>
        <title>{post.title}</title>
        <meta property="og:image" content={`https://acmecorp.com/images/${post.coverImage}`} />
        <meta property="og:image:width" content="1200" />
        <meta property="og:image:height" content="630" />
      </Head>
      <article>...</article>
    </>
  )
}

Plain HTML

For static HTML sites, include the og:image property explicitly in the <head>. Include the dimensions to prevent layout shifts on social platforms.

<head>
  <meta property="og:image" content="https://acmecorp.com/og-image.webp">
  <meta property="og:image:type" content="image/webp">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
</head>

The Indxel SDK Approach

import { createMetadata } from '@indxel/seo'
 
export const metadata = createMetadata({
  title: 'Dashboard',
  description: 'Manage your settings.',
  // Indxel forces this to be an absolute URL or throws a type error
  image: 'https://acmecorp.com/dashboard-og.png', 
})

How do you prevent missing OG images in CI?

Use the --diff flag in CI. This tells Indxel to only check the URLs modified in the current pull request. It drops CI check times from 2 minutes down to 3 seconds.

GitHub Actions:

name: SEO Guard
on: [pull_request]
 
jobs:
  validate-seo:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run build
      - run: npx indxel check --ci --diff

Vercel Build Command:

{
  "scripts": {
    "build": "next build && npx indxel check --ci"
  }
}

What are the common edge cases?

Developers frequently ship the og:image tag but still get blank previews due to incorrect URL resolution or unsupported file types.

3. Unsupported formats Stick to PNG, WebP, or JPEG. SVGs are strictly ignored by almost all social platforms, including Slack and iMessage.

Related rules

missing-og-title: The sibling rule to og-image. Without it, platforms fall back to the standard <title> tag, which often contains site-wide suffixes you don't want in a social card.
missing-og-description: Provides the subtitle text in the social card.
missing-twitter-card: Checks for twitter:card set to summary_large_image. Without this specific tag, Twitter will crop your 1200x630 image into a tiny square, ruining the visual impact.

FAQ

What size should an OG image be?

Create OG images at 1200x630 pixels (a 1.91:1 ratio). This is the exact dimension recommended by Facebook, and it scales perfectly across Twitter, LinkedIn, Slack, and Discord.

Fix: Missing og:image

How do you detect missing OG images?

How do you fix missing OG images?

Next.js App Router (Static fallback)

Next.js App Router (Dynamic generation)

Next.js Pages Router

Plain HTML

The Indxel SDK Approach

How do you prevent missing OG images in CI?

What are the common edge cases?

Related rules

FAQ

What size should an OG image be?

Can I use one OG image for my entire site?

Does og:image affect SEO rankings?

Why is my OG image not updating on Twitter or LinkedIn?

Frequently asked questions

What size should an OG image be?

Can I use one OG image for my entire site?

Does og:image affect SEO rankings?

Catch this before it ships

Fix: Missing og:image

How do you detect missing OG images?

How do you fix missing OG images?

Next.js App Router (Static fallback)

Next.js App Router (Dynamic generation)

Next.js Pages Router

Plain HTML

The Indxel SDK Approach

How do you prevent missing OG images in CI?

What are the common edge cases?

Related rules

FAQ

What size should an OG image be?

Can I use one OG image for my entire site?

Does og:image affect SEO rankings?

Why is my OG image not updating on Twitter or LinkedIn?

Frequently asked questions

What size should an OG image be?

Can I use one OG image for my entire site?

Does og:image affect SEO rankings?

Catch this before it ships