Ancient Mosaic

Project | Social Media Image Generator

Social Media Image Generator is a script to generate social media images for blog posts. It utilizes Puppeteer for running a headless Chromium to take a screenshot of a temporary created HTML file, which is generated with your posts Frontmatter information and a referenced photograph.

GitHub package.json version
issues

For more information visit:


Following post belong to Social Media Image Generator ...

Color Brushes
Social Media Image Generator

Generate Social Media Images Automatically

From day one of this blog I wanted to combine two of my passions: tech stuff and photography. All these photos I have shot myself in recent years and now they are representing my thoughts & findings about digital technology. I wrote about my approach to provide these images in my post Automatic Header Images in Hexo.

When I share one of my posts on social media I provide the appropriate image as a visual anchor to my writing. The technique behind this are the meta tags in the HTML of my posts:

<!-- Schema.org for Google -->
<meta itemprop="image" content="https://kiko.io/photos/normal/DSC_6776.jpg">

<!-- Open Graph -->
<meta property="og:image" content="https://kiko.io/photos/normal/DSC_6776.jpg">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:image" content="https://kiko.io/photos/normal/DSC_6776.jpg">

There are several meta tags for different purposes regarding images. For more information see the links at the end of this post. To make a long story short: The sum of these approaches ensures that when an article is posted, the corresponding image is also displayed in the social media post.

But โ€ฆ itโ€™s only the image, without a visual reference to the post itself. In this article I want to show you how to combine the photo with some meta information of the post automatically, to get a Social Media Image.

Generation Flow

Continue reading ...