How to Use og:image:secure_url for an HTTPS Social Preview
Learn when og:image:secure_url is useful, how to pair it with og:image, and how to validate the metadata for a social preview.
og:image:secure_url is an optional Open Graph property that gives an HTTPS alternate for the image declared by og:image. If your og:image URL is already HTTPS, the Open Graph protocol does not require you to repeat it in og:image:secure_url. Add the property when you need to provide a separate secure alternate.
1. What og:image:secure_url means
Open Graph metadata describes a page when it is shared. The required basic properties include og:title, og:type, og:image, and og:url. og:image:secure_url is an optional structured property: an alternate image URL to use if the webpage requires HTTPS. It belongs to an og:image; it is not a separate, independently required preview image. See the Open Graph protocol.
Use it when the primary image URL is HTTP and you have an equivalent image available over HTTPS. When the primary URL already uses HTTPS, you can normally omit the alternate.
2. Add the metadata to your page
Put the tags in the document head. This protocol example pairs an HTTP primary image with its HTTPS alternate:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example page</title>
<meta property="og:title" content="Example page">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.example.com/article">
<meta property="og:image" content="http://example.com/ogp.jpg">
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="300">
<meta property="og:image:alt" content="A shiny red apple with a bite taken out">
</head>
<body>
<h1>Example page</h1>
</body>
</html>The HTTP primary URL above is simply the protocol’s example; it does not mean HTTP is preferred. If you have only one image URL and it is HTTPS, this simpler markup is enough:
<meta property="og:image" content="https://www.example.com/images/article-preview.jpg">
<meta property="og:image:alt" content="A red apple on a white plate">Describe what the image contains in og:image:alt; use descriptive alternative text, not a caption. The protocol recommends specifying it when og:image is present.
3. Keep structured properties with the right image
Open Graph supports multiple values by repeating a property. Put each image’s structured properties immediately after its og:image root and before the next image root. A later image starts a new group:
<meta property="og:image" content="https://www.example.com/images/social-wide.jpg">
<meta property="og:image:secure_url" content="https://cdn.example.com/images/social-wide.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="A mountain road winding through a green valley">
<meta property="og:image" content="https://www.example.com/images/social-square.png">
<meta property="og:image:secure_url" content="https://cdn.example.com/images/social-square.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="800">
<meta property="og:image:alt" content="A map pin over a simplified city map">Keep the alternate, MIME type, dimensions, and alt text beside the image they describe. When values conflict, the protocol gives preference to the first tag from top to bottom, so put your preferred image first.
4. Check the published page
- Publish the page and open its public URL.
- Inspect the document head in the delivered HTML. Confirm the metadata is present in the initial response if the page is rendered by a framework or CMS.
- Check that the primary image and secure alternate are the intended files, and that the alternate URL uses HTTPS.
- Open the image URL directly over HTTPS and confirm it is reachable without an interactive login or browser-only state.
- Use Facebook Object Debugger, named by the protocol as Facebook’s official parser and debugger, to inspect Facebook’s interpretation of the page.
A parser check is useful for diagnosing markup, but this source does not establish how other platforms interpret the tags or how their preview caches refresh.
5. Troubleshooting
| Symptom | Likely cause | What to check |
|---|---|---|
| The preview has no image | The page does not expose a valid og:image, or the image URL cannot be fetched. |
Confirm the root property is in the page head and the image URL is publicly reachable. |
| The preview still shows the HTTP image | The secure alternate is missing, malformed, or attached to a different image group. | Place og:image:secure_url immediately after the intended og:image and verify the URL is HTTPS. |
| The wrong image is selected | There are repeated image values or conflicting tags, and ordering affects preference. | Put the preferred og:image first and keep its structured properties together before the next image root. |
| Updated metadata is not reflected in a preview | The parser or platform may be showing a previously fetched preview. | Inspect the currently published HTML with the official parser. The protocol source does not specify cache refresh behavior for other platforms. |
| Alt text is being used like a caption | The value describes presentation instead of image contents. | Rewrite og:image:alt to describe what is depicted, rather than adding a caption or promotional message. |
6. Performance, reliability, and cost
og:image:secure_url is metadata; adding the tag does not itself transform, host, or optimize the image. Reliability depends on serving the referenced image at a stable HTTPS URL that the preview parser can reach. If you provide both primary and alternate URLs, keep their image content aligned so the alternate remains a true counterpart.
This implementation does not require a screenshot service. If you are generating page screenshots for documentation, previews, or automated workflows, ScreenshotNeo is a website screenshot API and MCP server. Its API returns PNG, JPEG, WebP, or PDF; the service removes supported consent banners, newsletter popups, and chat widgets before capture, and only clean shots are billed. It also offers an MCP server for AI agents, plus a free plan of 1,000 shots per month with no card. See ScreenshotNeo for product details.
7. Or skip the browser setup
For a screenshot of a page, ScreenshotNeo takes one GET request. See the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpimport requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.
8. FAQ
Do I need og:image:secure_url?
No, not if your og:image already points to the HTTPS image you want used. The secure URL is an optional alternate.
Can og:image:secure_url stand alone?
It is a structured property of an og:image, so declare the root image first and keep the alternate beside it.
Where can I check Facebook’s reading of the tags?
The Open Graph protocol identifies Facebook Object Debugger as Facebook’s official parser and debugger.
