OpenGraph 图像

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

Open Source

• 11ty/api-opengraph-image on GitHub

Usage

Try it out on the Eleventy API Explorer.

Image URLs have the format:

https://opengraph.w3c.cool/:url/
https://opengraph.w3c.cool/:url/:size/
https://opengraph.w3c.cool/: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://opengraph.w3c.cool/https%3A%2F%2Fblog.w3c.cool%2F/small/"
	alt="OpenGraph image for blog.w3c.cool"
	loading="lazy"
	decoding="async"
	width="375"
	height="197"
/>

<img
	src="https://opengraph.w3c.cool/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://opengraph.w3c.cool/https%3A%2F%2Fwww.netlify.com%2F/small/"
	alt="OpenGraph image for netlify.com"
	loading="lazy"
	decoding="async"
	width="375"
	height="197"
/>

来自社区

Eleventy Open Graph API

+ 添加你的！

其他页面在 Runtime APIs

• 截图
• OpenGraph 图像
• IndieWeb 头像
• 生成器图像
• 托管图像
• 迷你图