Open Graph image generation on the fly with Ruby
Tags: ruby, rails
Published: 2021-05-11 18:07:52

## Prerequisites


At [Wannadocs](https://wannadocs.com), we're generating Open Graph tags for each article to make it looks as attractive as possible when sharing on social media or messengers.


I didn't want to spend a lot of time on this feature, so I created a 1200x600px image, filled it with the color that a user specified as the primary color in the Knowledge Base theme, and added the title as white text.

![Screenshot 2021-05-10 at 10.50.24 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/keo3m2uxcw5b2pywmjqt.png)

It was operating like that for a whole year.

{% gist https://gist.github.com/aablinov/b29590e942e106bfd1e5290688979d4f %}


A year later, I began to notice that large companies are moving in this direction. I was excited and wants to know how they do it.

For example:

**dev.to**

![99a51d06-1010-4d35-b120-52a4fb635df6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86axblwh9vtdp1qx2dxv.png)

**github.com**

![caddy-geoip](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mzjy44eojdqf86szi9v0.png)

I did a little investigation. Since the source code of the dev.to is open, I found out that Github and dev.to creating their previews in HTML and send them to a special service that renders previews through Headless Chromium. With the new knowledge, I decided to slightly improve our previews generating to keep it up with the smooth appearance and content.

Since we sell the self-hosted version of Wannadocs, we're not suited to using the third-party service here, so we decided to stay on "libvips" + Ruby.

Let's go!



## Installation

First, you need to install all necessary packages on the server and build the "libvips" (Ansible playbook is doing this for me, so I tried to get just shell commands from there):

{% gist https://gist.github.com/aablinov/e55a723116e49dcee8c0aee07f9d0a29 %}

Here you can find the official manual on [how to build it](https://libvips.github.io/libvips/install.html).

Pay attention to these packages:

**fonts-open-sans** – don't forget about fonts otherwise you will get that:

![1_uP-3RRlrly7-K9_JLyuwFQ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bk2auuq2twqrnd4lvwav.jpeg)

And **libpango1.0-dev** – without this library Vips cannot properly write text. 


## Anatomy

Our previews are very similar to Github:

![b707a690-5295-45ac-b0eb-bb7d5cf920d2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hfheeeajmlqpveecnu2g.jpeg)

- **Gray text** is a knowledge base name, in this case ([Demo](https://demo.wannadocs.com))
- **Big dark text** is an article title
- **On the right** side knowledge base logo
- **At the bottom** 20px border is the primary color of the knowledge base

## Code

I'm also a big fan of jQuery-style DSL with returning of the “self” object from a method and chaining.

{% gist https://gist.github.com/aablinov/df9b6df59fe7cfee4ef1dd65da2f8300 %}

With DSL I'm trying to reduce the inconvenience of creating image layout with code and make this snippet more portable from project to project.

In Rails, I created a controller that serves up these images like this:

{% gist https://gist.github.com/aablinov/ffd44bb053fba53f8ce9278952cdfe75 %}

As a result, we get Open Graph images for all social networks without unnecessary dependencies on third-party services and very fast generation, unfortunately at the cost of the inconvenience of image layout.

![Screenshot 2021-05-10 at 11.51.39 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kh3z1fkx60gh755ont82.png)
 
---

[Wannadocs](https://wannadocs.com) - we make product knowledge bases for your customers, we have:
- Cool editor with support for markdown and embedded elements (YouTube, CodePen, Gist, Figma, Airtable etc.)

- Analytics by the article: views, likes, dislikes

- Built-in full-text search

- Templates and customization

- SSL certificates in two clicks

- Amazing OpenGraph images for your links 😍

Who has read to the end catch the promo code 10% discount: [dz74cdq](https://wannadocs.com)