---
title: "How to Fix a Missing Open Graph Image"
description: "Find out why an Open Graph image is not showing by checking the live metadata, image response, crawler access, format and cached preview."
published: "2026-09-08"
author: "Jeffrey Needles"
canonical: "https://htmlcsstoimage.com/blog/fix-missing-open-graph-image"
---
Open Graph images are the large thumbnails shown when a page is shared in Slack, LinkedIn, Facebook, Messages and other apps. The page tells those apps which image to use with an `og:image` meta tag.
When the image is missing completely, either the platform did not find the tag or it could not download the file. The steps below check both. If the preview shows an older image instead, see [How to Fix an Outdated Open Graph Image](/blog/fix-outdated-open-graph-image).
## TL;DR: Fix a Missing Open Graph Image
1. Check the HTML returned by the _live_ page and confirm that `og:image` contains the full public image URL.
2. Open that image URL in an incognito window, then check its status and `Content-Type` with `curl` or a 3rd party verifier.
3. Make sure the image does not require cookies and is not being blocked by a CDN, firewall or hotlink rule.
4. Use a normal web image format and dimensions. A 1200 × 630 PNG or JPEG under 1 MB is a good default.
5. After fixing the problem, ask the platform to fetch the page again. If it cached the failed image URL, publish the image at a new URL.
## Step 1: Check the Tags on the Live Page
Start with the exact public URL people are sharing. A CMS preview, local build or staging deployment may publish different metadata.
Open **View Page Source** and search for `og:image`. Do not rely on the browser's Elements panel for this check. The Elements panel shows the DOM after JavaScript has run, while View Page Source shows the HTML the server returned to the crawler.
A basic set of tags looks like this:
```html
```
The [Open Graph protocol](https://ogp.me/){target=_blank} requires `og:title`, `og:type`, `og:image` and `og:url`. The image type, dimensions and alt text are optional, but useful.
Use a complete `https://` image URL. A relative path such as `/images/balcony-tomatoes.png` is not worth relying on when a crawler may encounter redirects or a different hostname.
There are a few quick ways to pull the image URL out of a page:
1. Open the browser console and run:
```js
document.querySelector('meta[property="og:image"]')?.content
```
This returns the first `og:image` value, or `undefined` if the tag is missing.
2. Use a browser extension that displays Open Graph or social-preview metadata. This is handy when you check tags often and do not want to dig through the page source each time.
3. Paste the page URL into a third-party checker such as the [Social Card Previewer](https://htmlcsstoimage.com/tools/social-card-previewer){target=_blank}. It shows the image URL along with the title, description and rendered preview.
The console and some extensions read the live DOM after JavaScript has run. They are good ways to find the URL, but they do not prove that a crawler received the tag in the original HTML.
You can also read the tags from a terminal:
```bash
curl -L -sS https://example.com/guides/balcony-tomatoes \
| grep -iE 'og:image|twitter:image'
```
If the tag only appears after the application runs in the browser, move it into the server-rendered or statically generated HTML.
Search for duplicate `og:image` tags too. A CMS theme, SEO plugin and application layout can each add one. Open Graph gives preference to the first image, so an empty or broken fallback tag can prevent the correct one farther down from being used.
## Step 2: Fetch the Image Without Your Browser Session
Copy the exact URL from `og:image` and open it in a private browser window. If it redirects to a login page or only works while you are signed in, a social crawler will not be able to load it.
Use `curl` to see the response headers:
```bash
curl -L -sS -o /dev/null -D - \
https://example.com/images/balcony-tomatoes.png
```
You want a successful response with an image content type:
```http
HTTP/2 200
content-type: image/png
content-length: 184231
cache-control: public, max-age=86400
```
If you get a `403`, `404` or `500`, fix that response first. A `200 OK` is not enough on its own. Some sites return an HTML error page with a successful status, so check that `Content-Type` is actually `image/png`, `image/jpeg` or another supported image type.
The `-L` option follows redirects. One redirect is usually harmless, but it is better to put the final public image URL directly in `og:image`.
## Step 3: Check Whether the Crawler Is Blocked
An image can work in a private window and still fail for a crawler. CDNs and firewalls often apply different rules to automated traffic.
Run the URL through the [Social Card Previewer](https://htmlcsstoimage.com/tools/social-card-previewer){target=_blank} or the platform's own debugger, then look at your CDN and application logs. There should be a request for the page followed by a request for the image.
The usual problems are bot challenges, hotlink protection, authentication applied to an entire image directory and rate limits. Also check `robots.txt` and any crawler-specific firewall rules.
Avoid short-lived signed URLs in `og:image`. The platform may keep the URL in its metadata cache after the signature expires. The public image address needs to remain usable even if the file behind it is generated dynamically or stored in a private bucket.
## Step 4: Check the Image Itself
PNG and JPEG are the safest formats when the same image will be shared across several platforms. An SVG can open normally in a browser and still be rejected as a social preview.
For a wide card, 1200 × 630 is a useful default. Keeping the image below 1 MB is a reasonable target for quick downloads, although it is not an Open Graph requirement. Do not crush the image quality just to reach an arbitrary number.
Platforms have their own limits. LinkedIn currently recommends a 1.91:1 image, documents 1200 × 627 pixels for its sharing module and sets a 5 MB file limit. Check its [current sharing requirements](https://www.linkedin.com/help/linkedin/answer/a521928/making-your-website-shareable-on-linkedin?lang=en){target=_blank} if LinkedIn is the only place the image fails.
If you publish `og:image:width`, `og:image:height` or `og:image:type`, make sure those values still match the file. They are easy to forget after changing the format or dimensions of an existing image.
## Step 5: Ask the Platform to Try Again
Fixing the page does not necessarily clear a failed preview from the platform's cache. Use the platform's debugger to request another fetch:
- [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/){target=_blank}
- [LinkedIn Post Inspector](https://www.linkedin.com/post-inspector/){target=_blank}
If the image URL previously returned an error, consider publishing the corrected file at a new path and updating `og:image`:
```html
```
The platform still needs to fetch the page again before it will see the new tag. Run the page URL through its debugger after making the change.
## Frequently Asked Questions
#### Why Does My Open Graph Image Work in a Browser but Not on LinkedIn?
Your browser may have cookies or access that LinkedIn does not. Test the image in a private window, verify its response headers and check your CDN logs after running LinkedIn Post Inspector. LinkedIn also warns that it cannot pull images from protected directories.
#### Can `og:image` Use a Relative URL?
Use an absolute HTTP or HTTPS URL. It removes ambiguity when the page redirects, changes hostnames or is fetched outside a normal browser session.
#### Does an Open Graph Image Have to Be 1200 × 630?
No. Open Graph does not define a required size. A 1200 × 630 image works well as a general landscape card, but each platform has its own size and file limits.
#### Can I Test an Open Graph Image on Localhost?
Not directly with a social crawler. Both the page and image need public URLs. A temporary public environment or tunnel works as long as it does not require a login.