OpenGraph Image

The OG Image Plugin automatically generates a preview image for each of your pages, which is then displayed when sharing or embedding.

Create an image template as a base, upload a font and design your OG Image in just a few steps. The plugin helps you to always deliver the right picture. You can:

  • Set a unique OG Image per page in the panel.
  • Embed a picture of your post into the OG Image.
  • Simply use the template you created.

Define a source field to print out, the page title for example. Set a font and the position of the text. You can also embed existing images or fill your template with colors.

Let's assume you have a blog post titled "How I added an Open Graph image to my Kirby Site" and a photo of a meadow as the post image.

Your template:

Will then become:

If no post image is available, you can fill the image with a color so that the transparent area either stands out in color:

Or is not visible at all:

You could also set a fallback image for your post image, then this will be displayed instead of a color, for example, you could display your logo if there is no post image:

Templates, fonts, position, cropping and much more can be defined via the options in your config.php.

The plugin provides a route for each of your pages, simply hang /og-image onto the URL and the image will be generated or an already generated image displayed. In the <head> section of your webpage, you only need to add the appropriate meta tag and each of your pages will have a nice preview image.

You can read about which options are available and how to embed the meta tag on GitHub.

Support development

Like most of my plugins, I also make this one available for free. You can use it free of charge for yourself or your clients. Especially if you use it commercially, I would be happy if you supported my work on this plugin at Steady. Thank you very much!