▼
Streaming live at 10am (PST)

Showing correct thumbnail when sharing link on social sites

#1

Hey Guys,

"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." 

<meta name="title" content="Digital Inspiration" />
<meta name="description" content="Technology and Software Blog" />
<link rel="image_src" href="http://www.labnol.org/screenshot.png" />

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.

Thank you!

#2

custom meta and link tags can be added to the custom head code area of your website.

just go to your website's settings =)

#3

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...

Facebook Open Graph Meta Tags

#5

@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>

Am i doing something wrong?

#6

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..

#7

I have tried it but doesn't save, and says something is wrong

#8

your last meta tag doesn't have an ending " /> "

#9

that worked now! Thanks a lot guys @PixelGeek, @cyberdave

#10

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.

Any help would be appreciated.

Thanks,
James

#11

Hi there!

I've applied the Facebook Open Graph meta tags but doesn't work and I can't find the problem...

http://dr-francisco-selva.webflow.com/

https://webflow.com/website/dr-francisco-selva

Facebook detects 3 "empty" images.

Thanks in advance!

#12

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. smile

Google Chrome.png2194x836 413 KB

I did a check on the tags themselves and those are fine:

Google Chrome.png2384x1464 684 KB

But when I look at the image source of the image shown in the facebook post, it is showing an image url to path:

http://www.franciscoselva.com/images/Fadeit-logo.jpg

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.

I hope that helps smile Dave

#13

Hi @cyberdave!

I've cleaned the javascript files, checked the Open Graph tags and now works! smiley

Thank you so much!

#14

@jselva, that's good news, thanks for the update smile We have some neat surprises coming in the future related to this, stay tuned ! wink

#15