1. Home
  2. Knowledge Base
  3. SEO Suite
  4. Open Graph/Social Preview Image Is Not Displayed

Open Graph/Social Preview Image Is Not Displayed

You may encounter a situation where your Open Graph/Social Preview Image for posts & pages on your website isn’t showing up when you’re sharing your website. Before we look at why that may be the case, let’s walk through how you can set your Facebook App ID and Open Graph Image with Rank Math:

1 Configure Facebook App ID in Rank Math

Facebook App ID is one of the basic tags that Facebook recommends using on all content types. But to note, this tag was used for Facebook Insights, which allowed users to view and access analytics on traffic to your website from Facebook.

Since Facebook Insights is no longer available, you may skip adding this tag, but the sharing debugger continues to provide warnings for not adding the app ID. You may consider creating a new app or use Facebook’s default app ID (966242223397117) to remove the warning from sharing debugger.

To set your Facebook App ID go to WordPress Dashboard > Rank Math > Titles & Meta > Social Meta. Here you can set the Facebook App ID in the Facebook App field.

Set Facebook App ID in Rank Math Social Meta

Once you’ve added the Facebook App ID, click the Save Changes button at the bottom of the page for Rank Math to update the Open Graph tags.

2 Set the Default Open Graph Image Using Rank Math

You can set the fallback Open Graph thumbnail at WordPress Dashboard > Rank Math > Titles & Meta > Global > OpenGraph Thumbnail. Click on Add or Upload File button and then set your image. Finally, click on Save Changes.

OpenGraph Thumbnail

This is in addition to the individual post/page settings where you can always easily set a custom Open Graph/Social Preview image simply by uploading a featured image:

Add featured image

And/or by opening Rank Math in the WordPress Block Editor sidebar and adding one through Social tab, as shown below:

Rank Math Open Graph Image

3 Why the Open Graph/Social Preview Image Isn’t Appearing

The social options may be tricky to understand and configure but the outcomes of them are massive. There are a few reasons for Facebook (or any other social network like WhatsApp) not picking your images and other social tags. We will list them below so you can check which one applies in your case:

3.1 Added Facebook/Twitter Sharing Images

At first, you need to check If you’ve added Facebook/Twitter sharing images through Rank Math Meta Box as shown below.

Social Meta using Rank Math

3.2 Image Dimensions & Image Format

If you’ve added an image, then double-check the dimension and format of the uploaded image.

Facebook currently supports only jpeg, png and gif image formats. So if you’re trying to add an image of webp or any other format, then Facebook and similar social media platforms might not be able to recognize them.

Similarly, the recommended image size is 1200px X 630px. Using a different dimension may or may not be read correctly by individual social networks.

3.3 URL Is Accessible

Then, you need to check if the page URL and Open Graph image are accessible. If for some reason your server responds with a 403 Forbidden error or other errors, then Facebook and other social media platforms might not be able to crawl and access the contents of your page.

To check if your URLs are accessible, open the URL checker and then add the page URL and Open Graph image URL. Click the Check Status button and now you’d be able to check if your URLs are returning a status code HTTP 200.

Check if URL is accessible

3.4 Check the Page Source

Next, you must check the page source of the URL in question. Right-click on your page and click on View Page Source. Then check if you’re able to find the og:image tag added in the source code.

Check OpenGraph Image tags in source code

If the og:image tag is not found, that means Rank Math is either disabled or not able to print your social tags. Once you have checked whether Rank Math is enabled, you must check why it isn’t able to print social content by following this troubleshooting guide. Please be careful and follow the instructions correctly.

3.5 og:image Found Towards the End of Source Code

Assuming the og:image tag was found in the previous step, we can proceed with the next step to find the issue.

If you’re using minification on your website and your cache plugin is inputting too much inline CSS into your page source that your Open Graph tags may be pushed way too down your page’s source code.

Check if OpenGraph tags are pushed towards the end of source code

If this is the cache, you must move your inline CSS to a file because Facebook and other social networks will only look for Open Graph tags in the first 60 KB of your page’s source.

If they don’t find it, they will assume you haven’t added them. They don’t want to waste their resources crawling huge pages looking for Open Graph tags.

3.6 Gzip Compression

The gzip browser cache option in most cache plugins like W3 Total Cache is known to not play well with Facebook’s Open Graph detection. If you have it enabled, disable it.

The option for W3 Total Cache is at WordPress Dashboard > Performance > Browser Cache > HTTP (gzip) compression.

Disable HTTP (gzip) compression

Then, clear your website and server cache (including Cloudflare – if enabled). Once you are done, you can test again.

Click the Scrape Again button:

Scrape again in Facebook sharing debugger

You should now see the Open Graph tags updated including the image.

And, that’s it. We hope the article helped you resolve the issue. In case, If the above steps did not resolve your problem, please feel free to reach our support team directly from here and will be more than happy to help…

Was this article helpful?

Still need help?

?

Submit Your Question

Please give us the details, our support team will get back to you.

Open Ticket

Related Articles