Next.js Discord

Discord Forum

Open Graph images not behaving properly

Unanswered
Scottish Fold posted this in #help-forum
Open in Discord
Avatar
Scottish FoldOP
I created e-commerce web app. Here is the link: https://www.montre-shop.com/
I want to add open graph images for categories of watches: men and women and also for super-deals page.
Routes:
https://www.montre-shop.com/products/watches/categories/men
https://www.montre-shop.com/products/watches/categories/women
https://www.montre-shop.com/products/watches/offers/super-deals

I added open graph and twitter image as file in each folder (men, women and super-deals)

Then I try to access them to check if it is working:
https://www.montre-shop.com/products/watches/categories/men/opengraph-image.jpg
https://www.montre-shop.com/products/watches/categories/men/twitter-image.jpg
https://www.montre-shop.com/products/watches/categories/women/opengraph-image.jpg
https://www.montre-shop.com/products/watches/categories/women/twitter-image.jpg
https://www.montre-shop.com/products/watches/offers/super-deals/opengraph-image.png
https://www.montre-shop.com/products/watches/offers/super-deals/twitter-image.png
and all of them are accessible.



When I push that change to live web app and try to share some of those pages image is not loaded. Inside <head> tag image that is put as content is: https://www.montre-shop.com/products/watches/men/opengraph-image.jpg (doesnt contain categories, same for offers) and it fails to load image which is normal.

Can you please help, I dont understand why it is loaded in that strange way
Image
Image

4 Replies

Avatar
Scottish FoldOP
And when I click on link it is not accessible
Which is expected cause link is wrong
Image
Image
Avatar
Scottish FoldOP
Also, is there a way to set as open-graph image whihch is from external source (for single product page): http://res.cloudinary.com/montre-cloudinary/image/upload/v1706725262/products/DSC_0560_yhu4jn.jpg
Image is accesible and set as content for og:image meta tag but when I try to share on social media it doesnt show up. For discord It is displayed when share.
Avatar
Scottish FoldOP
UPDATE: For issue related to categories I found solution so that is solved ✅ Problem was that my url in openGraph object was not correct.
Remaining question/problem:
When set as open-graph image whihch is from external source (for single product page): http://res.cloudinary.com/montre-cloudinary/image/upload/v1706725262/products/DSC_0560_yhu4jn.jpg
Image is accesible and set as content for og:image meta tag but when I try to share on social media it doesnt show up for Whatsapp, Viber, etc. For some it works: e.g. Discord ❌