OpenGraph Image

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"
/>

From the Community

Recycling Open Graph Images for display on my Web Site

+ Add yours!

Other pages in Runtime APIs

• Screenshots
• OpenGraph Image
• IndieWeb Avatar
• Generator Image
• Hosting Image
• Sparklines