I’ve successfully set up OG info including images for five of our original programs. Each of these programs have Collections that involve using the auto-generated Collection templates. They all draw their OG images from an OG image Collection I set up.
In adding a sixth program I made the mistake of setting up the social media info for my two program Collection template pages BEFORE having adding an OG image for this sixth program to my OG image Collection. This caused Webflow to insert an OG image from one of the other programs I’d originally set up.
Now that I have added the necessary sixth image to the OG image Collection, I can’t figure out a way to fix the social media set up to replace the wrong OG image with the correct one. I see no way to edit the OG image nor any way to delete all the social media settings for a Collection template and fill them out again.
Also, I inspected the incorrect OG image, and using “Edit as HTML” feature in Element, temporarily successfully edited it. But back in Webflow I tried to save the edit and it wouldn’t save it.
NOTE: to view the outcome of the issue, go to the URL provided below, copy the URL of the page and paste it into an email. It will show the OG image for a different program with the correct text info under this wrong image.
Without running tests it sounds like you’re describing a caching issue.
Open graph data is typically cached by individual services, and you have to research each to figure out how to clear that cache if a mechanism is provided.
You did not give the published page URL to the page you’re having problem with, so try FB’s open graph debugger. If you see the right image ( make sure to click the refresh button to load current data ), then your page is fine.
Michael,
Thanks for your attention to this. Perhaps you wrote just before I added to the post that I inspected the OG image, found that the wrong image was in the code, edited it successfully so the right image was displayed in the meta data entry panel on the Collection template. This is suggesting to me it is not a caching problem. However, when I tried to save the correct image within the data entry panel, it wouldn’t stick, and I didn’t see any option for saving the edit in the inspector.
This is the correct code for the OG image: External Image
Obviously I can’t see what you’re doing, or whether you’re using the new choose-from-assets feature. If your edits aren’t saving it could be a conflicting browser extension or browser cache issue that’s “breaking” the designer, or it could be an actual systems issue.
So your flow here is as normal… clear cache, use chrome incognito, make the change, see if it sticks, and if not, file a support ticket.
If your’re pasting in a URL somewhere, of course make sure it’s a valid URL for your og:image. Double check it in a browser.
Solved the issue. I had taken the first step (adding the program’s OG image to the OG image Collection, but not the second (specifying which OG image to use in the Program’s Actions and Initiative’s Collections.
