Skip to content

A service that returns an optimized OpenGraph Image from a domain name input.

Notifications You must be signed in to change notification settings

11ty/api-opengraph-image

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

46 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

11ty Logo

Open Graph Image API

A runtime service to return optimized Open Graph images from a URL. Works with:

  1. <meta name="og:image:secure_url">
  2. <meta name="og:image">
  3. <meta property="og:image">
  4. <meta name="twitter:image">

Usage

URLs have the formats:

/:url/
/:url/:size/
/:url/:size/:format/
/:url/:size/:format/onerror/
  • 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 (auto is supported)
/:url/onerror/
/:url/:size/onerror/
/:url/:size/:format/onerror/
  • Appending the string value onerror to any valid URL format will return empty content (no default image) if an opengraph image is not found at the target URL. This will trigger <img onerror> in the browser which you can handle on the client (e.g. <img onerror="this.remove()"> to remove the image).

Demos

OpenGraph Image for netlify.com

OpenGraph Image for 11ty.dev

OpenGraph Image for zachleat.com

Advanced: Manual Cache Busting

If the images aren’t updating at a high enough frequency you can pass in your own cache busting key using an underscore prefix _ after your URL.

This can be any arbitrary string tied to your unique build, here’s an example that uses today’s date.

/:url/_20210802/
/:url/:size/_20210802/
/:url/:size/:format/_20210802/

About

A service that returns an optimized OpenGraph Image from a domain name input.

Topics

Resources

Stars

Watchers

Forks