Twitter X recently removed headlines and descriptions from link previews, in the name of “esthetics.” Inspired by Steph Ango, while we try not to run our business on the whims of a social media platform, this change did push us into making a change we’ve been meaning to for awhile: adding social preview images for our blog posts.
For example, this is now what you’ll see when you share this post:
This is useful and looks better than what we had before, and was easier to implement than expected. That’s all thanks to a package we found via 11ty Rocks that pretty much gave us everything out of the box: eleventy-plugin-social-images (thanks Stephanie!).
For now, this website and blog is hosted via Github Pages and made with Eleventy (11ty). That eleventy-plugin-social-images package configures a script that runs after your 11ty builds, which uses puppeteer to create post images based on the title. The installation instructions are pretty thorough, so I won’t repeat them here, but all we had to was:
- Add a social-image script and include it after our build step
- Add a nunjucks file that creates a json file with our post titles
- Add a template that uses that json to output a design (like above)
- Add a line in our Github Workflow build script to ensure puppeteer uses headless Chrome
That’s it, and all those things are clear in the instructions. If you want something like this but you’re using a different static site generator than 11ty, I’m sure there’s a similar package.