How to handle custom og:image on a single page?

Hey guys,

I love the new feature to add a custom og:image and custom code to a single page. But, I am not sure how to define the og:image without spending hours to find our the file names created by the webflow cdn.

Of course I want to use pictures from a certain page when that certain page gets posted on facebook. I want to use the background image from the hero section as this is the only picture that is big enough. I know the original filenames of those pictures e.g. background_page1.jpg but the webflow cdn renames it to dkjfbsdocnspnaso_background_page1.jpg. To find out the file name I would have to access every page and have a look into the developer tools …

I love the new feature but at the moment I have no clue how to use it efficiently …

Please help ;)!

Thanks!

Cheers, Michael

If you host on your server, the path is predictable, it will be www.url.com/images/filename.jpg

If you host on webflow, just put your image on a dummy page, publish and right click on the image to copy the url. It could besimpler but it’s taking a minute, not hours.

In both cases your image needs to be attached to a style or put in a page to be sure it’s published and stays there when you duplicate or clean the site.

When I work with a client, I tell him to manage the open graph image by hislef by uploading a “opengraph.jpg” image at the root of his site, so I already know the url to put and I don’t depend on the client to state it. Then he can change it when he wants by swapping images on the server.

Hi vincent,

indeed hosting it on another server might be the best option. Of course I would prefer to automatically change the og:image when the hero section image changes, but I am afraid that is not possible, right?

I currently have 80 pages online with different background pictures in the hero section and those pictures should appear as og:images. To find out the url of each picture I have to access the developer tools or - as you suggested - create a new page including all 80 pictures (but I am not sure if this page size won’t become to big) and right-click every image. I am afraid I won’t be able to do it in a minute :wink: …

Thanks!

Cheers,
Michael

Always name your hero image the same, delete the old one from the asset manager before adding the new one, it should work. It’s totally predictable if you host outside of Webflow.

Open Graph is important to everyone, Webflow already did a smart move adding them per page, I am sure they will listen and improve it to make it more obvious for us. open Graph is here to stay and probably become more and more important and adopted.

And Webflow is definitely here to stay too :smiley:

Definitely! Webflow is amazing ;)!

The new feature to add og:images per page is great. And I would love to have an option to add a picture from the asset manager in the future!

Thanks, vincent!

Cheers,
Michael

Feel free to make a small post here under the Whishlist category, asking for this. Take some time to think how you would like the feature to be tailored, then do it :slight_smile:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.