Need to find something?

Hire Me

Automated Open Graph Image Overlay for WordPress

open-graph-image-overlay-itsmereal-com

Generate automated open graph image overlay for your WordPress website and easily boost up branding on each share of your links to social media. When you share your website URL on social media, a cool preview automatically gets generated. It mainly consists of an image, the title of the page/post, some description text, etc. These come from the Open Graph meta. Now, what I am going to discuss today is based on the open graph image that gets shown. More specifically, the process of showing your own branding automatically added to the open graph image overlay as a watermark or as a part of the design.

Open Graph Image Overlay Example
Notice the bottom of this image. You can see how they added an overlay over the image with their own branding. Source: Screenshot from the Dhaka Tribune Facebook Page

Typically, you would set a featured image on your post or page and that image URL would be picked up as the og:image meta – provided that you are using an SEO plugin to automatically do that for you. There are other plugins as well that do the same thing. However, this post is going to focus on generating the open graph image overlay.

The Plan: Automated Open Graph Image Overlay

  • Take the source image: This is going to be your post/page featured image.
  • Take an overlay image: This image is going to be on top of the source image.
  • Merge the two images together into one image: Here, we will use PHP GD Library Functions.
  • Use the newly generated image URL as the og:image meta.
  • Test the preview!

It’s that simple to do. Let’s get to the coding part.

Please Note

If you want to skip learning how this works and don’t want to try building this yourself, you may jump to the last section for the ready made plugin!

The Function

The portion of code below is to be added to your theme’s (use child theme) functions.php file or in a custom plugin file. I am going to explain step by step, how this function is going to work.

<?php

/**
 * Generate Open Graph Image Overlay
 * @param integer post ID
 * @author Al-Mamun Talukder <https://itsmereal.com>
 */
function generate_og_image( $post_id ) {

    if ( $post_id ) {

	if ( get_post_thumbnail_id( $post_id ) ) {

	    $featured_image = get_post_thumbnail_id( $post_id ); 

	} else {

	    $featured_image = 10; 

	}

        $overlay_image  = 12;
        $overlay_x      = 0;
        $overlay_y      = 480;

        $overlay_type   = get_post_mime_type( $overlay_image );

        $overlay_image_meta = wp_get_attachment_image_src( $overlay_image , 'full' );
        $overlay_width  = $overlay_image_meta['1'];
        $overlay_height = $overlay_image_meta['2'];

        $ogImage  = imagecreatefromjpeg( get_attached_file( $featured_image ) );

        if ( $overlay_type == 'image/jpeg' ) {

            $addition = imagecreatefromjpeg( get_attached_file( $overlay_image ) );
        
        } elseif ( $overlay_type == 'image/png' ) {

            $addition = imagecreatefrompng( get_attached_file( $overlay_image ) );
        
        }
        
        imagecopy( $ogImage, $addition, $overlay_x, $overlay_y, 0, 0, $overlay_width, $overlay_height );
        
        header('Content-Type: image/png');
        
        imagepng( $ogImage );
        
        imagedestroy($ogImage);
        imagedestroy($addition);
    
    } else {
		
	wp_die( 'Post ID is required' );

    }
}Code language: HTML, XML (xml)

Line 8: We are taking $post_id as the parameter for the function. The reason for taking the post ID is that it is a small integer that we can easily use. Looks neat, to be honest.

source image for the automated open graph overlay image
Our Source Image

Line 14: We are getting the post thumbnail ID with get_post_thumbnail_id() function. Later in the process, we will need the source image PATH rather than the URL that’s where the ID is useful. One important thing to note, you should use 1200px wide and 630px height image as the featured image to make it appropriate. You can learn more about this here.

Line 18: Here we are setting a fallback image ID so that when a post/page doesn’t have a set featured image, the function will use the fallback image. As above, we are taking ID instead of the URL for the same reason.

Lines 22-24: As the featured image as the source image, we are taking the ID of the overlay image. This image is going to sit on top of the source image. We will also need a position where the overlay image will be placed which we are setting with $overlay_x and $overlay_y integer variables. If you need to change the overlay image, just change the values of these variables and all should be good.

overlay-png for the automated open graph image overlay image
Our Overlay Image. This is a transparent background PNG.

Lines 26, 28-30: Here we are getting the type of overlay image with get_post_mime_type() function. We will also need the width and height of the overlay image. So, rather than checking the dimension and setting them manually, we are getting them both with the wp_get_attchment_image_src() function.

Lines 32: In this line, we are preparing the source image to use it later. Notice that I have used the imagecreatefromjpeg() function as I am using JPGs as the featured images. If you are going to use PNG’s, you can change the function to imagecreatefrompng() and it should work just fine.

Lines 36 & 40: Unlike the source image, we might want to use JPG or PNG based on our design for the final open graph image overlay. That’s why we are checking the $overlay_type variable which we set earlier for this step. Based on the output we change our function to imagecreatefromjpeg() and imagecreatefrompng()

Line 44: Here we are finally going to use most of the variables we have been preparing. The function we are using is imagecopy(). You can find details about this function here.

Line 46: In this line we declare the header as an image so when accessing the URL it should output as an image file.

Line 48: With the imagepng() function, our final image gets generated.

Lines 50-51: Here we are destroying the created images to free up the memory.

Final automatically generated open graph image with overlay
Our generated open graph image with overlay! 🎉

The Dynamic Open Graph Image URL

Now that we have the function ready, we are going to prepare the dynamic open graph image URL. We will create a PHP file inside our theme’s folder or plugin’s folder and name it generate-og-image.php. Put the code given below to that file to make it ready for use.

<?php

require_once( dirname(dirname(dirname(__DIR__))).'/wp-load.php' );

if ( isset( $_GET ) && isset( $_GET['p'] ) ) {
    $post_id = intval( esc_html( $_GET['p'] ) );
    generate_og_image( $post_id );
} else {
    wp_die( 'You can not access to the Open Graph Image without the post ID. Read the instructions properly and try again!' );
}
Code language: HTML, XML (xml)

Here the important things to note are in line 3 & 7. In line 3 we are including the wp-load.php file. As we are using this generate-og-image.php file without including anywhere in our theme or plugin, we need to include wp-load.php file inorder to use WordPress functionality. The structure of this code may change if you choose to put the file in a different directory than the immediate theme or plugin folder. So, be sure to check it before you go forward.

Lastly, in line 7 we are adding our generate_og_image() function that we previously created.

Our final dynamic URL for the open graph image will be like https://yoursite.tld/wp-content/themes/yourtheme/generate-og-image.php?p=POST_ID. Here POST_ID would be replaced with the actual post ID of your post/page.

Using The Generated Open Graph Image

As mentioned earlier, open graph metadata are automatically included by most SEO plugins and in some cases themes. I am going to show the process of using our generated open graph image with the two most popular SEO plugins: Yoast SEO and Rank Math.

/**
 * Change Open Graph Image URL for Yoast SEO Plugin
 */
function change_yoast_opengraph_image_url( $url ) {
    global $post;
    return $url = plugin_dir_url( __DIR__ ) . 'generate-og-image.php?p=' . $post->ID;
}

add_filter( 'wpseo_opengraph_image', 'change_yoast_opengraph_image_url' );Code language: PHP (php)
/**
 * Change Open Graph Image URL for Rank Math Plugin
 */
function change_rankmath_opengraph_image_url( $attachment_url ) {
    global $post;
    return $attachment_url = plugin_dir_url( __DIR__ ) . 'generate-og-image.php?p=' . $post->ID;
}

add_filter( "rank_math/opengraph/facebook/image", 'change_rankmath_opengraph_image_url');
add_filter( "rank_math/opengraph/twitter/image", 'change_rankmath_opengraph_image_url');Code language: PHP (php)

Add the portion of code you need for whichever SEO plugin you are using to your theme or plugin file and it should automatically set the dynamic open graph image URL. I used my code inside a plugin that is why I am using plugin_dir_url function inside my code. You may change it to your theme directory with get_template_directory_uri() or get_stylesheet_directory_uri() if you are using a child theme folder. You will need to add an extra trailing slash in that case.

Download Open Graph Image Overlay Plugin

Open Graph Image Overlay Plugin Preview

Honestly, I was going to release a plugin based on this Open Graph Image Overlay topic but, I wanted to share it with you guys on how it all works. So that you can understand the functionality rather than just using it. Here is the plugin available for download from my Github. I will be releasing updates whenever I find fixes or improvements. As it’s open-source, you are welcome to contribute as well.

Check the following video where I quickly show how to set it up.

ভিডিওটি বাংলায় দেখতে চাইলে এখানে ক্লিক করুন

Last Updated: January 16, 2021

About Al-Mamun Talukder

Full-Stack Web Developer, Minimalist Designer, Tech Enthusiast. Loves Cars. Founder of Omnixima.

21 comments

  • sokratis

    Hello . Very good plugin i use it in my first page and was working fine. Now i am trying to use it to a different page that i have installed the yoast seo plugin and have some problems. The problem is that i have a featured image of 700×700. With yoast seo i have the opportunity to upload a different social image . here i upload the correct 1200px wide and 630px height image.
    The overlay image i get from the plugin when i see the source page is from the 700×700 image. Is there any way to fix this??

    • A

      Please check for the new v1.5. It has the feature you need. Thanks! https://github.com/wolfdevsllc/og-image-overlay/releases/tag/1.5

      • Sokratis

        Thank you very much Al-Mamun. I am using the plugin on my page now. The only issue that i have is when if accidentally insert a wrong image to the seo social image . The plugin creates the meta property=”og:image .
        The issue is when i replace the social image with a new one. After i replace the image when i view source of the page the : has the same image , the old one. no the new one. is there anything i can do ? thank you very much for the amazing plugin.

  • Samrat Raihan

    ফেসবুক og আপডেট আসার পর থেকে আর কাজ করেনা। অনুগ্রহ করে আপডেট করুন। ধন্যবাদ।

  • Ibrahim

    saya sudah pasang di wordpress saya.
    Tetapi belum bisa di fungsikan padahal sudah pasang gambar overlaynya.
    Setelah kami coba bagikan ke WhatsApp, gambar overlay pada gambar unggulan tidak muncul

  • Todd Edelman

    Absolutely love the idea behind this plugin.

    We’re stuck with a major hurdle though. We’re running our WordPress website static, using Strattic, and query parameters don’t play well in the static world.

    Can your code be tweaked in order to use regular URLs instead?

    Would really appreciate your help.

  • Hi there. Love the plugin. Any plans to have it include the page/post title as part of the image?

  • Hi Al-mamun Talukder,
    Just came upon your post and found out we’ve made a sort of similar plugin. The setup is a bit different but the core idea is the same. Maybe you could have a look at it here: https://wordpress.org/plugins/branded-social-images/

  • Thanks for the quick answer 🙂
    I found this function (imagettftext ), but unfortunately I don’t have the php level to competently add the function to your plugin

  • Hello!
    Thanks for the great plugin. But there is a question. How can I add a post title and category to an image?

  • Nice plugin. What if we don’t use featured images? In some posts/pages we don’t upload image, but just using Yoast to upload image for Facebook or Twitter OG:Image tag.
    Any plan to support that?

  • Daily Reportbd24

    This is awesome. Thanks you so much

  • আমি আমার সাইটে প্লাগইনটা এড করে প্রোপারলি সেট আপ করছি । সবকিছু ঠিক আছে বাট পোষ্ট শেয়ার করলে ওভারলে ইমেজ দেখাচ্ছে না। এটা কিভাবে সমাধান করবো ।প্লিজ আমাকে একটু হেল্প করেন।

  • Anonymous

    I was looking for something like this. Thanks for the tutorial and plugin.

  • This is awesome. I loved the customizer functionality you added to the plugin!

Leave your comment

Related Articles

Ready to Build Something Amazing?

Whether you’re looking to create a new website, optimize your server, or solve a tricky technical problem, I’m here to help. Let’s collaborate and bring your ideas to life.
Schedule a Free Meeting