Zach’s ugly mug (his face) Zach Leatherman

Recycling Open Graph Images for display on my Web Site

A close-up of painted aluminium cans, colored like a rainbow
October 28, 2021

The Eleventy API ecosystem is growing for a fourth time.

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:

Screenshot of https://www.zachleat.com/

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.


IndieWeb Avatar for https://unsplash.com/Poster image by Nick Fewings

< Newer
How to add Authentication to your Eleventy Site
Older >
A New Eleventy Mascot from Geri Coady

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

5 Reposts

4rontenderEleventy (1.0.0-beta.3)Sir KaneNicolas HoizeyChris Samuel

28 Likes

Chris SamuelScott McCrackenAleksandr HovhannisyanDamon CookPhilippe BernardMatt BiilmannbertrandkellerMax CroftsDmytro PaniutalocalghostCSSpooky 🎃 Stephanie EcklesFynn BeckerTaylan TatlıRobin CussolMohammed Zeeshan ⬢Sir KaneNefMatheus Ligabue!Eleventy (1.0.0-beta.3)Nicolas HoizeyDillon Kearns 🌳Ashish KhareNikhil MehtaflakiLynn FisherRichardSiim Pragi4rontender
4 Comments
  1. Richard

    @twootdev

    EmBracE iT. BUiLD MetapoSsUM. YOU CouLdN'T bUild SomeTHing WOrsE tHan WHaT We haVE now.

  2. Zachscary Leatherman

    @zachleat

    I absolutely could but I appreciate the confidence 😅

  3. Chris Samuel

    @Lrnecgcysiam

    Thanks. I was checking your github repo for your site and I thought you was doing something else. Much appreciated!

  4. Eleventy 🎃🎈 v2.0.0-canary.16

    @eleven_ty

    Awesome! I wonder if you saw this one too: zachleat.com/web/automatic-… (and a follow up here zachleat.com/web/api-opengr…)

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)