Generate Open Graph Image for WordPress

How to create preview image for Wordpress

WordPress is a powerful and easy to use CMS. Due to its popularity, WordPress is stated to power 65.2% of CMS out there. Creating content has never been more accessible than ever and trying to make your site stands out is becoming a much harder task.

Open graph can help with that. When open graph is set up on your site, an image preview is shown when your link is shared. Having attractive image can help in increasing click rate to your site.

No open graph setup, no image preview is shown

With open graph setup, a well designed preview image can increase click rate

Template

We are going to use custom designed template for our open graph image. You can also use preset templates that we have in our gallery and adjust it to your need.

It only consists of two texts that we are interested in overriding soon - title and author.

Guides

1. Install Plugin

We are going to use Head, Footer and Post Injections plugin to inject meta field to your template. If you're using any plugins, please make sure that PHP code can be executed. Certain plugins disallow PHP code execution.

You can definitely do this without using any plugin by modifying your template directly. This plugin helps do this for you so you don't have to redo the whole process when you changed to a new template.

2. Create Query String URL

Go to your template's Query String integration page. Then select the object and field that you want to override.

For this tutorial, we are going to override the title's text and the author's text fields.

Take note of the base URL

If you are only using this template's integration for a specific domain, we recommend updating the Allowed Origins setting to your domain.

This prevents unauthorized use of your query string. Learn more about Allowed Origins here.

3. Inject open graph meta tag

Copy the query string URL from the previous step and update the value for the query string into something more appropriate to your use case.

In our case, the template we are using requires the title of the post and the author.

<?php $author_id=$post->post_author; ?>
<meta name="og:image" content="https://images.usestencil.com/qs/34aacb1e-a7e4-4b4d-bb64-2bffc3c930a5/bWFWRh9vdxbvA3rzSrjx4d.png?title=<?php echo urlencode(get_the_title()); ?>&author=<?php echo urlencode(get_the_author_meta('display_name', $author_id)); ?>" />
<meta name="og:image:height" content="630" />
<meta name="og:image:width" content="1200" />

<?php echo urlencode(get_the_date()); ?> to get the published date.

You can view WordPress documentation for more details.

Paste the above code (after your modification) to the Head and footer section. You can go to this section by clicking on the "Settings" menu on the left and select "Header and footer".

Save your changes and you're done.

Testing your open graph image

Facebook Sharing Debugger

Facebook has sharing debugger that validate your open graph image setup. Simply paste the link to the post that you want to check.

Here's the link to facebok sharing debugger, https://developers.facebook.com/tools/debug/

Here's how it will look like when you share your link. Big preview image.

Stencil Image Requests

You can also view the request in Image Requests page. Please note that only the initial request is shown here when the image is first generated. Subsequent requests are always served from our cache. This is by design, so your quota is not deducted on each request.

You can see the modifications being sent to generate the image

When will my image ready?

Image will be generated on-the-fly when the page is first accessed - either by actual human or search engine crawler. You don't have to do anything once everything is setup, now go and enjoy your free time.

Sample generated image