Hello y'all!
Since we decided to build Flottform in public and share with you our progress and discoveries, we need to take a closer look at content performance. Making your content stand out in today's crowded online world can be hard. One cool way to do this is by using eye-catching OG (Open Graph) images. These images are what people see when they share your blog post on social media, and they can make quite a difference in whether someone clicks on your link or scrolls past it.
In this post, we'll explore why OG images are so important, how adding personalized touches like headshots and reaction images can give your blog posts a significant boost and how to generate them using a custom script. Let's dive in!
Understanding OG images
So, what exactly are OG images? Open Graph images are part of the Open Graph protocol, which allows you to control how your content appears when shared on social media. Think of them as the visual preview that accompanies your blog post link on platforms like LinkedIn, Facebook, and Twitter / X. A compelling OG image can catch someone's eye and make them want to learn more about your content.
Something to keep in mind is that different social media platforms have their own preferences for metadata and image formats.
As an example, Twitter / X has its own set of metadata, called Twitter Cards, which shows how your content should be displayed when you share it on their platform. This means the images you use for Twitter / X might need to be formatted differently from those used on LinkedIn or Facebook. Knowing these differences can help you make sure your content looks its best no matter where it's shared. It's always a good idea to check the specific requirements of each platform to make sure your OG images are optimized.
There are a few simple rules you can follow to create nice and catchy OG images, like keeping your design simple and clean and using consistent branding (like your logo or colors) to help build recognition.
During our journey with Flottform, we discovered another trick that can boost your content's performance.
The impact of personalized OG images
A few posts ago, we first tried adding a photo of Jörn to a blog post OG image. The results were quite impressive — that blog post gained almost double the impressions compared to the previous one. Since we hadn't changed the design of the image itself, we asked ourselves, why does personalization matter?
People are naturally drawn to faces and emotions. Including a friendly face or an expressive reaction can make your content feel more relatable and engaging. Reaction images add an emotional layer to your content. Whether it's a look of surprise, joy, or curiosity, these expressions can capture attention and evoke emotions that make people want to click through.
Seeing better performance makes us think of the way how we can generate these OG images quickly using different headshots and reactions. That's where our script and some creativity came into play.
Technical realization
Our script uses Playwright to interact with a browser and take screenshots that we use as our OG images. First of all we grab title and subtitle from the actual blog post for which the og images should be generated that we will use later. As a layout for OG we use our custom HTML template that includes the page title, subtitle, and a reaction image (like a headshot with a specific expression). We set our custom HTML as the content of a new blank page. We set the viewport to the appropriate dimensions for different social media platforms. For example, LinkedIn images are typically 1200x627 pixels, while Twitter images size depends on how you want to display them and supports an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels.
Once the content is loaded, we take screenshots of the rendered page. These screenshots are saved as PNG files in a specified directory, ready to be used as OG images. This approach ensures consistency and allows us to generate personalized OG images quickly without manual effort.
We're thinking about open sourcing our code because we think it could be helpful to others, but it takes a bit of our resources to clean it up enough to put it in a module. If you think that would be a good idea, we're ready to do it. Let us know via mail or as a comment to our LinkedIn or X post!
Conclusion
Creating engaging OG images is a powerful way to enhance your blog posts and make them stand out on social media. By incorporating personalized elements like headshots and reaction images, you can create a stronger connection with your audience and boost your content's engagement.
Connect with us on LinkedIn and Twitter / X. Every comment, like, and share fuels our progress!
Cheers,
