OpenGraph Image
Community Resources:
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 Jump to heading
Usage Jump to heading
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/
url
must be URI encoded.size
(optional) can besmall
(375×_),medium
(650×_), orauto
(keep original width)format
must by an output image format supported by Eleventy Image
Samples Jump to heading
<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">