Instructions to implement this directly in the website

[xplosionmind]

I am already deploying my website with Netlify, and it could be super useful if a tutorial could be provided explaining how to use this feature directly within the functions of the website itself, without needing to deploy another one dedicated to this tank only.

[xurizaemon]

Answering my own question here, which hopefully also answers yours! (Once I realised "tank" was "task" I felt more confident about this.)

I was able to use this library in a project by doing the following:

First, slightly odd install command to add this repo as a dependency, with the name "@11ty/api-opengraph-image" instead of the default name from this package's package.json (consistency fix in #9):

npm i --save-dev '@11ty/api-opengraph-image@github:11ty/api-opengraph-image'

Then this code:

// nb: This line depends on #9 or `npm install` from above, or import from the installed package name.
import OgImageHtml from '@11ty/api-opengraph-image';

let url = 'https://www.zachleat.com/';
let og = new OgImageHtml(url);
await og.fetch();
let imageUrls = await(og.getImages());

You'll see some debug (or at least, I did):

Found urls: [
  'https://screenshot.11ty.app/https%3A%2F%2Fwww.zachleat.com%2F%3Fcache%3D_20251023/opengraph/'
]

And your OG image URLs are now in imageUrls: