▼
Streaming live at 10am (PST)

Open Graph issue

#1

Hi webflow fam,

Is there a way to get Open Graph image to automatically pull the header image on the specific page?

Website I’m referring to: https://preview.webflow.com/preview/amarisb?preview=14fe724b83c0abdfe788e7d3feb563d1

When we share a link on FB or Twitter or Linkedin, it doesn’t really consistently pull the same images for open graph. Sometimes it shows a blank white screen, sometimes just the logo, sometimes it arbitrarily pulls an image that is not the main/header image.

For instance, for this page http://www.amaris-b.com/body/weight-loss, I would like the main stomach header/slider image to automatically appear on thumbnails when shared. However, currently it doesn’t show any images.

As you can see, there are many many pages on the website, and manually entering an Open Graph URL would be extremely time consuming, so I’m wondering if there’s a way to automate this?

Any help would be greatly appreciated.

Cheers.

#2

hi @Clarinta, Webflow properly implements the OG tags, however on Static and Dynamic pages, the only way to set that tag natively is through the page settings, see here: https://university.webflow.com/article/how-to-edit-your-sites-og-title-description-and-image

You might be able to do some custom code trickery, however for best results I would use the built in, standard way of adding those images. If you do not specify the image as intended by Facebook, then Facebook will pick some random image on the page. This is expected behavior.

The good thing is that you only need to make the update on each page once, so hopefully it will not take too long. It might be a good idea to make it part of your workflow to set the OG image as one of the first steps when creating a new page on the site.

The alternative might be to use some javascript trickery, here is a starting point for you to look at: https://stackoverflow.com/questions/44552942/dynamically-changing-the-content-of-meta-property-ogimage

I hope this helps.