Generate Open Graph images with ImageMagick

Automating the generation of Open Graph images for different pages in your site is pretty common. However, most solutions I saw out there were quite heavy. Here’s an alternative that only relies on having ImageMagick installed.

I created a template image 1200x630 with my favorite editor. I used it as the foundation on which I’d be adding page-specific information. Something like this:

Image with a small circle on the bottom left, and a rectangle on the right. — Figure 1: Template image that serves as foundation.

I wanted to add four pieces of text:

Some flavor text, in a rectangle 625x35, with offset +75+50.
Title of the page, in a rectangle 625x275, with offset +75+110.
Author’s name, in a rectangle 450x50, with offset +250+465.
Author’s handle, in a rectangle 450x40, with offset +250+525.

Same as the previous image, but with an additional four rectangles, indicating the position of the four pieces of text. — Figure 2: Areas of the image where I’d be adding page-specific information.

Here’s the ImageMagick command that adds the four pieces of text:

 1magick open_graph_template.png \
 2  \( -size 625x35 \
 3      -background none \
 4      -fill "#b4befe" \
 5      -font "Roboto-Bold" \
 6      label:"Check out this article" \) \
 7  -geometry +75+50 \
 8  -composite \
 9  \( -size 625x275 \
10      -background none \
11      -fill white \
12      -font "Roboto-Bold" \
13      caption:"The quick brown fox" \) \
14  -geometry +75+110 \
15  -composite \
16  \( -size 450x50 \
17      -background none \
18      -fill "#b4befe" \
19      -font "Roboto-Bold" \
20      label:"Daniel Perez Alvarez" \) \
21  -geometry +250+465 \
22  -composite \
23  \( -size 450x40 \
24      -background none \
25      -fill "#b4befe" \
26      -font "Roboto-Bold" \
27      label:"@unindented" \) \
28  -geometry +250+525 \
29  -composite \
30  open_graph_the_quick_brown_fox.png

And here’s the result:

Same as the previous image, but the four rectangles have been replaced with pieces of text with different font sizes. — Figure 3: Resulting image with a short title.

ImageMagick takes care of sizing the text in label: and caption: images to fill the dimensions of -size, because I’m not providing a -pointsize. Here’s the result with a longer title:

Same as the previous image, but one of the pieces of text is now longer, and has a smaller font size. — Figure 4: Resulting image with a longer title.

If the text is not rendering with the right font, make sure you configure ImageMagick to find all fonts on your system.