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.
TL;DR: Fix a Missing Open Graph Image
- Check the HTML returned by the live page and confirm that
og:imagecontains the full public image URL. - Open that image URL in an incognito window, then check its status and
Content-Typewithcurlor a 3rd party verifier. - Make sure the image does not require cookies and is not being blocked by a CDN, firewall or hotlink rule.
- Use a normal web image format and dimensions. A 1200 × 630 PNG or JPEG under 1 MB is a good default.
- 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:
<meta property="og:title" content="How to Grow Tomatoes on a Balcony">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/guides/balcony-tomatoes">
<meta property="og:image" content="https://example.com/images/balcony-tomatoes.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Tomato plants growing in containers on a balcony">
The Open Graph protocol 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:
Open the browser console and run:
document.querySelector('meta[property="og:image"]')?.contentThis returns the first
og:imagevalue, orundefinedif the tag is missing.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.
Paste the page URL into a third-party checker such as the Social Card Previewer. 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:
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:
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/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 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 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:
If the image URL previously returned an error, consider publishing the corrected file at a new path and updating og:image:
<meta property="og:image" content="https://example.com/images/balcony-tomatoes-v2.png">
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.