Automated Open Graph Image Overlay for WordPress

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.

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.

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.

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.

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.

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

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