Images not displaying in previews within Facebook and Messenger

#86427
  • Resolved Mike Allen
    Rank Math pro
    Content AI Starter Trial

    Does RankMath control the image preview for Facebook and Messenger?

    Images for one of my sites do not always render correctly and I am not sure which plugin or tech to WP component is causing the problem. If this is RankMath, then how do I resolve this?

    For example, see this preview.

    Thanks!
    https://staging.dandelion-seeds.com/

    • This topic was modified 4 years, 3 months ago by Mike Allen.
Viewing 1 replies (of 1 total)
  • Hello,

    Thank you for getting in touch with us.

    Your site seems to have duplicate opengraph meta. Please disable the plugin generating the extra opengraph meta, which is the meta for social sharing.

    Please note that there are a few reasons for the 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:

    1. First and foremost, you must check the page source of the URL in question. Search for the og:image tag like in this Video:
    https://i.rankmath.com/aJCccE

    If the og:image tag is not found, that means Rank Math is either disabled or not able to print your social tags. Once done checking if Rank Math is enabled, you must check why it isn’t able to print social content by following this troubleshooting guide:
    https://rankmath.com/kb/check-plugin-conflicts/

    Make sure to follow all the instructions carefully.

    2. Assuming the og:image tag was found in step 1, 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:
    turn off minification

    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 WP > Performance > Browser Cache > HTTP (gzip) compression
    w3 total turn off gzip compression

    Then, clear your website and server cache (including Cloudflare – if enabled)

    Once you are done, you might want to test again here:
    https://developers.facebook.com/tools/debug/

    Click the Scrape Again button:
    scarpe again facebook debug tool

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

    Hope that helps and please do not hesitate to let us know if you need our assistance with anything else.

    Thank you.

    Hello,

    Since we did not hear back from you for 15 days, we are assuming that you found the solution. We are closing this support ticket.

    If you still need assistance or any other help, please feel free to open a new support ticket, and we will be more than happy to assist.

    Thank you.

Viewing 1 replies (of 1 total)

The ticket ‘Images not displaying in previews within Facebook and Messenger’ is closed to new replies.