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

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:

<meta property="og:type" content="website" />
<meta property="og:title" content="Fashion Inspired Photography by CVP Studios | 775-434-8122" />
<meta property="og:image" content="http://portraitsreno.com/img/cvp-site2.jpg" />
<meta property="og:image:secure_url" content="https://portraitsreno.com/img/cvp-site2.jpg" />
<meta property="og:url" content="http://portraitsreno.com/" />

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.

Preview of a link to my site in a Facebook post after adding the Open Graph tags.

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.

Log in or register to post comments

5 Comments

Gabrielle Colton's picture

I always wondered how to change this actually. Thank you!!

Bill Larkin's picture

:) Cool! - It's all those little things that all add up to a experience and impression. (I'm super picky about all that stuff)

Derrick Ruf's picture

Nice branding tip here Bill, agreed it all adds up to a larger sum.

And now you know how people use an image that looks like a video, but when clicked takes you to their website, without that image actually being on the page. LOL This is actually pretty useful though.

You can try https://SocialPort.io. We allow users to set a custom link preview for links on Facebook.