Zach’s ugly mug (his face)

Zach Leatherman

Recycling Open Graph Images for display on my Web Site

October 28, 2021 #18 Popular

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:

OpenGraph image for https://www.zachleat.com/web/state-of-eleventy/

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

OpenGraph image for https://www.netlify.com/blog/2021/10/25/faster-more-reliable-page-loads-with-update-to-on-demand-builders/
OpenGraph image for https://css-tricks.com/
OpenGraph image for https://responsiblejs.dev/
OpenGraph image for https://million-devs.netlify.com/
OpenGraph image for https://jamstackconf.com/

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


Open Graph post background image by Nick Fewings on Unsplash.

Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like IndieWeb Avatar for https://jamstackconf.com/Jamstack Conf,btconf’s AvatarBeyond Tellerrand, IndieWeb Avatar for https://smashingconf.com/Smashing Conference,CSSConf’s AvatarCSSConf, and IndieWeb Avatar for https://www.whitehouse.govThe White House. He is an emeritus of IndieWeb Avatar for https://www.filamentgroup.comFilament Group, nejsconf’s AvatarNEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Previous
How to add Authentication to your Eleventy Site
Next
A New Eleventy Mascot from Geri Coady

4 Retweets

Nicolas HoizeySir KaneEleventy (1.0.0-beta.3)4rontender
27 Likes
Scott McCrackenAleksandr HovhannisyanDamon CookPhilippe BernardMatt BiilmannMax CroftsbertrandkellerDmytro PaniutaCSSpooky 🎃 Stephanie EckleslocalghostFynn BeckerRobin CussolTaylan TatlıSir KaneMohammed Zeeshan ⬢Matheus Ligabue!NefEleventy (1.0.0-beta.3)Dillon Kearns 🌳Nicolas HoizeyNikhil MehtaAshish KhareflakiRichardLynn FisherSiim Pragi4rontender
2 Replies
  1. Zachscary Leatherman

    Zachscary Leatherman @zachleat #

    I absolutely could but I appreciate the confidence 😅

  2. Richard

    Richard @twootdev #

    eMBRAcE it. BuIlD MEtApOSsUm. YOu cOULdn't BUIlD SomethiNG WORSE THaN WhAt We HaVe now.

    Webmentions
      Social Card Image Preview

      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)