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.