Using Facebook's Open Graph to Customize the Preview When Sharing Your Website

I am a big believer in a bunch of little things all add up to an overall "impression" or customer view of you or your business. Today I want to talk about a little thing that takes five minutes but I believe really makes a nice impression when you are sharing your website.

It shows up in many places, for example:

When sending a link to your site to someone via Facebook, Reddit, WhatsApp, Skype, Twitter, Messenger, iMessage, and other various places. By default without customizing this, it looks for an image tag on the site and will pull that image and use it. This can sometimes be OK if you had a signature image that was the first image displayed on your site. But many people don't. The worst example of this is when it pulls a small image, perhaps a footer logo or something and skews/displays it as a page thumbnail and this looks really unprofessional. 

How to Fix This

We can add Open Graph Tags by adding a simple tag in between the open and closing head tags of your website. While we are in there we'll also add a title and description to create an entire user-friendly view when sharing links to your website Note that you must have access to add some basic code.

We'll start with making a custom image that we want to use as a preview for the website. I do this by taking a screenshot of a part of the site I like such as a gallery page. Then I open the screenshot in Photoshop and add a dimming layer (solid color layer at around 50% opacity), then I add my logo centered over the top. That part is if course optional but it's the way I like to do it because I send links to my sites a lot via social media.

Now that we have our image preview, we will add some code to the head of our website.

There are four property values that need to be added: og:title, og:type, og:image, and og:url.

So as example, basic formatting for my portrait site looks like this:

As a result, the link preview across all those platforms now looks like the screenshot below. You can not only see how the image preview looks, but the title and description as well.

Even something as simple as this can and does contribute to the overall impression of how professional you are to your potential client or whomever you are sharing a link to your site with. I consider it conversion rate optimization across all social platforms.

Go ahead give it a try with your website, post a link on Facebook, in an iMessage, or you can use the Open Graph debugger tool to test what the link will look like. 

For more info on the Open Graph Protocol and other properties that you can define, you can learn more on this website.

Lead image by TeroVesalainen via Pixabay.