Opengraph image not rendering

AlejandroBolsterup
AlejandroBolsterup Member Posts: 3 ✭
edited July 18 in Digital Asset Management

Hey all,

I don't know if I'm the first to experience this or not, but ever since I've implemented Cloudinary into my application, the hyperlink opengraph images are not showing up. Neither on Slack, iMessage, etc…

I use a service called Prerender.io to cache my websites and store the images, description, tags, etc… for me. I also have restricted origins for my images to make sure nobody else loads them, could this be the issue? Or do I need to whitelist Prerender's URLs in Cloudinary to allow the opengraph to show up?

Thanks in advance,

Alejandro.

Tagged:

Comments

  • Tom
    Tom Member, Cloudinary Staff Posts: 94

    Hi @AlejandroBolsterup ,

    Thanks for reaching out.

    Are you able to see the error message when the images don't render? You can see the X-Cld-Error header in the response headers.

    It sounds like you are using strict transformations and whitelisting specific domains. If so then most likley the issue is related to this.

    Can you please share some URLs having this issue and how to replicate it? Perhaps, you have a webpage we can try sharing and replicate the issue on our end.

    I look forward to your response.

    Kind Regards,

    Thomas

  • AlejandroBolsterup
    AlejandroBolsterup Member Posts: 3 ✭

    Hey @Tom , thanks for your reply.

    Yes, indeed this is because I have strict transformations turned on. I was experiencing these issues when trying to put a URL into Slack, Whatsapp, or iMessage - the og:image wasn't rendering. I then turned off strict transformations, and they started loading fine. Unfortunately I don't think there's a way for me to see the X-Cld-Error header in Slack, Whatsapp or iMessage - is there any other way I could see these errors?

    Regards,

    Alejandro.

  • Tom
    Tom Member, Cloudinary Staff Posts: 94

    Hi @AlejandroBolsterup ,

    Thanks for getting back.

    If you can give me a sample URL you are delivering and a webpage to replicate this then I check which transformations were blocked on our end.

    You can also use Allowed strict referral domains to whitelist the domains that can generate unsigned dynamic transformations, have you tried this already?

    If not then, as per Strict transformations, only transformations that you specifically allow to be used dynamically or ones generated eagerly during upload or with an authenticated request to our API.

    I look forward to your response. 

    Kind Regards,

    Thomas

  • AlejandroBolsterup
    AlejandroBolsterup Member Posts: 3 ✭

    Hi @Tom ,
    I sent you a private message with a URL you can test.

    If you put that URL through www.opengraph.xyz you'll see that the data loads fine, but not when you send it through Whatsapp or even a Facebook post.

    Regards,

    Alejandro.

  • Tom
    Tom Member, Cloudinary Staff Posts: 94

    Hi @AlejandroBolsterup ,

    Thanks for sending that.

    So the transformation parameters you are using in the og:image URL based on that example c_scale,w_500/q_auto/f_auto and I also see you have set several domains under Allowed strict referral domains option and testing the article on www.opengraph.xyz, the image renders as it is part of the whitelist.

    I did not see Facebook in the whitelist so have you tried whitelisting Facebook's domain as well?

    Regarding, image not showing on WhatsApp, this article may help you: https://wordpress.org/support/topic/whatsapp-dont-show-some-images-on-opengraph-meta-tag/

    Let me know if those help at all?

    Kind Regards,

    Thomas

Categories