On generating social images for this blog
import BlogPostImage from “~components/BlogPostImage.astro”;
I recently decided to generate social images for my blog. You know those images that are being displayed by facebook or twitter when you share link on those platforms:
I want to get started and create something in finished time so I prepared a minimalistic version of banner using figma social branding template:
When I had my design in place I started searching for solutions on how to generate social images. What I wanted is:
- generate social card based on title of page/blog post
- it should be simple to integrate & debug
- it should not cost me money - I’m trying stuff out now
- it should be fun to do
After a few minutes of googling/duck ducking I distilled couple of solutions:
- send image to image handling service (like cloudinary) and allow them to handle cache & image generation
- fire up chromium to make screenshot and then pass it to the twitter bot
- have one static image or generate static image per blog post & include it in e.g frontmatter
All of them have their pros & cons but I decided to use the first solution - using cloudinary. Why?
- I wanted something simple to try out stuff preferably with caching
- I tried firing up chromium but it took a hell a lot of time and I cant debug it locally
- Having static images was also problematic - what if I want to change design of my social card? Everything needs to generated one more time
How it is working?
I”m using there couple of goodies from different companies:
- netlify redirects - instead of having
- netlify functions for generating cloudinary URL & then redirecting bot to image
- cloudinary node API to generate cloudinary URL
I wrote about pros but what are downsides of using it approach? I feel like I’m hardcoding my image generation to cloudinary.
In this post I wrote about my approach to generating social images - I’ve used cloudinary + netlify functions for that job.