How to Auto Generate Open Graph Images in WordPress
If you're running a large WordPress site or several sites for your clients, here's a clean way to add unique, automated social media images to all of your WordPress pages
If you're running a large WordPress site or several sites for your clients, here's a clean way to add unique, automated social media images to all of your WordPress pages.
WordPress powers around 40% of all websites on the planet. Woah.
A lot of these websites are small, hobby sites but many of them are huge archives of content - for example major news sites, recipe sites, forums and more are powered by WordPress.
If you're running a large WordPress site, manually adding social media preview images can become a really cumbersome (or impossible) task. You can however completely automate this process, here's how to do it.
Why add social media images?
Social media preview images (also called Open Graph images) are the images that display when you share content on Twitter, Facebook, Linkedin… the list goes on.
Here's an example of a website with and without a social media preview image.
Without a preview image set
With a preview image set
The image itself can be anything - it could be an image pulled from the article itself automatically, or it can be a properly-formatted image with a title, author photo etc.
Having an eye-catching social media image (or even better, eye-catching and informative) can make the difference between someone clicking your content or scrolling past your content.
In other words, if you are looking to drive traffic from social media to your website, investing in properly formatted social media graphics that look great and encourage people to click, is totally worth it.
How to add social media images manually in WordPress
In WordPress you can manually add a social media preview image to any single post in the post edit screen:
WordPress calls it a "Featured Image". This is the image that will show up when users share your WordPress posts on social media e.g. Twitter, Facebook, Linkedin.
Doing this on every post is very time consuming though if you have a lot of content. And what if you want to change the design of your social media images later on? You would have to go through and change every image manually… there must be a better way!
How can this be automated?
Instead of doing this on a page by page basis, what we are going to do in this tutorial is edit the WordPress theme template and add some custom code. This code will output a dynamic Bannerbear URL that will generate a unique "Featured Image" for each page.
Adding the template in Bannerbear
You can design your own template using the Bannerbear editor, but for now lets use an example template from the library.
There is a Simple Open Graph template in the library that contains a title, subtitle, and an image placeholder. You can control all of these variables via Bannerbear's API in order to generate images on-the-fly.
Add this template to one of your Bannerbear projects.
Feel free to tweak the template to your liking before continuing.
Getting the Query String URL
To integrate with WordPress we will use the Query Strings integration. This is a simple, but powerful integration that enables you to generate images just by changing the query string. We are going to embed this URL in WordPress and then use some PHP to change the query string for each page, which will result in a different image being generated for each page.
Scroll down on the Bannerbear template page and click the Query Strings icon:
Create a new query string URL Base and click it - you will now see the query string documentation page.
From here you can grab your unique URL Base to generate images with.
How the Query String works
Using this URL Base you can generate images on the fly just by changing parameters the query string.
If you used the Simple Open Graph template from the library you will see that there are a few parameters you can play with:
If you add / remove / rename layers from the base template, these parameters will change so take note.
To generate images, you simply combine your Base URL with a list of modifications you want to make, separated with :::
Here are some examples:
…would result in an image with the title text HELLO
You can add an image by referencing a publicly-accessible URL of any image on the web:
…would result in an image with the title text HELLO and a poster image pulled from the URL specified.
In this way, you can use the Query Strings feature of Bannerbear to generate new images on-the-fly. Next we are going to plug in some WordPress variables into this url so that WordPress creates these URLs for us dynamically, using data from the posts (e.g. post titles).
Disable Rate Limit
Before going to the next step, you may want to turn off the Rate Limit feature in the Query String settings page. When you are doing a lot of testing or generating lots of images in bulk you can turn this off to prevent Bannerbear from blocking your requests.
Pasting the code into WordPress
To keep things simple for this tutorial we will use the Simple Open Graph template and get it to display the title and the date of a blog article in WordPress. You can also pass an image into this template, but that is something you can try in a follow up step!
Modifying the <head>
The code that we must add needs to go in a section of the WordPress site called the HTML document "head". You can directly edit your WordPress theme to paste in the code, but this is not really a good practice unless you are confident you want to make permanent changes to the theme.
Instead, lets use a WordPress Plugin to help us inject some code in the head of the document.
Using the Head, Footer and Post Injections Plugin
Install the Head, Footer and Post Injections Plugin from the plugin search:
Alternatively you can download the plugin.
Adding the code
This is the code you will need:
<meta property="og:image" content="https://ondemand.bannerbear.com/taggedurl/YOUR_BASE/image.jpg?modifications=[title---text~~TITLE:::subtitle---text~~DATE] "/> <meta property="og:image:height" content="630"/> <meta property="og:image:width" content="1200"/> <meta name="twitter:image:src" content="https://ondemand.bannerbear.com/taggedurl/YOUR_BASE/image.jpg?modifications=[title---text~~TITLE:::subtitle---text~~DATE]"/> <meta name="twitter:card" content="summary_large_image">
Copy and paste this code inside the Head, Footer and Post Injections settings page:
Adding your Base ID
You will notice that the code currently has a bunch of placeholders:
You will need to replace these. The first is simple, replace YOUR_BASE with your query string url base ID. You can find this back on your query string docs page:
Adding the dynamic title and date tags
Next we will add some dynamic PHP tags to pull the title and date for posts.
One thing to note, when using the Query String integration you must use URL-safe data. Titles, image urls, and other text must be URL Encoded to work safely with Bannerbear.
Luckily, because WordPress is based on PHP we can URL encode the values quite easily.
The tag to output a URL safe title is:
<?php echo urlencode(get_the_title()); ?>
The tag to output a URL safe date is:
<?php echo urlencode(get_the_date()); ?>
Finally your code box should look something like this:
Testing the results
Now when your pages are scraped by social media networks or other tools, the dynamic image URLs will be "hit" and the image generated on the fly. You can see this happening if you try testing your pages in a link previewer.
You can preview your social media images now by grabbing any of your WordPress Post URLs and plugging it into the Bannerbear Twitter / Facebook Preview Tool.
Alternatively, you can use one of the social network "official" tools:
If you are logged into Twitter you can use the official Twitter Card Validator to plug in your WordPress blog post urls. The first time Twitter hits your page the image will generate - hit preview again to load the image into view.
If you are logged into Facebook you can use the official Facebook Debugger to plug in your WordPress blog post urls. Same deal here, the first time Facebook hits your page the image will generate - hit preview again to load the image into view.
The main question that people ask here is, do you need to "hit" the pages before they are shared on social media, so that the image is ready?
The answer is nope 🐻 The image will be generated on-the-fly the first time that the page is accessed. So for example, if you freshly publish a new post, you can go right ahead and share that link directly on Twitter. In the background, Twitter will scan your page and pull in the image from Bannerbear generated on-the-fly.
So this is a "set and forget" solution!
Why not try these as next steps:
- Change the background image by passing in an image URL from your WordPress metadata
- Add a layer to the Bannerbear template (e.g. author name) and add that data to the query string
- Create different templates for different parts of your WordPress site