If you look at your site’s analytics, I bet you see some traffic coming from Facebook already. A link to your site gets shared on Facebook then people click on that link to equal a visit to your website.
What if I told you there’s something you can do to increase the number of clicks on those shared links? It’s much more simple than you might think.
Your Facebook Link Preview
So when a page on your site first gets shared on Facebook, Facebook sends its crawlers to that link to scrape some information so they can determine how to show your link preview. (Your link preview will look similar to the image above.)
Look, I’m about to use a word that might scare you away. Don’t freak out just yet though. It is actually much simpler than it might sound. Plus, I’m going to hold your hand the whole way.
Code. There I said it.
Still here? Awesome. Read on!
There is a bit of code we can manipulate that will allow us to customize the link preview Facebook shows. I’ll show you a snippet of code you can copy, edit to fit your needs, then paste it exactly where I tell you to. BUT, if you use WordPress, it’s even easier than that!
First, let’s look at the anatomy of a link preview.
The Anatomy of a Facebook Link Preview
There are 4 main things in a link preview. You have your title, the description, the URL, and the image. Let’s look at each in a little more detail.
1. The Title
A clear title without branding or mentioning the domain itself.
That’s all Facebook has to say on the title part. I’d go a step further and recommend using action words. Use this section to create a powerful Call To Action.
You need to look at this whole link preview as an Ad for your website, because essentially, that’s what it is! You’re trying to convince people to click through to your website.
Your title length should be no more than 95 characters but ideally, you’ll keep that to 55 characters or under. This way, it will appear fully on any device.
The description is where you can expand on your call to action title. It should definitely not be more than 200 characters but ideally, it wouldn’t be over 55 characters either. That gives us 110 total characters with the title and description and they’ll both fully show on mobile devices as well!
3. The URL
This one is pretty self explanatory. The url is your domain name. This one, we don’t really have much control over but it is an element that makes up the link preview so I wanted to include it here.
4. The Image
According to Facebook:
Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images. Images can be up to 8MB in size.
If you use images that are smaller than this, you will end up with a link preview that looks like this:
It should be noted that the image must be at least 200×200 pixels.
How It All Works
We tell Facebook what to show in our link previews using something called OG tags. No, not Original Gangster. In this case, OG stands for Open Graph, although this whole controlling how our link previews look is pretty gangsta if you ask me.
As social sharing became more and more prevalent, Facebook conceptualized OG tags and they were born as an open source project in 2010.
This is how we control what Facebook shows in our link preview. Now, there are many more OG tags than I have listed below but that’s beyond the scope of this article. For now, we’ll concentrate on the 4 items above. If you’re truly interested in reading more about the open graph protocol, you can do so here.
Adding The OG Tags With WordPress
This is so easy to do! First you’ll need a plugin called Yoast SEO. If you don’t already have this plugin, you can thank me later! There are other plugins available that will allow you to add OG tags to your site but I consider Yoast SEO THE WordPress plugin to have and it does the job nicely so we will use that.
Once you’ve installed and activated the plugin, you will notice a new little section at the bottom of each of your pages and posts when you go to edit them.
This is a powerful plugin and can really take your SEO to the next level but that’s more than I’m going to dive into in this article. For now, we’ll focus on the task at hand. Notice the 3 tabs on the left side of the box? The top looks like a traffic light, the second is the “share” icon, and the third is a cog. Click on the share icon.
Now you have two tabs on top. The one that’s open by default is Facebook. Can you guess what to do next?
That’s right. Enter your desired title where it says “Facebook Title”, your description where it says “Facebook Description” then choose an image by clicking the “Upload Image” button. (Alternatively, if you are using an image hosted elsewhere, you can paste the URL to that image in the box provided.)
Update your post and you’re all set! Well, almost! If your link has been shared before, there is one more step to make Facebook show the updated preview right away.
When a link is first shared on Facebook, they kind of “index” it like search engines do, based on what the crawler sees then. They will revisit every now and then and update any changes you’ve made but I bet you want these changes to happen now!
Facebook’s Sharing Debugger
You’ll need to visit Facebook’s Debugger Tool. Simply enter the URL of the page you just worked on and click the “Debug” button. Facebook will crawl your site real quick and display the results below. If everything looks good in the link preview, you’re done! Congratulations.
If it doesn’t quite look right, you can make changes using the method above and have Facebook scrape your site again by clicking the “Scrape Again” button.
Manually Adding The Code
<meta property="og:title" content="Your Title Goes Here" /> <meta property="og:description" content="Your Description Goes Here" /> <meta property="og:url" content="This is the URL of the page" /> <meta property="og:image" content="https://yoursite.com/path-to-image/" />
See, that isn’t too much code, now is it? 4 measly lines. Just erase my content and fill it in with your desired content then paste it in the head of your document.
Now that you know how to control how Facebook displays your preview link, you can optimize it to get more and more click throughs. Get creative with what you experiment with. I’ve seen no description and just a solid call to action title in all caps. I’ve also seen images used with a call to action typed out on the image. Read more about Sharing Best Practices for Websites, an article by Facebook.
What are some way’s you’ve improved conversions (click throughs)? Let us know in the comments.