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.
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.

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.
ভিডিওটি বাংলায় দেখতে চাইলে এখানে ক্লিক করুন
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??
Al-Mamun Talukder
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.
Al-Mamun Talukder
I will take a look and get back to you. Thanks for your feedback!
Samrat Raihan
ফেসবুক og আপডেট আসার পর থেকে আর কাজ করেনা। অনুগ্রহ করে আপডেট করুন। ধন্যবাদ।
Al-Mamun Talukder
I don’t see it not working. If you still face issue, kindly post details of the error here https://github.com/wolfdevsllc/og-image-overlay/issues
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
Al-Mamun Talukder
Please submit your problem through the contact form. I am not familiar with Indonesian language.
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.
Todd
Hi there. Love the plugin. Any plans to have it include the page/post title as part of the image?
Al-Mamun Talukder
Thanks for your input. Will try adding this in future.
Clearsite Internetbureau
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/
W1nkey
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
W1nkey
Hello!
Thanks for the great plugin. But there is a question. How can I add a post title and category to an image?
Al-Mamun Talukder
You will need to check available functions for text here https://www.php.net/manual/en/ref.image.php
Victor
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
Yasin
আমি আমার সাইটে প্লাগইনটা এড করে প্রোপারলি সেট আপ করছি । সবকিছু ঠিক আছে বাট পোষ্ট শেয়ার করলে ওভারলে ইমেজ দেখাচ্ছে না। এটা কিভাবে সমাধান করবো ।প্লিজ আমাকে একটু হেল্প করেন।
Al-Mamun Talukder
Your comment was mistakenly flagged as spam by Akismet. I hope you have already resolved the issue.
Anonymous
I was looking for something like this. Thanks for the tutorial and plugin.
Dan
This is awesome. I loved the customizer functionality you added to the plugin!