Missing og:image? Why It Fails and How to Fix It

An OG image not showing means the shared link has a title, or only a bare URL, and no picture. The usual cause is a missing og:image tag, or a tag whose URL the crawler cannot fetch. Preview apps read the HTML the server sends. They do not open the page in a browser and wait for scripts, styles, or a logged-in session.

Fix the tag in that first response, use one absolute https URL, and check the live page before the link is shared again. The OG image guide covers what the tag is for. This page is the checklist for when the picture fails, from a path the crawler cannot resolve to a file that never finishes downloading.

What a working tag looks like

One image is enough. Width and height are optional, and they help a crawler reserve the right frame before the file finishes downloading. The type tells the crawler the format. The alt describes the picture for people who cannot see it. None of those extra tags can rescue a URL that does not return an image.

<meta property="og:image" content="https://example.com/covers/field-notes.jpg" />
<meta property="og:image:secure_url" content="https://example.com/covers/field-notes.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Rain-soaked raised beds with new seedlings." />

1200 x 630 pixels is the size most often used for a large card. JPG suits a photo, PNG a flat graphic, and WebP a smaller file when the apps you care about accept it. Put the subject near the center. Some layouts crop the sides, and a logo parked in a corner can disappear. Crop an existing picture in the OG image size tool, or build a new one in the OG image generator.

Paste the page URL into the Open Graph checker after the tag is in the server HTML. The image panel shows the published URL, whether the file loaded, and the pixel size when the format exposes it.

Open graph image not showing

Work down this list for an open graph image not showing. The first match is usually the whole problem. Later items only matter after the tag and the file are both real.

• The tag is not in the server HTML. View the page source, not the inspector after scripts run. A missing og:image in that source is what the crawler sees, even when the rendered page looks complete.
• The URL is relative. A relative og:image such as /covers/field-notes.jpg depends on the crawler resolving it against the page. Some do, some do not. Write the full https:// address, including the host.
• The file does not load. Open the image URL in a private window. A 404, a 500, a redirect to a login page, or an HTML error page is og:image not working: the tag looks fine and the response is not an image.
• The file is tiny or huge. A file under about 200 pixels on a side is often skipped. A multi-megabyte original can time out before the crawler stores it.
• The host blocks the crawler. A hotlink rule, a firewall, or a bot challenge can return a different response to a preview server than to a browser on the same network.

A relative path and a blocked file

A relative og:image is the most common tag that looks correct in a template and fails in a share. The browser resolves /covers/field-notes.jpg because it already knows the site. A crawler that treats the content attribute as a URL, and does not join it to the page, requests a path with no host. The request fails, and the card has no picture.

Protocol-relative URLs (//example.com/covers/field-notes.jpg) have the same problem when the crawler does not supply https. An address on http can also be dropped by an app that only fetches https. Use one absolute https URL in og:image. If you also set og:image:secure_url, point it at that same https file rather than at a second copy that can drift.

A file that requires a cookie, a signed query string, or a login is invisible to the crawler. Open the image URL in a private window with no session. If that window shows a login form, an HTML error, or a download of something that is not a picture, the share will too. Put the share image on a public path. Do not reuse a URL that only works inside the CMS.

Size, format, and a file that times out

The og image file size matters as much as the pixel size. Export at 1200 x 630 and keep the file light, under about 300 KB when the link will be sent in chat. A phone photo at several megabytes can be the right dimensions and still fail because the fetch stops. Re-export the JPG at a lower quality before you change the HTML.

A file under about 200 pixels on either side is often treated as an icon, not a card image. A square logo on a transparent PNG can also look empty once a platform fills the frame with a background. Use a designed 1200 x 630 frame, with the subject inside the middle, and set width and height to those pixels so the reserved frame matches the file.

JPG, PNG, and WebP are widely supported. An SVG, an animated file, or a format the platform does not decode will not become the card even when the tag is valid. If a WebP works in the checker and fails in one app, publish a JPG at the same URL path with a new filename, and point og:image at the JPG.

Tags that exist only in the browser

A single-page app can insert og:image after React or Vue runs. The crawler has already left. View source on the live URL. If the tag is absent from that first response, the share is a missing og:image, regardless of what the inspector shows after hydration.

Print the tag on the server, or prerender the route so each URL has its own HTML. A tag in a client component that runs only in the browser does not count. The same limit applies to a tag built from a data fetch that never runs during the document request.

When the file is right and the card is old

If the checker shows the tag and the file, and a social app still shows the old card, the app is using a saved copy. Overwriting the bytes at the same URL often leaves that copy in place. Change the image URL after you replace the file, even with a query string such as ?v=2, then share the link in a new post or message.

Messages and posts already sent keep the card they were composed with. A later edit to the HTML does not rewrite them. There is also no single refresh that updates Facebook, LinkedIn, X, and every chat app at once. Use the platform's own debugger when it has one. For a chat app that has no public debugger, a new message is the check.

The OG image checker guide explains what the image panel reports, including the published URL, the resolved URL, and a warning when either side is under 200 pixels. Run the live URL there again after the template change, before the link goes out.

Frequently asked questions