Metacard: Automated Dynamic Thumbnail Generation for Blogs and Websites
What is Metacard?​
Metacard is a lightweight API service that automatically generates beautiful, social-media-optimized thumbnail images based on your blog post titles or slugs. It removes the hassle of manually creating images, letting you focus on content while ensuring your posts always have eye-catching visuals.
Why I Created It​
While managing my personal blog, I noticed many posts lacked thumbnails, resulting in dull previews and lower engagement. Existing tools were either complex or static, so I built Metacard as a simple, automated solution to generate custom thumbnails on the fly or during site builds — improving presentation and saving time.
Try It Yourself, Live demo​
Generate Your Thumbnail
Example Usage​
You can generate a thumbnail instantly by calling the Metacard API with a title:
https://metacard-beryl.vercel.app/api/generate?title=Hello
and you will get:
Instead of Hello - you can put whatever text you want!
This will return a dynamically generated PNG image containing the provided title, styled and ready for social media or blog use. Alternatively, if you have a slug associated with your content (e.g., blog-post-1), you can generate or fetch a cached thumbnail by using the slug path combined with the title parameter:
https://metacard-beryl.vercel.app/api/generate/blog-post-1.png?title=Blog%20Post%20First
and you will get:
This image will remain at this address until a force-regeneration process occurs.
This URL pattern enables consistent and SEO-friendly image URLs that integrate perfectly into static site generators or CMSs while ensuring the images are uniquely linked to your content.
What’s Next?​
Future plans include:
- User authentication and usage limits to protect the API
- Customizable thumbnail dimensions, fonts, and colors
- Personalized branding options for authenticated users
Metacard aims to evolve into a flexible, scalable tool for any site or template