Zach’s ugly mug (his face)

Zach Leatherman

If I work really hard on my Open Graph Images, People will share my Blog Posts

August 01, 2021 #7 Popular

Open Graph images. Those little images that show up when your site is shared on social media. The ones for my site were… bad. My default was to use one, huge, boring branded image for everything—which provided no extra value and just cluttered up y’alls feeds (sorry!). I wanted to make them better and here’s what I did.

The Lazy Method

While building a screenshot cloud service for 11ty.dev, it became obvious that I should add an Open Graph size to use screenshots as Open Graph images. You can see this in use on the Eleventy docs pages:

  • Navigate to https://www.11ty.dev/docs/
  • With the screenshot service in place, it’s just one line for a custom Open Graph image: <meta property="og:image" content="https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.11ty.dev%2Fdocs%2F/opengraph/">
  • The social card image looks like this: Open Graph images for 11ty.dev/docs/

For the amount of work this took to setup, it was totally worth it (one <meta>!). But I wanted to take it to the next level for my personal blog (with a long term goal of maybe convincing my colleagues to use something like this on netlify.com 😅).

The Underwhelming Method

In the past, I did experiment a bit with using the SVG to raster image feature of Eleventy Image (via sharp) but it wasn’t quite what I wanted. It had the benefit of being much faster than HTML-based methods (usually based on Puppeteer) but I ended up having to slog through a bunch of hand-written SVG to get it to look how I wanted to look. I’ll admit, I’m not as productive at hand-authoring SVG as I’d like.

The Fancy Method

With those experiences under my belt, I decided to custom design a page on my site (source code) that would iterate over each blog post and could serve as the target for my screenshot service. This provided a couple of benefits:

  • I can use all of the existing HTML/CSS/JS/Fonts already in use on my site. That means fake browser chrome, custom Twitter avatars, Lighthouse scores, popularity ranks, among others!
  • I don’t have to run Puppeteer locally. I try to avoid this when possible—it is awesome but it slows down the build (a lot).

Each individual blog post has a dedicated Open Graph image page, for example /opengraph/web/automatic-opengraph/ (Fair warning: this page is not using responsive web design principles. It is specifically created for the 1200×630 aspect ratio).

If I want a custom background image for a single post’s open graph image, I add front matter with the image url:

---
seo:
openGraphBackgroundImage: /og/sources/graphpaper.jpg
---

Next, in my base Eleventy layout file (source code) I point the Open Graph page for each specific blog post towards the screenshot service to capture the image:

https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fopengraph%2Fweb%2Fautomatic-opengraph%2F/opengraph/_202111_1/

It looks like this:

I wanted the image to have the post title, my avatar, the published date, and the URL of the page.

For bonus metadata, here’s one with a Lighthouse score attached (updated regularly via Speedlify), a webmentions count, and even the page weight (e.g. 226 KiB, also driven by Speedlify):

Bonus Features

DevTools Device Emulation

Inside of Chrome Devtools, I added a custom Emulated Device specifically for Open Graph image formats to test the layouts.

Drop down select of Chrome Devtools Emulated Devices

Social Card Preview

I added a little <details> on the bottom of each blog post so that I could test the social card image preview. I’ll probably pivot this to a link-based sharing widget at some point or combine into my existing Retweet to Share component.

On-demand Builder Cache Busting

The Eleventy Screenshot service is an independent project that uses On-demand Builders to cache screenshot image content to Netlify’s CDN. That cache is pretty sticky. The easiest way to invalidate the cache is to trigger a Screenshot service build on Netlify, but that would reset the cache for all screenshots saved by the service, which is too heavy. It has been a common request for a more granular Netlify API to reset pieces of the cache but during the development of this project I realized that we can handle this manually on the app side using our old friend, the Cache Buster URL.

If the old URL looked like this https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fopengraph%2Fweb%2Fcomprehensive-webfonts%2F/opengraph/, I can add an arbitrary cache busting key to the end of it (prefixed by an underscore to identify it anywhere in the URL).

If I generated that key with today’s date (e.g. https://v1.screenshot.11ty.dev/https%3A%2F%2Fwww.zachleat.com%2Fopengraph%2Fweb%2Fcomprehensive-webfonts%2F/opengraph/_20210803/), it would generate new images every day without the screenshot service needing to invalidate the entire cache. (Some related discussion about this on Twitter)

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
Fire SVG animations (SMIL) when the SVG is visible
Next
Building an Automated Screenshot Service on Netlify in ~140 Lines of Code

7 Retweets

Matthias Ott🔴 André Jaenisch 🔴Jon KupermanLuis ConfrariaDavid EastMWDelaneyFynn Becker
94 Likes
Denver Prophit Jr.Philippe BernardIsaacJohn TurtonmorbidickChristian | 👨🏼‍💻 | 👨🏼‍🎨Eric WallaceBrian DeVries 🔨Jordan ScalesPaul Shryock (he/him)Yevhen OrlovDana Ross 🇺🇸 🏳️‍🌈Charlie GDavo GalavottiErik HoffmanrazhHaroen ViaenebertrandkellerRhian van EschAdri Van Houdt 💉💉 🏳️‍🌈Ketan ChandekarAmrita Chanda 🏳️‍🌈👩🏾‍💻🍸Kyle Mitofsky #BLMThomas SteinernicLennyTanner DolbyJohn MeyerhoferSanti CrosR. Ilham SastronegoroMatt Biilmannmason conkrightNaNty NaN ProblemsJake DohmRobin CussolEileen WebbBrian MuenzenmeyerMark NoonanMark BuskbjergAdam Di MarioTabsAnders GrendstadbakkRicardo Blanch PMJon KupermanPaul SchaeferMatthias OttAleksandr HovhannisyanAman Mittal ⚛️☕🖖🥑David EastonalfhirJody DonettiBen SeymourPrototypr👁️✨AadeshᴅᴇʀᴇᴋPaul IrishColin FahrionMark Hougaard JensenCristóferson BuenoAlexis DeveriaMax StoiberMatt LehrerjaymeeRyan Mulligan🔴 André Jaenisch 🔴SterenCarles MuiñosStephen MastersRhubarbJuhisJason SackeyEthan MarcotteMarcoSia KaramalegosDave MethvinJabran RafiqueKatie Sylor-MillerDavid EastBen HolmesTom VanAntwerpdies das 🦂 contentyour favorite JackieMike💀HarleyNate MooreDoug WilsonBoris 😷💉💉Fynn BeckerAna RodriguesJohannes 👨‍💻Eric PortisManuhenry ✷Dave RupertDavid K. 🎹
18 Replies
  1. Philippe Bernard

    Philippe Bernard @ph_bernard #

    Thanks! Yep, I saw your other article about OG (very interesting, and that's how I found your ImageMagick script)... I expect to build something that might help you convince your colleagues at Netlify 😁

  2. Christian | 👨🏼‍💻 | 👨🏼‍🎨

    Christian | 👨🏼‍💻 | 👨🏼‍🎨 @ctrl_alt_aldr #

    I love everything about this, thanks for sharing! I will try and adopt a similar method to my blog when I get around to it 😊

  3. Zach Leatherman

    Zach Leatherman @zachleat #

    Fixed, thank you!

  4. Peter Wilson 🏳️‍🌈

    Peter Wilson 🏳️‍🌈 @pwcc #

    Slight bug in your RSS feeds, the OG image shows up as its own article. It does look lovely at full screen though.

  5. Dave Rupert

    Dave Rupert @davatron5000 #

    To my credit, it’s not on 0.7.1 anymore. It’s at least on 0.10.

  6. castastrophe

    castastrophe @castastrophee #

    _Almost…_

  7. Erik Kroes 🏔

    Erik Kroes 🏔 @erikkroes #

    First and latest user at the same time 👍🏿

  8. Zach Leatherman

    Zach Leatherman @zachleat #

    Dave your migration is almost as old as Eleventy 😅

  9. Dave Rupert

    Dave Rupert @davatron5000 #

    This (almost) inspires me to finish my 3yr Eleventy migration.

  10. Zach Leatherman

    Zach Leatherman @zachleat #

    glory be to CSS custom properties

  11. Zach Leatherman

    Zach Leatherman @zachleat #

    Awesome 🙌🏻

  12. Zach Leatherman

    Zach Leatherman @zachleat #

    why thank you, Tim!

  13. Florens Verschelde

    Florens Verschelde @fvsch #

    may be

  14. Zach Leatherman

    Zach Leatherman @zachleat #

    I… should that be hyphenated

  15. Dave Rupert

    Dave Rupert @davatron5000 #

    I like the background trick!

  16. Aleksandr Hovhannisyan

    Aleksandr Hovhannisyan @hovhaDovah #

    I really need to step up my game on this and start automating my OG thumbnails! I do all mine by hand. Also, thank you—your hamburger menu made me lol 😄

  17. Tim Kadlec

    Tim Kadlec @tkadlec #

    SUPER snazzy setup!

  18. Florens Verschelde

    Florens Verschelde @fvsch #

    You HaD me at HARD on

    110 Mentions
    1. aayugcreation.com #

      Show original post There has been a lot of talk about automated social images lately. GitHub has created its own. A WordPress plugin has been acquired by Jetpack. There is definitely interest! People like Ryan Filler and Zach Leatherman have implemented social images on their websites. They had to … Truncated

    2. Tavarro

      Tavarro https://tavarro.com/magazine/author/bouwer/ #

      Show original post There has been a lot of talk about automated social images lately. GitHub has created its own. A WordPress plugin has been acquired by Jetpack. There is definitely interest! People like Ryan Filler and Zach Leatherman have implemented social images on their websites. They had to … Truncated

    3. www.codeificant.com #

      Show original post Facebook Twitter LinkedIn Pinterest … Truncated

    4. wpdesigns.live #

      Show original post There has been a lot of talk about automated social images lately. GitHub has created its own. A WordPress plugin has been acquired by Jetpack. There is definitely interest! People like Ryan Filler and Zach Leatherman have implemented social images on their websites. They had to … Truncated

    5. techupd.com #

    6. gigatechnews.com #

    7. lastarcher.net #

      There was plenty of speak about automated social photos these days. GitHub has created its own. A WordPress plugin has been acquired by Jetpack. There may be positively curiosity! Folks like Ryan Filler and Zach Leatherman have applied social photos on their web sites. They neede… Truncated

    8. www.67nj.org #

    9. www.sacramentowebdesigngroup.com #

    10. tutorialsart.com #

    11. hnikoloski.com #

    12. css-tricks.com #

    13. wpguynews.com #

    14. droppost.in #

    15. marketingsolution.com.au #

      Show original post Create Your Own Automated Social Images With Resoc October 30, 2021 Web Development No Comments There has been a lot of talk about automated social images lately. GitHub has created its own. A WordPress plugin has been acquired by Jetpack. There is definitely … Truncated

    16. pikopong.com #

    17. blogs.thebitx.com #

    18. style-tricks.com #

    19. www.webhostpolice.com #

    20. admin https://www.websjohn.com/author/admin/ #

      There has been a lot of talk about automated social images lately. GitHub has created its own. A WordPress plugin has been acquired by Jetpack. There is definitely interest! People like Ryan Filler and Zach Leatherman have implemented social images on their websites. They had to … Truncated

    21. by Editor https://expskill.com/author/kamalkhandelwal29/ #

      Table of Contents What are social images again? From Level 0 to Level 3Level 0 Level 1 Level 2 Level 3 Let’s start a blog with blog posts that have unique social images One image template to rule them all What about the image? Social images automation Let’s deploy this Conclu… Truncated

    22. Eco Web Hosting

      Eco Web Hosting @ecowebhostinguk #

      Check out this great way to make your social sharing images stand out from the crowd. Courtesy of @zachleat zachleat.com/web/automatic-…

    23. Holden Madagame

      Holden Madagame @HMadagame #

      "IF I WORK REALLY HARD ON MY OPEN GRAPH IMAGES, PEOPLE WILL SHARE MY BLOG POSTS" It worked, @zachleat zachleat.com/web/automatic-… #opengraphimages #frontend #eleventy #11ty

    24. studioxrio.org #

    25. Kim Larsen

      Kim Larsen @kimlundinlarsen #

      If I work really hard on my Open Graph images, people will share my blog posts - zachleat.com/web/automatic-… #HTML

    26. diff.blog 👩‍💻

      diff.blog 👩‍💻 @diffblog #

      If I work really hard on my Open Graph images, people will share my blog posts. (@css) #socialmediaimages #opengraph #link zachleat.com/web/automatic-…

    27. Dan Denney

      Dan Denney @dandenney #

      It worked! If I work really hard on my Open Graph Images, People will share my Blog Posts—zachleat.com zachleat.com/web/automatic-…

    28. tipsxd.com #

    29. tipsxd.com #

    30. tipsxd.com #

    31. tipsxd.com #

    32. tipsxd.com #

    33. tipsxd.com #

    34. tipsxd.com #

    35. tipsxd.com #

    36. tipsxd.com #

    37. infiniti-cs-news.com #

    38. wpdesigns.live #

      Show original post Open Graph images. Those little images that show up when your site is shared on social media. The ones for my site were… bad. My default was to use one, huge, boring branded image for everything—which provided no extra value and just cluttered up y’alls feeds (sorry!). I wanted t… Truncated

    39. wpdesigns.live #

      Show original post Open Graph images. Those little images that show up when your site is shared on social media. The ones for my site were… bad. My default was to use one, huge, boring branded image for everything—which provided no extra value and just cluttered up y’alls feeds (sorry!). I wanted t… Truncated

    40. wpdesigns.live #

      Show original post Open Graph images. Those little images that show up when your site is shared on social media. The ones for my site were… bad. My default was to use one, huge, boring branded image for everything—which provided no extra value and just cluttered up y’alls feeds (sorry!). I wanted t… Truncated

    41. wpdesigns.live #

      Show original post Open Graph images. Those little images that show up when your site is shared on social media. The ones for my site were… bad. My default was to use one, huge, boring branded image for everything—which provided no extra value and just cluttered up y’alls feeds (sorry!). I wanted t… Truncated

    42. wpdesigns.live #

      Show original post Open Graph images. Those little images that show up when your site is shared on social media. The ones for my site were… bad. My default was to use one, huge, boring branded image for everything—which provided no extra value and just cluttered up y’alls feeds (sorry!). I wanted t… Truncated

    43. wpdesigns.live #

      Show original post Open Graph images. Those little images that show up when your site is shared on social media. The ones for my site were… bad. My default was to use one, huge, boring branded image for everything—which provided no extra value and just cluttered up y’alls feeds (sorry!). I wanted t… Truncated

    44. wpdesigns.live #

      Show original post Open Graph images. Those little images that show up when your site is shared on social media. The ones for my site were… bad. My default was to use one, huge, boring branded image for everything—which provided no extra value and just cluttered up y’alls feeds (sorry!). I wanted t… Truncated

    45. wpdesigns.live #

      Show original post Open Graph images. Those little images that show up when your site is shared on social media. The ones for my site were… bad. My default was to use one, huge, boring branded image for everything—which provided no extra value and just cluttered up y’alls feeds (sorry!). I wanted t… Truncated

    46. technologynews.biz #

    47. wpguynews.com #

    48. techupd.com #

    49. techupd.com #

    50. techupd.com #

    51. techupd.com #

    52. techupd.com #

    53. techupd.com #

    54. techupd.com #

    55. techupd.com #

    56. techupd.com #

    57. dailytechpage.com #

    58. dailytechpage.com #

    59. dailytechpage.com #

    60. dailytechpage.com #

    61. dailytechpage.com #

    62. dailytechpage.com #

    63. dailytechpage.com #

    64. dailytechpage.com #

    65. www.sacramentowebdesigngroup.com #

    66. www.codeificant.com #

      Show original post Facebook Twitter LinkedIn Pinterest … Truncated

    67. www.codeificant.com #

      Show original post Facebook Twitter LinkedIn Pinterest … Truncated

    68. www.codeificant.com #

      Show original post Facebook Twitter LinkedIn Pinterest … Truncated

    69. www.codeificant.com #

      Show original post Facebook Twitter LinkedIn Pinterest … Truncated

    70. www.codeificant.com #

      Show original post Facebook Twitter LinkedIn Pinterest … Truncated

    71. www.codeificant.com #

      Show original post Facebook Twitter LinkedIn Pinterest … Truncated

    72. www.codeificant.com #

      Show original post Facebook Twitter LinkedIn Pinterest … Truncated

    73. www.codeificant.com #

      Show original post Facebook Twitter LinkedIn Pinterest … Truncated

    74. www.codeificant.com #

      Show original post Facebook Twitter LinkedIn Pinterest … Truncated

    75. hnikoloski.com #

    76. blogs.thebitx.com #

    77. gigatechnews.com #

    78. wpnewshub.com #

    79. GLOBALYNC - Humanity

      GLOBALYNC - Humanity @globalync_net #

      If I work really hard on my Open Graph Images, People will share my Blog Posts—zachleat.com #WebDesign via twinybots.ch zachleat.com/web/automatic-…

    80. codinghindi.in #

    81. pikopong.com #

    82. neoweb4u.com #

    83. Chris Heilmann

      Chris Heilmann @codepo8 #

      👉🏼 “If I work really hard on my Open Graph Images, People will share my Blog Posts” 🔗 zachleat.com/web/automatic-… @zachleat on using puppeteer to automatically build social media preview images.

    84. style-tricks.com #

    85. webchilli.co.za #

      Show original post Zach did that thing where each of his blog posts has a special URL with the design of social image card that is screenshat by a headless browser (like Puppeteer) and used as a true meta Open Graph image, meaning it’s displayed on Twitter, Facebook, iMessage, Slack, Discord, and w… Truncated

    86. marketingsolution.com.au #

      Show original post if i wORK REaLly haRD On MY OpEn GRAPH ImAgEs, PEopLe wiLL ShaRe mY BlOG poStS. sEptEmber 3, 2021 WeB dEvEloPmenT nO cOmmEntS ZacH DID thAT tHing wHeRe eaCh OF HIs bLOg poSTs HAS A sPECIaL urL wIth tHe deSIGN of soCial IMagE cArD that iS SCrEENShAt BY A HeaDle… Truncated

    87. VisionSnap

      VisionSnap @VisionSnap #

      if i woRk REALLy hARD on MY oPen gRApH imAGes, PEoPLE WiLl sHArE My BLOg poSts. CsS trICKs zAcHLeAT.coM/WEB/auTOMaTiC-…

    88. graphicdon.com #

    89. websitedevelopment.top #

    90. websitedevelopment.top #

    91. websitedevelopment.top #

    92. www.67nj.org #

    93. techsumo.net #

    94. techsumo.net #

    95. techsumo.net #

    96. Feedpushr feeds.

      Feedpushr feeds. @feedpushr #

      If I work really hard on my Open Graph images, people will share my blog posts. zachleat.com/web/automatic-…

    97. techsumo.net #

    98. techsumo.net #

    99. admin https://www.pixellyft.com/author/admin/ #

      oPEn GRaPH IMaGEs. ThOse lITtlE IMAGeS thAT shoW up wHEN yOUR SiTE IS sHARED on SOcial MEdiA. thE oNEs FoR MY SitE WErE… BAD. MY defaUlt was TO USE One, HuGe, BoRInG branDeD IMAgE FOr everYThiNg—whiCh PRovIdED NO eXTRa VAluE ANd JuST CLUttERed UP Y’AlLS feeds (SORry!). i WaNTed T… Truncated

    100. Actually,

      Actually, @eaton #

      In other news, @zachleat's post about using serverless functions to generate custom web site snapshots and custom OpenGraph images is _the hotness_. zachleat.com/web/automatic-…

    101. Friday Front-End

      Friday Front-End @fridayfrontend #

      If I work really hard on my Open Graph Images, People will share my Blog Posts, by @zachleat zachleat.com/web/automatic-…

    102. Pinboard Popular

      Pinboard Popular @pinboard_pop #

      If I work really hard on my Open Graph Images, People will Share my Blog Posts—zachleat.com zachleat.com/web/automatic-…

    103. 51posts https://51posts.com/author/51posts/ #

      oPen GRAph IMageS. thoSE lITtlE iMAGES that SHOW UP when Your site iS SHAreD oN socIAL mEdIa. The oneS foR my SiTE WErE… BAd. My deFAult WaS To usE onE, HUGe, BoRIng BraNDEd iMAge fOr EveRytHiNg—WhIcH PrOvIDEd No eXTrA VAluE anD juST CluttERED up Y’ALlS fEEDs (sorRy!). I WaNtEd T… Truncated

    104. 51posts https://51posts.com/author/51posts/ #

      opeN Graph IMaGeS. THose liTTLe imAGEs THAt shoW Up whEN YOuR SItE Is sHARED on sOCIaL mEdIa. THe ONEs FOr my site WeRE… baD. mY DefAult WAS to use ONE, HUgE, BOring BRaNDed IMaGe FOr EVerythiNg—whiCH ProVIdEd no ExtrA vALuE aNd JUST clUTTErED UP y’ALLS feeDs (sOrry!). I wAnTeD t… Truncated

    105. 51posts https://51posts.com/author/51posts/ #

      oPen grApH ImAgEs. thOsE lIttlE imagEs THaT sHoW uP WHen yOUR siTe Is sHAreD ON soCiAL MEDIa. the oNes FOR my SIte wERe… BaD. MY defAuLT was tO UsE OnE, HUgE, bOrING bRANDeD iMaGe FoR evErythInG—whICH pROViDEd NO exTRa vaLuE ANd JusT clutteREd up y’aLLs FEEDS (SORrY!). i WAntEd T… Truncated

    106. 51posts https://51posts.com/author/51posts/ #

      oPEn grAPh ImaGEs. ThoSE LittLe iMAges ThAT sHow uP WHen your Site Is shaRED On sociaL MediA. ThE OnEs FOR My SIte WeRE… BaD. My DefaULt WAs To UsE one, Huge, BorInG BrANdED ImAgE FOr eveRYtHING—WHIcH PRovIdEd No eXtrA vALUe AND JUsT cluTTEred Up y’AllS feeDs (soRrY!). i WaNteD t… Truncated

    107. Michael Spreu

      Michael Spreu @michaelspreu #

      zachleat.com/web/automatic-…

    108. Eduardo Bouças

      Eduardo Bouças @eduardoboucas #

      Nothing to see here, just Zach being his awesome self. 🤯

    109. Ryan Filler

      Ryan Filler @ryanfiller_ #

      I really like this approach as an alternative to what I did here - ryanfiller.com/blog/automatic… I've been meaning to take another look at my code for this, Zach's approach of just returning `"content-type": "image/svg+xml"` from a function endpoint is really inspring.

    110. Eric Portis

      Eric Portis @etportis #

      The person that shared this is awesome

    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)