Recycling Open Graph Images for display on my Web Site

The Eleventy API ecosystem is growing for a fourth time.

• Screenshots
• Sparklines
• IndieWeb Avatars
• And now Open Graph images.

Get a sneak peek at an early version of the Eleventy API Explorer.

Open Graph images are those little pictures that show up when your site is shared on social media. I made the ones on my site better recently.

And while it was nice to have some prettier things displaying on social media—I wanted to reuse the visuals on my own web site too. So, I built an image service that would find the Open Graph images for a web page.

I’m now using it on my home page:

The image service:

1. Takes a URL
2. Looks at the markup for that URL and finds the Open Graph image in use
3. Resizes and optimizes the image
4. Returns the result

Now I’d just like to pause for a second and appreciate the authoring workflow when I create a new blog post: I create a new markdown file. I pick a background image to use (usually from Unsplash) and point to that image path in the front matter of my markdown file.

The Open Graph image is created automatically and resized/optimized. The preview thumbnail on my home page now reuses that same Open Graph image for nice visuals on my own site. It’s even nicer if I add a YouTube video to the front matter for the post—the cover image is downloaded from the video and used automatically.

When I want to make changes, I do so in one place and it cascades to all of these different spots automatically.

Attribution

For me, this all ties back to good visual attribution. Of course, this example is very self serving—but it works with any external site too!

When I want to link to a person: I’ll use their IndieWeb Avatar next to their name.

When I want to link to a specific web page, I now have two options:

• Use the optimized Open Graph image for that page.
• Use an Open Graph sized screenshot for that page.

Nicolas Hoizey has already suggested that this service fall back to the screenshot if the Open Graph image is not found—great idea!

A love letter to On-demand Builders

This Eleventy API service renaissance is owed largely to Netlify’s On-demand Builders feature. Running a JavaScript file in the cloud and caching the output on the Edge CDN for all repeat requests (with no extra cost in Functions quotas) is incredibly powerful. It’s awesome. I love it. (Please do remember that I am employed by Netlify).

I’ve already built four hosted services and made sure that the Eleventy Serverless plugin was compatible with the feature. I can absolutely say that none of those things would exist without On-demand Builders. I already have more ideas for more stuff—this is an awesome time to be a builder, y’all!

Demos

Here are a few examples, fetching Open Graph images from a bunch of sites around the web:

The above Open Graph image is using a YouTube video cover image in the background.

I have now realized that I am slowly creating all of the building blocks necessary to create a social network. Please send help.