Featured Image Doesn't Display by Default on FB or Twitter

[NWinMotion]

Issue:
When I copy/paste a post URL into FB or Twitter, the Featured Image does not display by default.

Theme: Genesis Magazine Pro

Possible relevant plugins: Open Graphite Pro, Yoast SEO.

I've tried deactivating both of these and all plugins, but it doesn't solve the problem. There is one discussion about this kind of issue on Open Graphite Pro's support page, but the developer think's it's a theme or plugin conflict. Since the problem exists when all the plugins are deactivated, seems like it's a theme problem with Genesis.

For example:
https://northwest.motion.social/2019/08/31/finding-power-as-a-female-runner/

In this post the Featured Image is the same as the first image in the post. The featured image appears properly on the home page.

Facebook:
I can eventually get images to resolve by re-scraping in their debugger. The featured image will usually appear properly in the debugger. *Sometimes* there is an error message like this:

"Provided og:image, https://northwest.motion.social/wp-content/uploads/2019/08/[email protected] could not be downloaded. This can happen due to several different reasons such as your server using unsupported content-encoding. The crawler accepts deflate and gzip content encodings."

Despite this, the Featured Image appears properly in the debugger window.

However, when the URL is copied/pasted into a FB post, usually *all* of the images in the post get loaded. I can do a workaround by deselecting the images I don't want to display, but that is a hassle for my readers who want to repost...

Twitter:
Twitter only displays a gray placeholder image. The log info is all "successful"

Thanks for any suggestion!
David

https://northwest.motion.social/2019/08/31/finding-power-as-a-female-runner/

[AnitaC]

Are you scraping "new" content or old existing content. If you "new" content, then Facebook and Twitter will render a message that the page/post hasn't been shared before. You need to do that first scrape. That typically doesn't happen with Yoast unless there was an image there and then you changed it to something else. Then you need to scrape twice (the first will show the old, the second scrape will show the new).

But keep in mind, it's at Facebook and Twitter's discretion to render those images. Even if the code is right, I've gotten a gray box and had to do it again. We're kinda at their mercy when it comes to this stuff.

---

Need help with customization or troubleshooting? Reach out to me.

[NWinMotion]

New content.

Yes, I'm doing the same process as you describe Anita. I can usually force FB to load the images in the post, then select the one that is featured.

I don't see a way to scrape Twitter...just keep refreshing their debugger?

This is a relatively new problem for my site on both FB and Twitter. Prior to about ~6 weeks ago they both displayed the featured image without needing to scrape...

[Michael]

Hi - I am having this same problem. I'm using the Modern Studio Pro theme. About six weeks ago I noticed that my featured images would not show in social media shares. If an image is in the post itself, that's scraped by Facebook and used as the 'share' image but not the featured image (I often use a different image for the featured image). Twitter and LinkedIn don't show images at all. For example (from a post of mine shared on LinkedIn yesterday):

I've deactivated any plug-ins that have a connection to the featured image (such as The SEO Framework) but the problem persists. Has anyone found a solution? This is frustrating as, like many of us, I rely on social shares to generate blog traffic.

Thanks!

[AnitaC]

@nwinmotion Twitter uses Card Validator - https://cards-dev.twitter.com/validator. Your post shows the image when I use the FB share button on the site. I scraped it a few times. Open Graphite Pro and Yoast being active at the same time could be causing a conflict.

@gbums can you share a link to the post?

---

Need help with customization or troubleshooting? Reach out to me.

[Michael]

Hi, Anita.

Here's the share on Twitter: https://twitter.com/qburns/status/1183769619506630657

Here it is on LinkedIn: https://www.linkedin.com/posts/craigbsnyder_albums-singles-and-setting-fan-expectations-activity-6589619217966907392-DtLu

And here it is on my Facebook testing page, where it's pulling post and site images but ignoring my designated featured image (different than the two seen there): http://bit.ly/2VLlgMv

This is the behavior for all of my recent posts for the last month, not just this one.

Thanks!

[AnitaC]

@qburns I cannot see what the featured image is supposed to be on the post. Do you have your custom image as the featured image on the post edit screen right? You are depending on the image in the body of the post to be pulled?

Do you your image adequately sized for social media? What are the dimensions of the image.

---

Need help with customization or troubleshooting? Reach out to me.

[Michael]

This is the featured image for the post we are looking at: https://8sided.blog/wp-content/uploads/2019/10/indie-music-concert-P.png (the featured image is not in the post itself. this is something I've always done.) It is 4104 by 2736 pixels.

As you see here, it is selected as the featured image for this post:

I have been using the Genesis Framework since July 1 and only started having this problem 4+ weeks ago. Before the featured images always behaved as expected and showed up in shares. I am not doing anything different with the images that I know of. My post today — https://8sided.blog/the-seven-book-challenge/ - also shares on social media without the featured image appearing.

Thank you for looking into this. Let me know if I can provide any more info.

[AnitaC]

I scraped the new post 4 times on Facebook and get the image - https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2F8sided.blog%2Fthe-seven-book-challenge%2F.

I ran it through the Twitter validator and it's not picking up the Twitter card.

And I see a lot of errors in the site. Use your dev tools to see them and one of them is a Twitter plugin you have installed.

https://pasteboard.co/ICaxYLl.png

Maybe do a plugin conflict or remove any plugins you have for social media.

---

Need help with customization or troubleshooting? Reach out to me.

[Michael]

Thanks so much for the thorough look. Unfortunately, disabling plug-ins doesn't change the behavior.

I feel like the Facebook scrape error message is key: "The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags." I did some research on this. One suggestion was to purge the Cloudfare cache, which I did but no joy. Another opinion was that this is an issue the hosting provider should address. I am contacting my host -- I will update this thread if a solution is provided.

Thanks again.

[NWinMotion]

Hi Michael & Anita:

I appreciate the dialog about this issue.

It's still unresolved for me.

I am using Graphite and Yoast (can't remember the exact sequence, but I deactivated/reactivated them both and didn't observe any improvement.) They are both currently activated; I believe I decided I needed features from both, and since I didn't observe improvement, decided to keep them both activated.

I use WP Engine and they didn't think the problem was on their end although the FB debugger error that Michael is seeing makes it seem like it could/should be. Since Michael is using a different host, maybe now.

After publishing a post here's what I'm doing:

For FB, I go to the debugger and scrape a bunch of times. Sometimes the featured image eventually resolves, sometimes not. I'm not noticing any improvement if the post only has a featured image and no other images.

For Twitter, I don't observe any improvement using their card validator.

Best,
DL

[AnitaC]

@nwinmotion just to be sure you have the Twitter card checked off in the Yoast settings, correct?

---

Need help with customization or troubleshooting? Reach out to me.

[NWinMotion]

Hi Anita:

Good catch! That setting was toggled off for both FB and Twitter.

Hopefully that takes care of it for me.

Best,
DL

[AnitaC]

That's great. I'd say for anyone who see this post, just make sure you have all the proper social settings entered in there and the toggles turn on for FB and Twitter.

---

Need help with customization or troubleshooting? Reach out to me.

[Michael]

A quick update: I never could figure out why the featured images stopped appearing in shares a few weeks ago. I went back and forth with my host for a week (they were very patient and accommodating) but the cause remained a mystery.

However, I installed Yoast and used the settings described above. This has restored featured images in my shares. So it seems all is okay now — though I'd still like to know why it broke in the first place.

Thanks for all of the help!

[AnitaC]

It sounds like The SEO Framework might have initially caused the problem because you indicated it stopped while you were using that. Then when you deactivated it - there was no OpenGraph left in the site for Facebook and Twitter to see. Then when you installed Yoast, which includes OpenGraph, it started working again. At least that's how I'm seeing that as happening.

---

Need help with customization or troubleshooting? Reach out to me.

[Michael]

Perhaps - I had thought that it could have been a bug in SEO Framework since the plug-in addresses the featured image. The problem actually started while the plug-in was active, not just after it was removed (I deactivated it to see if it fixed the problem initially). I would think the issue would be widespread in that case but my Google-fu doesn't find anyone bringing it up with regards to SEO Framework. Perhaps I had a unique conflict.

But - all good! I wasn't married to SEO Framework and Yoast does what I need (including fixing the issue) so I'm set.

Thanks again for the detective work!

[NWinMotion]

@Anita do you happen to know whether those Yoast settings get turned off when the Yoast plugin is deactivated then reactivated?

I've had to do some plugin troubleshooting recently and that would be a possible reason they got turned off.

[AnitaC]

Yes, if you deactivate Yoast, then the OpenGraph isn't there anymore.

---

Need help with customization or troubleshooting? Reach out to me.

[Author]

Posts