All Projects → itsmereal → og-image-overlay

itsmereal / og-image-overlay

Licence: GPL-2.0 license
Add automated image overlay on top of Open Graph images. This plugin extends the Open Graph features from Yoast SEO or Rank Math plugin.

Programming Languages

PHP
23972 projects - #3 most used programming language
CSS
56736 projects
javascript
184084 projects - #8 most used programming language

Open Graph Image Overlay

Generate Open Graph images automatically with an image overlay of your choice. Showing off your branding just got a little easier 👌

This plugin currently works alongside with two popular SEO plugins.

  1. Yoast SEO
  2. Rank Math

Learn more about this plugin here

Important Notes

  1. As mentioned above, this plugin will only work automatically if you are using "Yoast SEO" or "Rank Math" as your SEO plugin. If you use something else, you will need to filter the open graph image meta generated by your SEO plugin or manually use the image URL.
  2. This plugin will not work properly if you are using/uploading different featured image sizes. Your uploaded featured images MUST BE THE SAME SIZE. While the recommended size is 1200 x 630 pixels, you may choose to use different size. However, all the featured images need to be the same dimention.

Installation

  1. Upload the plugin files to the /wp-content/plugins/og-image-overlay directory, or install the plugin through the WordPress plugins screen directly.
  2. Activate the plugin through the 'Plugins' screen in WordPress.
  3. Go to Settings > OG Image Overlay to access plugin settings.

Usage

  • Install and activate the plugin. Got to Settings > OG Image Overlay and update the plugin settings.
  • Select a fallback image
  • Select the overlay image
  • Set X and Y value to position the overlay image
  • If you are using Yoast or Rank Math for SEO, choose the correct one in the settings otherwise it will not work.

Video Walkthrough

Watch the video

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

FAQs

  • I am not using Yoast or Rank Math, what can I do?
    If you are not using one of them but still want to use overlay image on top of your open graph images, you can manually set the link. You can get the generated URL to use from the plugin settings page (look at the right side preview with instructions).

  • Do I need to upload certain sized image?
    It is best to use 1200px by 630px images as the source. For the overlay it can be any size that fits the source image size.

  • How do I know what to use for X and Y in the plugin settings?
    X value is for the X axis and Y value is for the Y axis of the final image. You have to carefully measure the width and height and set the correct values. The preview shown on the plugin settings page can be wrong if not used properly (the recommended 1200px by 630px). So, always test your output image first. You can easily check for the generated image url from page source. Here is an example output.
    Sample Output

  • I already have a different sized featured image dimention for my featured size, how do I change it?
    You will need to replace your uploaded images if you want to use the recommended 1200 x 630 pixels dimention or a new dimention that you want to use for all your uploads in future. You can replace your current media files with a handy plugin called Enable Media Replace.

License

GNU General Public License v2.0

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].