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. This error is caused by an og:image meta tag missing from your website and is identified by the All In One SEO Pack SEO Analysis. Facebook Open Graph tags are metadata (that is, data about data) that define how URLs are displayed [9]; if these Open Graph Meta Tags have not been set, 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, to name just a few.

Note that Twitter uses Twitter Cards (see the Twitter Card Validator) which are similar to OGP tags however they’re not the same and hence do not apply to this post. If you’re having problems displaying rich content on Twitter, this article will likely not be helpful.

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 Open Graph Protocol?

Open Graph is a protocol that was created by Facebook to enable websites to share information about their content with Facebook and other social media platforms. The Open Graph protocol uses meta tags to provide metadata about a webpage, including its title, description, image, and other relevant information.

By using Open Graph meta tags on their web pages, website owners can control how the content appears when it is shared on social media platforms such as Facebook, Twitter, and LinkedIn — this helps to ensure that the shared content is displayed in a consistent and visually appealing way, and makes it more likely to be clicked on and by users.

In addition to providing metadata for social media platforms, Open Graph can also be used to provide metadata for other types of applications and services, such as messaging apps or search engines. The Open Graph protocol is an open standard, meaning that it can be used by any website or application that wants to share information about its content in a standardized way.

What is Open Graph Video

Play Video

Overall, Open Graph is a useful tool for website owners and content creators who want to ensure that their content is shared effectively on social media platforms and other online services. By using Open Graph meta tags, website owners can improve the visibility and engagement of their content, and reach a wider audience online.

Let’s take a look at the Open Graph definition on the OGP website:

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

While many different technologies and schemas exist and could be combined together, there isn’t a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.

From the The Open Graph protocol website.

According to SEO expert Neil Patel [1], social media meta tags can significantly impact link performance on social media websites. Content marketing, in this case, specifically placing your content where large audiences exist, is a powerful strategy that can generate views and engagement in the form of likes, comments, and shares.

What are Open Graph Meta Tags and Why Should We Use Them?

The Open Graph Protocol is used to convert a web page into a rich object and is useful, in particular, when sharing content on social media platforms such as Facebook, Twitter, and Instagram as well as in applications such as WhatsApp and Skype.

Open Graph Meta Tags (OGMTs) help to facilitate engagement when sharing content — for example, they can help draw the user’s eye to a link that’s been shared so instead of seeing a raw link, as we have below

https: //thospfuller.com/2020/12/25/fix-open-graph-meta-tags-are-missing/

we see rich content, which includes an image, title, and meta description.

As we will see shortly, adding OGMTs to a post or page in WordPress is easy enough to do using the All In One SEO Pack Plugin.

Does OpenGraph Meta Tags Replace HTML Meta Tags?

OGMTs are embedded in HTML and we can see an example of what this looks like by inspecting the source for a webpage that supports the OGP protocol. For instance, below we can see the page source for the article entitled “Tutorial: Learn How to Mount a Local Directory in a Pod running in minikube (2021)“.

OGMTs are HTML meta tags with an “og:” included in the tag property key — we can see the difference by comparing the two tags below:

HTML Meta Tag Example

The following is an HTML Meta Tag:

Open Graph Meta Tag Example

The following is an OpenGraph Meta Tag:

In the next section, we’ll discuss the importance of an og:image tag and what happens when it’s missing.

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 this 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 which 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

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.

Next, we refresh the results of the test 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.

Schedule an Appointment

If you need help with Technical Search Engine Optimization (Technical SEO) then schedule an appointment with me, I'll perform a site audit before our call, and when we speak we can discuss my findings and plan a way forward.

Schedule an Appointment

The image below shows us that the OGMTs have been found.

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

Facebook for Developers: Sharing Debugger can be helpful when some open graph meta tags are missing

We can test the og:image meta tag link preview on Facebook using the Facebook for Developers: Sharing Debugger console. The 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 Sharing Debugger tool to refresh scraped content — this is helpful when a website is undergoing many changes in a short period of time.

To run a test, enter the URL and then hit the “Debug” button.

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

Testing with the Facebook for Developers: Sharing Debugger is helpful when Open Graph Meta Tags are Missing

The initial testing 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 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 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.

How to Fix the "Image Too Small" Warning in the Facebook Sharing Debugger

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.

How to fix the Open Graph WhatsApp Missing Image Problem

We need to go through an extra step when dealing with an Open Graph WhatsApp missing image issue and we’ll describe what this entails here.

Next we need to choose the image and then update the schema — we can see this in the following image.

Next we’ll test with Google and check that the schema is valid.

Finally we can see that the Open Graph WhatsApp image issue has been resolved by pasting the link to this article into a WhatsApp conversation.

The experience of sharing links on WhatsApp will be improved considerably now that the Open Graph WhatsApp image issues have been reconciled. Recipients will see a nice preview of the link and if they have to go back in the conversation history to find it, the link will be easy to locate.

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.

Open Graph Meta Tags are Missing Conclusion

This article covered two issues that came about from an audit that I performed on my website. Once this issue was addressed in the AIOSEO Pack Plugin 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.

Open Graph Meta Tags Quiz

For your entertainment, I’ve added a quiz in the next section. Not all of these questions can be answered from this article, see question #5, in particular.

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

Questions and comments are welcome.

Open Graph Meta Tag Quiz

In the AIOSEO Social Networks option, what other social networks are available?
Do Twitter cards use Open Graph meta tags?
How can we validate our site’s Twitter card meta tag settings?
Consider that a page is shared on Facebook and both the page’s featured image as well as the AIOSEO (Social Networks, Facebook) default post Facebook image is not set — what happens?
Which should, in theory, result in better engagement: a picture with a face, a picture without a face, or a picture with an appendage, such as a hand or foot, but not including the person’s face?
Is the use of stock photography better than no image at all?
If we set the default post Facebook image in the AIOSEO Social Networks option does this override the featured image for a specific page or post?
What other WordPress plugins can be used when some opengraph meta tags are missing?
Can the LinkedIn Post Inspector identify one or more missing open graph tags?
Further Reading: Review Facebook Open Graph best practices and recommendations

Open Graph Meta Tags are Missing References

Which software applications, social media platforms, and websites support the Open Graph Protocol?

The Open Graph Protocol is a set of meta tags that can be added to web pages to define how links are previewed on social media sites. Below are some examples of software applications, social media platforms, and websites that support the Open Graph Protocol:

Facebook: Facebook was one of the early adopters of the Open Graph Protocol and currently supports it extensively.
Twitter: Twitter also supports Open Graph Protocol meta tags, although it has its own set of Twitter Card tags that can be used in conjunction with the Open Graph tags.
LinkedIn: LinkedIn supports the Open Graph Protocol, and it is recommended to use it to ensure that links shared on LinkedIn have accurate previews.
Pinterest: Pinterest supports Open Graph Protocol tags to improve the display of shared links.
WhatsApp: WhatsApp supports Open Graph Protocol tags to generate rich link previews when links are shared in chats.
Slack: Slack also supports Open Graph Protocol meta tags to display rich link previews.
WordPress: WordPress, one of the most popular content management systems, has built-in support for Open Graph Protocol meta tags.
Drupal: Drupal, another popular content management system, also has modules that allow for the easy implementation of Open Graph Protocol meta tags.
Shopify: Shopify, an e-commerce platform, allows merchants to add Open Graph Protocol meta tags to product pages to improve social sharing.

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.

Example page source with a pointer to where the missing meta tag information should be located. — An example of the Open Graph meta tag data in the ThosPFuller.com page source.

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.