Seoxpert.io
Get started
mediumTechnical SEO

Social Card Image URL Does Not Serve an Image

The og:image URL returns a non-image content-type, causing social cards to display without an image preview.

By Seoxpert Editorial · Published

Why it matters

Social platforms rely on the og:image meta tag to display rich previews when your content is shared. If the image URL serves HTML instead of an image, no preview image appears, reducing click-through rates and engagement from social shares.

Impact

Social shares of your content will lack image previews, significantly lowering visibility and click-through rates.

How it's detected

A crawler requests the og:image URL and checks if the Content-Type response header is an image type (e.g., image/jpeg, image/png); if not, it flags the issue.

Common causes

  • •SPA or framework catch-all route returns HTML for non-existent image paths
  • •CDN or proxy misconfiguration routes image requests to app shell
  • •Dynamic image generation endpoints do not set correct Content-Type header
  • •Missing or misnamed image files in the public/static directory

How to fix it

Open the og:image URL in a browser or use 'curl -I' to inspect the Content-Type header. If it is not an image type, update your CDN, router, or framework configuration to serve the correct image file with the appropriate Content-Type. For dynamic image generation (e.g., in Next.js), ensure your route handler sets 'Content-Type: image/png' or the relevant image MIME type.

Code examples

Problem: Next.js API route returns HTML instead of image

// pages/api/og-image.js
export default function handler(req, res) {
  // Incorrect: returns HTML
  res.setHeader('Content-Type', 'text/html');
  res.status(200).send('<html>App Shell</html>');
}

Fix: Next.js API route returns proper image content-type

// pages/api/og-image.js
export default function handler(req, res) {
  // Correct: returns PNG image
  const imageBuffer = generateImageSomehow();
  res.setHeader('Content-Type', 'image/png');
  res.status(200).send(imageBuffer);
}

FAQ

Why does my og:image URL return text/html instead of an image?

This usually happens when your router or SPA catch-all route serves the app shell for unknown paths, including image URLs.

How can I check the Content-Type of my og:image URL?

Use 'curl -I <image-url>' or open the URL in your browser and inspect the response headers.

What content-type should my og:image URL return?

It should return an image MIME type such as image/jpeg, image/png, or image/webp.

How do I fix og:image returning HTML in Next.js?

Ensure static images are in the public/ directory or, for dynamic images, set the correct Content-Type header in your API route.

Found this issue on your site?

Run a scan to see if Social Card Image URL Does Not Serve an Image affects your pages.

Scan my website →