OpenGraph Image

Community Resources:

Recycling Open Graph Images for display on my Web Site

+ Add yours!

Feed this runtime service a URL and it will extract an optimized OpenGraph image using these sources:

1. <meta name="og:image:secure_url">
2. <meta name="og:image">
3. <meta property="og:image">
4. <meta name="twitter:image">

Open Source #

• 11ty/api-opengraph-image on GitHub

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/

• url must be URI encoded.
• size (optional) can be small (375×_), medium (650×_), or auto (keep original width)
• format must 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">

Other pages in API Services:

• Screenshots
• OpenGraph Image
• IndieWeb Avatar
• Sparklines