<< Back to Blog

Changing the Facebook Preview of a Link

When you post a link in Facebook and most other social networks you will notice that an image associated with the link will be displayed. If you find that you are not getting the expected preview on Facebook when you link to your own site you may not have the necessary Open Graph Protocol (OGP) <meta> tags placed in the <head> tag of your site.

 

OGP as described on http://ogp.me :

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

 

To sum it up, specifying what information is provided to Facebook (for example) is just a matter of using <meta> tags with different parameters to specify things such as Title, Type, Image, and URL for an OGP object.  As an example my (this) site uses the following code:

 

<head>
...
<meta property="og:title" content="Charles K Howard" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.charleskhoward.com" />
<meta property="og:image" content="http://charleskhoward.com/wp-content/themes/charleskhoward/img/logo.png" />
...
</head>

 

This is what appears as a preview on Facebook when I post/share my website’s URL:

Capture

 

I was able to preview this by using the Facebook Object Debugger which can be found here. This is a useful tool to ensure you are leveraging OGP correctly and using it to it’s full potential.

 

If you are running a WordPress site the Yoast SEO plug-in (free) is a great tool to add this functionality to your site simply and easily.