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 Rank Math’s Social meta Settings with your Facebook App ID

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 the Facebook App ID

2 Set the Default Open Graph Image using Rank Math

You can set the featured image from WordPress Dashboard > Rank Math > Titles & Meta > Global > OpenGraph Thumbnail. Then click on Add or Upload File button and set your image. 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:

rank-math-featured-image

And/or by opening Rank Math in the WordPress Block Editor sidebar, 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 Social Meta using the Rank Math plugin

You have added the social meta using the Rank Math plugin as shown below.

Social Meta using Rank Math

3.2 Check the page source

First and foremost, you must check the page source of the URL in question. Right-click on your page and click on View Page Source. Then find the og:image tag as shown below:

og:image tag

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.2 og:image found

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

Scenario 1

You are using minification on your website and your cache plugin is inputting too much inline CSS into your page source that your OpenGraph tags are pushed way too down your page’s source.

Open Graph Tags

If this is the cache, you must move your inline CSS to a file because Facebook and other social networks will only look for OpenGraph tags in the first 60kbs 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 OpenGraph tags.

Scenario 2

The gain browser cache option in most cache plugins like W3 Total Cache is known to not play well with Facebook’s OpenGraph 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

You should now see the OpenGraph tags update including the image.

If the above explanation does not solve your problems please feel free to write to our support team at support@rankmath.com from your registered email ID and our support team 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