Customizing WordPress

Dynamic Open Graph images using Microlink Cards

Customizing WordPressLeave a Comment

There’s one thing I dislike about blogging, and that’s creating a custom open graph image for each blog post. Even with a handy PSD template, I often forget. Worse yet, when I want to change them, I’m left editing all my existing posts.

The good news is that there is a better way to do this. Dynamic open graph images. Automatically generated and linked in your meta, for both Facebook and Twitter.

This tutorial is going to use a service called Microcard Links. They have a free tier that allows for 50 image generations per day. Once an image is generated, it is cached for 24 hours, and cached hits don’t count towards your quota. And since both Facebook and Twitter also cache your open graph images for quite some time, the free tier should suffice for all but the busiest of blogs.

The first step is to choose a preset from Microlink Cards. You also have the option of creating your own preset and sending a PR to their Github repo, but that’s beyond the scope of this tutorial.

I choose the preset called “quote“:

Microlink Card preset example

When you load a preset in their editor, you will see a section called “query variables” in the bottom right corner of your screen:

Microlink query variables

These are the variables you can customize for creating your own image using the preset’s layout. All presets have unique variables, so play around in the editor to see what they change. Any variable not customized will be generated using the default value as seen in the editor.

For the quote preset, I played with the variables and saw that i wanted to change avatar, text, author, job. The avatar I want to link to my Twitter avatar, in order to always keep it up to date. For that, I use a handy service called Unavatar. The text will become my post title, and the author and job will be my name and URL.

With that in mind, I know I have to generate a URL that specifies the values for the above variables, and then somehow pass that along to my post’s meta tags. Luckily for us, most popular SEO plugins have a filter built in to do just that.

Let’s jump right into the code. I’ve added ample comments to help you understand it.

In the example above, I’ve included hooks for Yoast, RankMath, SEO Framework, and SEO Press. You can safely remove the hooks for the plugins you are not using.

If you choose a different preset, you will need to customize the $ogArgs array to use the keys specific to that preset. The rest of the code should be used as is.

After adding the code to your child theme’s functions.php file, head over to the Facebook Debugger and Twitter Card Validator to test it out. You will likely need to scrape the URL a couple of times in order to scrape the new URL (and be sure to clear your WordPress site’s cache first).

If all goes well, your new & dynamic OG image should be seen:

Facebook debugger scraping the new OG image

The beauty of a system like this is that you can now update the OG images across your entire blog by simply editing the custom function and specifying a new preset.

The code above can also be customized to work on more than just single posts, such as using a different preset for each CPT on your site. Hopefully my code is commented enough for you to figure that out!

Newsletter

Like what you see? Then get it in your inbox.

  • This field is for validation purposes and should be left unchanged.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments