Open Graph images not behaving properly
Unanswered
Scottish Fold posted this in #help-forum
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
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
8 Replies
Scottish FoldOP
And when I click on link it is not accessible
Which is expected cause link is wrong
Which is expected cause link is wrong
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.
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.
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 âŒ
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 âŒ
Pyramid ant
Niko, how didi you solve it?
I've put the opengraph-image.png in the route folde, I can see the meta tag generated in the production, but when pasting my URL, the image is not visible...
can you help?
I've put the opengraph-image.png in the route folde, I can see the meta tag generated in the production, but when pasting my URL, the image is not visible...
can you help?
production meta tag generated
