Skip to navigation Skip to main content
Eleventy
Eleventy Documentation
Stable
3.0.0
Toggle Menu
Eleventy 1.93s
Astro 22.90s

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

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

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: