Generate Open Graph Image for WordPress
How to create preview image for Wordpress
Last updated
How to create preview image for Wordpress
Last updated
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.
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.
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.
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.
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.
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 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.
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/
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.
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.
