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“:
When you load a preset in their editor, you will see a section called “query variables” in the bottom right corner of your screen:
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:
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!
Hello, i put the code into my funktions.php and deleted the cache. But unfortunately no new og image is created. RankMath many regard max <?php /** * The following goes in your child theme's functions.php file */ /** * Generate custom Open Graph images for your blog posts * * @param string $url URL of OG image in HTML Meta. * @return string $url URL of OG image in HTML Meta. */ function mb_generate_og_image_url( $url = '' ) { // Admin can throw errors, so let's just skip that if ( is_admin() ) { … Read more »
Hey max, please read the comments in the code for instructions. You should be putting every hook for every SEO plugin into your site, just the one you need. And you need to refer to the line where it says it won’t return an OG image URL if one has already been set on the post or page. I’m sure that’s what you’re running into, as I tested the code and it works fine.