Blank image on social tab configuration (if i use CDN like Cloudfront)

try turning off Polish in cloudflare and see if that makes a difference.

The polish configuration its not activate in host.

Hello Rodrigoflausino,

I’m sorry the image in the social tab is not updated if you’re using a CDN. First, does this happen in the social tab or when you share the post? Also, can you confirm that you are using an absolute image path for the URL instead of a relative image path?

Hi! Only in social tab, with web stories editor. I use the S3 with Cloudfront and when i upload (or choose an image uploaded from Cloudfront) only shows the image name. But if i edit the post (with new window or reload the page) shows blank image:

https://d378gi9d49keux.cloudfront.net/wp-content/uploads/2022/10/20073104/bug-plugin-yoast-01.jpg

The image:

https://d378gi9d49keux.cloudfront.net/wp-content/uploads/2022/10/20072813/Marin-Kitagawa-Cosplay-My-Dress-Up-Darling-Pietra-capa-03.jpg

In Facebook and Twitter posts its working.

https://selectgame.gamehall.com.br/web-stories/veja-estes-lindos-cosplays-da-marin-kitagawa-de-my-dress-up-darling-da-pietra-pittsaba/

https://selectgame.gamehall.com.br/web-stories/call-of-duty-modern-warfare-ii-requisitos-minimos-e-recomendados-no-pc/

I use the Offload Lite plugin to upload to S3.

Hey @rodrigoflausino,

Thank you for your elaborate reply.

I’m not sure if we can actually see why that would be happening, we don’t have a CloudFront CDN setup to test this with, but do you happen to have any errors in your browser console? I’m thinking for instance of CORS issues (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors) or similar issues. If not, does the image load when Yoast SEO and the Web stories plugin are the only active plugins? You can test this without affecting your site visitors with the troubleshooting mode of the Health Check plugin: https://yoast.com/help/how-to-check-for-plugin-conflicts/

Hi! The error like this:

GET https://d378gi9d49keux.cloudfront.net/wp-content/uploads/2022/10/20072813/Marin-Kitagawa-Cosplay-My-Dress-Up-Darling-Pietra-capa-03-640x409.jpg net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

GET https://d378gi9d49keux.cloudfront.net/wp-content/uploads/2022/10/20084838/Ganyu-Cosplay-Genshin-Impact-Cos-Miu-capa-02-640x385.jpg net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

I tried to add “crossorigin-“anonymous” in Chrome (in debug mode) and this show image in browser.

https://d378gi9d49keux.cloudfront.net/wp-content/uploads/2022/10/20102026/erro-crossorigin-yoast-01.jpg

https://d378gi9d49keux.cloudfront.net/wp-content/uploads/2022/10/20102036/erro-crossorigin-yoast-02.jpg

My Cloudfront header configuration (i set this in Cloudfront –> Distributions -> Origins -> Edit Origin):

Cross-Origin-Resource-Policy: cross-site
Access-Control-Allow-Methods: POST, GET
Access-Control-Allow-Headers: Origin, X-Request-Width, Content-Type, Accept
Access-Control-Allow-Origin: https://selectgame.gamehall.com.br

@rodrigoflausino While researching, I stumbled on this forum thread that seems related to what you are experiencing. You mentioned using the Web stories plugin and Cloudfront CDN.

Can you try the steps recommended here and let us know if it helps?

I tried this steps and add the header. And not working in Yoast SEO. Maybe because the image block from Twiter and facebook need the crossorigin=anonymous.

I’m sorry the issue persists, but it’s not specific to our plugin but to the CDN setup or cross-origin policy. You can confirm by performing a conflict check.

The fastest way to rule out any conflict is to deactivate all non-Yoast plugins and switch to a standard theme like Twenty Twenty.

Please test this on your development or staging site if you have one. If not, we recommend using the Health Check & Troubleshooting plugin. This plugin has a troubleshooting mode, which does not affect normal visitors to your site.

If you’re unfamiliar with checking for conflicts, we’d like to point you to a step-by-step guide that will walk you through the process: How to check for plugin conflicts

If you feel uncomfortable doing this yourself or if this does not solve your issue, our Yoast SEO Premium plugin comes with one year of (technical) support.`

After you commented I tested this in traditional posts and in the Gutenberg editor the images appear normally. Is it something related to the integration with the web stories plugin? I’ll create a topic on their forum, but I don’t know if it’s something that would have a fix.

Still the problems persist and the images don’t show up there.

To provide a little bit of context:

The Web Stories editor runs in a strict and more secure mode called cross-origin isolation. This is usually the case when video optimization is enabled in the Web Stories settings (which we recommend!)

With cross-origin isolation, it is mandatory for images/styles/etc. from external sources to have appropriate CORS headers and also the crossorigin="anonymous" attribute.

In your case it looks like your images have the correct CORS headers, but Yoast is not adding this attribute.

You can learn more about cross-origin isolation at https://web.dev/cross-origin-isolation-guide/

Hi! After the new update today, the problem still persist in tab inside the web story editor.

How i can try to add the crossorigin configuration tab by myself in wordpress plugin editor? Because i need the video optimization from web story plugin.