Tutorial: How to Fix the og:image Open Graph Meta Tags are Missing Critical Issue (with pictures)

If you’re paying attention to your search engine optimization errors you’re likely here due to Some Open Graph Meta Tags are Missing critical error which is caused by an og:image meta tag missing from your website and is identified by the All In One SEO Pack SEO Analysis — we’ll cover how to address this issue in this guide.

Facebook Open Graph tags define how URLs are displayed [9]; if these Facebook Meta Tags (OGP tags) are incomplete, then the URL may not display properly.

Open Graph Tags (OGP tags) are supported by many websites and applications at this point, including social networks such as Facebook (see the Facebook Sharing Debugger), LinkedIn (see the LinkedIn Post Inspector), Instagram, Skype, WhatsApp, ServiceNow, to name just a few.

Note that I have an article that covers getting the Open Graph image tag embedded in a page on a WordPress website to properly render in WhatsApp.

Twitter supports both the Twitter Cards (see the section on the Twitter Card Validator in the article explaining how to test OGP tags) as well as OGP tags.

If a link is shared to a page that has Twitter Cards then Twitter will use these settings however if Twitter Cards are not available, Twitter will use OGP Tags if they’re available on the page.

Open Graph Tags are used heavily on this website and the section entitled Addition of Schemas for Rich Snippets SEO Case Study provides additional information about adding schemas for rich snippets using the All in One SEO (AIOSEO) plugin for WordPress.

In this post we’ll take a look at the Open Graph Protocol, we’ll review the og:image meta tag, we’ll confirm that some OpenGraph meta tags are missing (which directly relates to the Open Graph Meta Tags are Missing critical error), and then we’ll remedy this issue.

Finally, we’ll take a brief look at the Facebook for Developers: Sharing Debugger and we’ll conclude with a quiz.

This article relies on WordPress and the All In One SEO Pack plugin (AIOSEO).

What is the og:image meta tag?

The og:image tag is used to display a thumbnail image when a link is shared on Facebook.

In WordPress and specifically for this article, the URL to the featured image in a post or article will be used as the og:image value.

If the og:image tag is not set then the AIOSEO pack’s social media default post Facebook image will be used instead.

Since this value is not set, a critical issue is noted when we run an SEO audit.

We have other options aside from using the featured image, and these are shown below and keep in mind that the setting applies to the entire site.

Why should we care that an og:image meta tag is missing?

The article entitled “How to Optimize Blog Images for Social Sharing: An Intro to Open Graph Tags” explains why the og:image meta tag is important: missing an image could result in an incorrect image being used or no image at all.

Missing an image will hurt social media performance and failing to maximize the potential of a share due to an issue that is easy to fix in WordPress results in a lost opportunity.

There are many articles that suggest how to maximize engagement on social media platforms and one recommendation which applies irrespective of the platform involves adding a picture.

According to the article entitled “7 Powerful Facebook Statistics You Should Know for a More Engaging Facebook Page“, posts that include an image receive 39% higher engagement — this article is an excellent read and includes other metrics and references that are worth reviewing.

The AIOSEO SEO Audit Indicates That Some Open Graph Meta Tags Are Missing

After running an SEO audit we now have two critical issues, one of which includes the missing og:image meta tag.

If you don’t set a featured image on a page or post, the default image, which is not set, will be used.

Let’s take a look at audit results in the following image — note the red pointer which indicates that we have some critical issues to address, including some OpenGraph meta tags are missing.

Next, we take a closer look at the critical issue details.

How to fix the Open Graph Meta Tags are Missing critical error in AIOSEO

In this section we’ll cover step-by-step what’s required to fix the Open Graph Meta Tags are Missing critical error in AIOSEO.

Step One: Set the default post Facebook image in the AIOSEO Social Networks setting

To remedy this issue, we set the default post Facebook image in the AIOSEO Social Networks setting.

The image below includes two red pointers that indicate where the change needs to be applied.

Step Two: Refresh the SEO Audit Checklist

Next, we refresh the results of the audit and we can see that this issue has been addressed successfully.

Be advised, however, that there will still be a problem if the image size is not compliant with Facebook image dimension requirements — we will cover this shortly.

Free SEO Consultation

A Free SEO Consultation is an opportunity for you to receive specialist advice regarding how to improve your website's visibility in search engine results. This hour-long SEO consultation can help to identify opportunities that lead to increased organic traffic, improve user experience (UX), and achieve your digital marketing goals. This offering is for business websites only and is restricted to prospective clients located in the United States, Canada, or the European Union.

Schedule an Appointment

Digital Marketing Services

The image below shows us that the OpenGraph Meta Tags have been found.

To optimize social media sharing of your content, conducting an Open Graph test is important since it ensures that posts are displayed correctly across various platforms and applications.

In the next section, we’ll take a brief look at the Facebook for Developers: Sharing Debugger.

We can test the og:image meta tag link preview on Facebook using the Facebook for Developers: Sharing Debugger console (FB Sharing Debugger).

The FB Sharing Debugger requires that the user authenticates with Facebook, otherwise it is freely available for developers to test with.

According to [7], we can also use the Facebook Sharing Debugger tool to refresh scraped content — this is helpful when a website is undergoing many changes in a short period of time.

To test the Open Graph Tags, enter the URL and then hit the “Debug” button.

The Open Graph test result below has pointers to the link preview as well as the og:image URL value.

The initial testing of Open Graph tags that was performed for this article relied on the index page of this website, which has acceptable feature image dimensions, and hence no warnings were raised.

Ironically, this was not the case for this page, where the featured OG image size did not meet the minimum size constraints set by Facebook resulting in a warning being raised, below.

The Facebook for Developers: Sharing Debugger has found two problems with a page analysis; for this article, we are concerned only with the image being too small.

In this example the og:image meta tag points to an image that is not valid because it did not meet the minimum OG image size constraint of 200px by 200px.

The lesson learned is that even though the AIOSEO pack SEO Analysis tests for the presence of the og:image meta tag it does not test that the size is correct and we must have both.

We can see the manifestation of this problem when we post a URL to our friends on Facebook, as demonstrated in the following example.

In order to fix this issue, the original image must be appropriately resized — this will address the “Image Too Small” warning.

Note that I had to press the “Scrape Again” button, otherwise Facebook was pulling the cached image.

Finally, when we post the URL to this page, we can see that the featured image is now used by Facebook and this is the expected behavior.

What are the Open Graph image size requirements?

The following Open Graph image size requirements are quoted directly from Facebook and this was current in February of 2023:

Requirements

The minimum allowed image dimension is 200 x 200 pixels.

The size of the image file must not exceed 8 MB.

Use images that are at least 1200 x 630 pixels for the best display on high resolution devices.

At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.

WordPress comes with it’s own image compression functionality however we can also use the TinyPNG service to compress images prior to uploading the media; TinyPNG is also available as a WordPress plugin.

Other options are available as well — see the article entitled 7 Best WordPress Image Compression Plugins Compared (2023) for several options along with comparisons.

Tutorial Conclusion

This instructional covered two issues that came about from an audit that I performed on my website.

Once this particular issue was addressed in the AIOSEO Pack Plugin for WordPress I reviewed two pages and discovered that an issue still existed on one of them.

Any SEO audit should not just verify that the og:image meta tag is present but also that the image is correctly sized — otherwise we’ll fix the problem, albeit not really.

If you enjoyed this post then I have other articles on SEO that may interest you as well.

Questions and comments are welcome.

Do you need to hire a WordPress SEO Consultant? If you answered “yes” to this question, please find a time that works for you on my calendar and we can discuss your project in more detail.

Tutorial References

Frequently Asked Questions (FAQ)

What is the "metadata.metadataBase is not set for resolving social Open Graph or Twitter images" warning?

The “metadata.metadataBase is not set for resolving social open graph or twitter images” warning pertains to an issue which happens in the next.js JavaScript library.

Find the direct link to the solution on GitHub.

Addendum regarding the og:image page source location.

The following page source image demonstrates that the og:image meta tag is missing in the All In One SEO Pro block.

Once the og:image has been set, we can review the updated page source, and the og:image meta tag will be set in the AIOSEO block, as indicated by the red pointers.

This step has been included here simply to demonstrate where this meta tag should be found.

ThosPFuller

I am a software engineer based in Northern Virginia (USA) and this website focuses on content engineering, content experiments, web development, search engine optimization and digital marketing ideas.

See Full Bio