Skip to navigation Skip to main content
11ty Logo Sustainability Fundraising
Eleventy
Eleventy Documentation
Stable
2.0.1
Canary
3.0.0-alpha.16
Toggle Menu
Eleventy 5.81s
Remix 40.14s

OpenGraph Image

Contents

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 Jump to heading

Deploy to Netlify

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/

Samples Jump to heading

OpenGraph image for 11ty.dev
<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"
/>
OpenGraph image for a11yproject.com
<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"
/>
OpenGraph image for netlify.com
<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: