Giter Site home page Giter Site logo

gbysea / og-image-overlay Goto Github PK

View Code? Open in Web Editor NEW

This project forked from wolfdevsllc/og-image-overlay

0.0 1.0 0.0 236 KB

Add automated image overlay on top of Open Graph images. This plugin extends the Open Graph features from Yoast SEO or Rank Math plugin.

Home Page: https://itsmereal.com/plugins/open-graph-image-overlay

License: GNU General Public License v2.0

PHP 96.70% CSS 2.55% JavaScript 0.75%

og-image-overlay's Introduction

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

og-image-overlay's People

Contributors

itsmereal avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.