bool(false)
Back to Blog

Setting Up Social For Success: How To Customize Preview Thumbnail Images For Your Website

April 5, 2013

By Cypress North
4 Comments

According to a study conducted by AddThis, 52% of all sharing on the web happens on Facebook. As marketers, that’s a number you can’t ignore. Clearly, this presents a huge opportunity for companies to optimize their content for sharing on Facebook. One area in particular is the image that is displayed along with the link when shared on the social network.

Broken Image Links or No Thumbnails?

One problem with sharing URLs on Facebook is that sometimes you have no control (or very few options) over the image that is displayed with the link. As marketers, our job is to catch people’s attention and get them to take action. Remember, people are not actively seeking and searching for your content on Facebook. You want them to discover your content and give them reason to pay attention. Images on Facebook add that visual element that creates contrast and helps the shared link stand out for the average user who is passively scrolling through the News Feed.

Here’s a really simple example to demonstrate what I’m talking about.

Say I want to share this page about the founders of Warby Parker on Facebook. There are four great profile images of the founders on the page, so one would think that these are the images that Facebook would show you as options to use as the thumbnail image.

Warby_Parker_Meet_the_Founders

However, when I copy and paste the URL into the status box on Facebook, the following appears:

Customize_Thumbnail_Image_on_FB_2

There’s no thumbnail image that appears alongside the preview of the link. Zero options. This is bad. Especially because Facebook recently began showing lager images and longer link previews in order to increase clicks and user engagement.

Even more reason to tell Facebook exactly what image, title, and description should appear for your site URLs.

So let’s say that I want to use the image below, which I created in Photoshop using the photos on the page, to encourage people to click on the link. I used a bright blue Warby Parker link color as the background to make the photo pop a little. I also added the logo for brand recognition for those who only look at photos when scrolling through the news feed.

Sample-Warby-Parker-OG-Image

Now that I’ve got my photo, all that’s next is adding the meta tags to the header section of the page.

Open Graph tags

Here is an example of the open graph tags I would insert into the <head> section of the page . If you don’t know code, ask a developer for help. Using this META tag strategy, you can define the images, text, and other items to use when sharing a page on your website.

site_name

This one is pretty standard. Add the name of your website.

<meta property="og:site_name" content="Your Website Name Here"/>

title

What is the title of the page for this particular URL? Specify that here. In our experience, the title length can be around 90 characters before it gets cut off.

<meta property="og:title" content="Your awesome title goes here, about 90 characters in length."/>

description

This tag tells Facebook how you want your website categorized. Are you sharing a post from your blog? Specify blog.

<meta property="og:description" content="Compelling description of URL that is about 300 characters in length."/>

image

This is the tag that tells Facebook, “Hey Facebook, use this image as the thumbnail anytime the page is shared.” This is where I would add the file URL of the above image.

<meta property="og:image" content="YOURIMAGEURLGOESHERE.JPG">

url

This is where you would add the URL of the page that is being shared.

<meta property="og:url" content="http://yourcontentURLgoeshere.com/">

type

This tag tells Facebook how you want your website categorized. Are you sharing a post from your blog? Specify blog.

<meta property="og:type" content="blog"/>

Now, if the correct open graph tags were added to this page, this is what would display if I was sharing the founders page on Facebook — a much more visual appealing link preview to look at!

Customize_Thumbnail_Image_on_FB_With_Imag

An added bonus: the nice thing about setting these open graph tags up properly is that it works on other social networking sites like Google+ and Pinterest.

Did you add a tag and it doesn’t work? Try using the debugger tool for help.

Conclusion

As a broad solution, you can set your open graph tags to automatically pull in the title tags and META descriptions that you’re currently using on the site and allow Facebook to select an image from your post for the thumbnail. Start small. For content that has long shelf life, such as infographics and resource guides, take advantage of the opportunity to customize open graph tags for these URLs because you want to give these pieces longer legs. Optimize to help humans discover your content and increase click through rates by using compelling, captivating visuals.

Using open graph tags to control your marketing message is an easy and simple tactic you can implement today. Don’t let all of the hard work you put into creating great content go to waste — set it up for optimal social sharing performance and sustainable, long-lasting results.

Cypress North

Cypress North

We are a small group of developers, marketers and designers who are experts in their field. We work hard to surpass our clients’ goals; word-of-mouth is our best friend. Our unique expertise in both internet marketing and development allows us to accomplish projects that others simply can’t. If you are looking to choose the steak over the sizzle, you’re in the right place.

See Cypress's Most Recent Posts

Share this post

4 comments

Nicko Gibson June 5, 2013Reply

Very good info. I’m working on an article now and I’m trying to create a meta image for an infographic.
I’ll try adding the code directly in the HTML part of the article. (Hope that works?) I’m using Blogger, and funny thing (I think) that the meta description feature doesn’t work well with G+ right now, they’re both Google products!

Charles November 30, 2013Reply

Very helpful blog! Thanks!!!

Sébastien November 28, 2014Reply

Be sure to set an absolute path for the image, because debugger refused the relative path.

Jeff Agostinelli December 22, 2015Reply

Is there something I need to set up in addition to these lines in the ? They dont’ seem to take??

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Search our blog

Start A Project

Categories

What's next?

Well...you might like one of these

Article

Cats, Cobbed Corn & Cameras:...

Last year, we gave you a taste of what great things the...

Read article

Article

Instagram Releases IGTV Video Hub, New...

  Subscribe   Don't miss what happened in the...

Read article

Article

How To Use Email Addresses For Ad...

Targeting the inbox has been a fixture in the marketing...

Read article