The Trevor Project — Saving Young LGBTQ Lives
Eleventy
The possum is Eleventy’s mascot

Eleventy Documentation

This is an older version of Eleventy. Go to the newest Eleventy docs (current path: /docs/services/opengraph/) or the full release history.
Menu

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 #

Deploy to Netlify

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/

Samples #

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