| CARVIEW |
Select Language
HTTP/2 200
access-control-allow-origin: *
age: 0
cache-control: public, max-age=0, must-revalidate
content-disposition: inline; filename="opengraph"
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Sat, 11 Oct 2025 10:45:00 GMT
etag: W/"d98b21a0cc7b23b45aa245f4fcda5cf8"
last-modified: Sat, 11 Oct 2025 10:45:00 GMT
server: Vercel
strict-transport-security: max-age=63072000
x-vercel-cache: HIT
x-vercel-id: bom1::v4cbn-1760179499709-ab0c0aa51109
OpenGraph Image — Eleventy
- Stable
3.1.2- Canary
4.0.0-alpha.4
- Guide
Guide
- Plugins
- Services
OpenGraph Image
On this page
Feed this runtime service a URL and it will extract an optimized OpenGraph image using these sources:
<meta name="og:image:secure_url"><meta name="og:image"><meta property="og:image"><meta name="twitter:image">
Open Source
Usage
Try it out on the Eleventy API Explorer.
Image URLs have the format:
https://v1.opengraph.11ty.dev/:url/
https://v1.opengraph.11ty.dev/:url/:size/
https://v1.opengraph.11ty.dev/:url/:size/:format/
urlmust be URI encoded.size(optional) can besmall(375×),medium(650×), orauto(keep original width)formatmust by an output image format supported by Eleventy Image
Samples
<img
src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2F/small/"
alt="OpenGraph image for 11ty.dev"
loading="lazy"
decoding="async"
width="375"
height="197"
/><img
src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.a11yproject.com%2F/small/"
alt="OpenGraph image for a11yproject.com"
loading="lazy"
decoding="async"
width="375"
height="197"
/><img
src="https://v1.opengraph.11ty.dev/https%3A%2F%2Fwww.netlify.com%2F/small/"
alt="OpenGraph image for netlify.com"
loading="lazy"
decoding="async"
width="375"
height="197"
/>