No Open Graph image

What happens when someone shares the link

Pasting a URL into a chat app, a team messaging tool, or a social post triggers a fetch from that platform's link crawler. It downloads the HTML, reads the Open Graph meta tags in the <head>, and turns them into a card: an image, a headline, a line of description, and the domain.

If og:image is missing, the platform either shows a text-only card or picks an image on its own, often the first <img> it finds, which might be a tracking pixel, a footer badge, or a logo squeezed into a square. If og:title is missing, it falls back to the <title> element, brand suffix and all, or leaves the headline blank. Most of these crawlers do not run JavaScript, so tags added on the client after page load are invisible to them.

Who notices first

The person who notices is usually the client. Launch day comes, they drop the new URL into a group chat or post it to their company page, and the preview is a grey box with a cropped domain name. A card with a real image and headline gets more clicks than a bare link, and the people scrolling past it never see the page itself.

It also matters for anyone forwarding product pages, event listings, or blog posts between colleagues. A preview that names the page tells the reader what they are about to open before they tap.

How Skewcheck checks it

Skewcheck parses the HTML returned for the audited URL and looks for two tags: meta property="og:title" and meta property="og:image". If either one is missing, the check fails with medium severity and takes 5 points off the audit score. Both present is a pass.

The check confirms the tags exist; it does not judge the image itself. A broken image URL, a 40-pixel logo, or a staging hostname can still pass, so open the og:image URL in a private browser window and confirm it loads without a login.

Tags to add, in HTML and in Next.js

og:title and og:image are the two the check requires. og:description, og:url, and og:type round out the card on most platforms, and og:image:width, og:image:height, and og:image:alt let crawlers lay out the preview before the image finishes downloading. In the Next.js App Router, the openGraph field of the metadata export produces all of these. Setting metadataBase lets you write image paths relative to the site root, and Next.js turns them into absolute URLs in the output. You can also drop an opengraph-image.png file into a route folder and Next.js will generate the tags for it.

import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  openGraph: {
    type: "website",
    url: "/menu",
    title: "Spring Menu at Example Bakery",
    description: "Seasonal pastries and breads, baked daily.",
    images: [
      {
        url: "/og/spring-menu.png",
        width: 1200,
        height: 630,
        alt: "A tray of rhubarb tarts on a marble counter",
      },
    ],
  },
};

Image size and the mistakes that break previews

Make the image 1200 by 630 pixels, a 1.91:1 ratio that the large card format on most networks expects. Keep important text and faces away from the edges, because some apps crop the same image to a square thumbnail. PNG or JPEG is the safe choice, and keeping the file to a few hundred kilobytes avoids fetch timeouts.

The content of og:image must be an absolute URL, including https://. A relative path like /og/menu.png works in a browser but not for a crawler that reads the tag out of context. Other common failures: an image path blocked in robots.txt, an image served only to logged-in users, and a preview built on a staging domain that points og:image at the staging host, which goes away after launch.

Platforms cache previews, sometimes for days. If you fix the tags after a link has already been shared, the old card can keep showing. Most networks offer a debugging page that forces a refetch, and changing the image filename also gets around a stale cache.

Before and after

<head>
  <title>Spring Menu | Example Bakery</title>
  <meta name="description" content="Seasonal pastries and breads, baked daily.">
</head>

<head>
  <title>Spring Menu | Example Bakery</title>
  <meta name="description" content="Seasonal pastries and breads, baked daily.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/menu">
  <meta property="og:title" content="Spring Menu at Example Bakery">
  <meta property="og:description" content="Seasonal pastries and breads, baked daily.">
  <meta property="og:image" content="https://example.com/og/spring-menu.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="A tray of rhubarb tarts on a marble counter">
</head>