The Trevor Project — Saving Young LGBTQ Lives
Eleventy
Eleventy Documentation
Toggle Menu
Eleventy 1.93s
Gatsby 29.05s

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

From the Community


Other pages in API Services: