Skip to main content

Metacard: Automated Dynamic Thumbnail Generation for Blogs and Websites

Metacard thumbnail

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​

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: Hello thumbnail

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: Blog Post First thumbnail

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.

Parameters:

  • title (required): The main text to display on the thumbnail. URL-encode spaces and special characters.

  • footer (optional): Set to true to include a footer with branding. Additional Parameters:

  • backgroundColor (optional): HEX color for the thumbnail background. Default: #1a1a1a

  • fontSize (optional): Font size for the main title (points). Default: 60, range: 10-200

  • fontColor (optional): HEX color for the main title text. Default: #FFFFFF

  • authorName (optional): Author name to display. Default: Serhii Hrekov

  • authorFontColor (optional): HEX color for the author name. Default: #cccccc

  • authorFontSize (optional): Font size for the author name (points). Default: 40, range: 10-100

  • authorWebsite (optional): Author website URL to display. Default: hrekov.com

  • authorWebsiteFontSize (optional): Font size for the website (points). Default: 20, range: 10-100

Example:

and you will get: Advanced Thumbnail

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