10 min read

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

by Jon Yongfook · January 2021
How to Auto Generate Open Graph Images in WordPress
How to Auto Generate Open Graph Images in WordPress

Contents

    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:

    • photo—image_url~~
    • title—text~~
    • subtitle—text~~

    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:

    https://ondemand.bannerbear.com/taggedurl/YOUR_BASE/image.jpg
    

    with…

    ?modifications=[title---text~~HELLO]
    

    …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:

    ?modifications=[title---text~~HELLO:::photo---image_url~~https%3A%2F%2Fimages.unsplash.com%2Fphoto-1507166763745-bfe008fbb831%3Fw%3D1000%26q%3D80]
    

    …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:

    • YOUR_BASE
    • TITLE
    • DATE

    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:

    Hit save!

    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 results

    Questions?

    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!

    Next Steps

    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
    Jon Yongfook@yongfook
    Jon is the founder of Bannerbear. He has worked as a designer and programmer for 20 years and is fascinated by the role of technology in design automation.

    Follow the Journey

    Hello I'm Jon, the founder of Bannerbear — every 2 weeks I send a newsletter with updates from the Product, Marketing and Business sides of my startup, subscribe below to receive it!