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:

GithubGithub or VSCodeOpen in VSCode

Following post belong to Social Media Image Generator ...

JavaScript
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:

1
2
3
4
5
6
7
8
9
<!-- 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 ...