“When people submit stories from your blog/site on to social sites like Facebook, they also have to choose a thumbnail image that should go along with that link. These thumbnails are often generated automatically from pictures that are found in the corresponding web page or blog post.”
I was having a look into custom attributes and I was wondering how can we set up these tools on webflow. I found a code that goes into the body of the page but as we have this function built into webflow perhaps someone who knows how to use could give a handy here. For sure many people are unfamiliar with this.
Hi, if you want to have social media sites read your post or page image to show with the social share correctly, you should use open graph tags. Facebook for example, needs these to show content the way you want it to be shown (although it will also try to determine the images and text itself even without these tags, but the results are not guaranteed).
For best results, add open graph meta tags in the custom head code section of the site settings, as @PixelGeek suggested.
Here is a link that describes the basic open graph meta tags that Facebook uses, and how these are used to control how your website is shared … these tags are also used by google+ twitter, Linked In and others…
@cyberdave Thnks Cyberdave, I have read all instructions in this tutorial but I still can’t make it to work. The code I used here is this one for my page:
<script>
<meta property="og:title" content="Grow Music Store"/>
<meta property="og:image" content="http://www.vandal.com.br/products/15171-cine-grow"/>
<meta property="og:site_name" content="Grow Music and Artists Website"/>
<meta property="og:url" content="http://www.growmusic.com.br/store.html"/>
<meta property="og:type" content="blog"/>
<meta property="og:description" content="So we finally added some nice features for our website with a partnership from some cool brands producing amazing shirts and hats."
</script>
Hi, remove the script tags, just use put the meta property tags in your head section… meta tags do not need to be enclosed with opening, closing script tags. Try that…
How do you add these attributes to single pages? As in a want to use different images for different pages and not the whole site overall which is what would happen if i placed it in the custom head code section of the site section.
Hi @jselva, it might be because you have some javascript errors on the page, so that page has not loaded normally. Can you fix the error, then try again?
See image, the problem seems to be on one of the javascript files you are referencing.
Which does not match what you have in the open graph tags. So next step, clean all javascript errors on your page, FB probably cannot read your pages properly.
Dave
