/assets/blog-posts/social-network-76532.png George Botley George Botley 2020-04-11 2020-04-13 facebook
Apr 11, 2020, 3:07 PM

How do I alter the preview Facebook displays when content from my website is shared?

You've no doubt seen that sharing content on Facebook generates a little preview of the content in question including a photo, title and small description. Facebook will automatically generate this preview for you, but what if you want to specific the details shown? Thankfully, Facebook allows you to do just that. 

Open Graph

Facebook developed something called Open Graph way back in 2010. Open Graph allows you to define how your website, articles and other such web-based content are interpreted across the social web. This means your shared content goes from this:

Facebook shared content, before customising OpenGraph

Facebook shared content, before customising OpenGraph

To this:

Facebook shared content, after customising OpenGraph

Facebook shared content, after customising OpenGraph

How to set up Facebook Open Graph on my website

Facebook's OpenGraph makes use of meta tags in the <head> section of your website. The code snippet below is the exact meta tags required to produce the latter example above. If you're familiar with meta tags you'll notice they're fairly similar. The only major difference is the use of the property attribute instead of the name attribute.  

<meta property="og:site_name" content="Botley.">
<meta property="og:title" content="Freelance web developer, blogger &amp; airline pilot">
<meta property="og:description" content="Personal website of George Botley. Professional web design/developer freelancer, blogger and qualified airline pilot.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://www.botley.me.uk/images/fb-share-image.png">
<meta property="og:url" content="https://www.botley.me.uk/">

By default Facebook will populate the title and description Open Graph tags with the HTML <title> tag and the description meta tag respectively although sometimes you may want to override that further to provide a social media focussed preview excerpt. The full definition of Open Graph can be found on the Open Graph website but to provide details of the major Open Graph tags I include them in a table below. 

Site Name og:site_name The name which should be displayed for the overall site. e.g., "IMDb".
Page Title og:title Title of the content, i.e. About Us
Page Description og:description A one to two sentence description of your page or content.
Page / Content Type og:type The type of content, common examples include website or article. 
Preview Image og:image The full Absolute URL of an Image representing the page or object.
Page URL og:url The full Absolute URL for the page or object

Open Graph on WordPress

Yoast SEO logo

If you're not comfortable with making changes to Open Graph in code yourself then WordPress provides a plug-in to help you achieve this on a page by page, post by post basis. I personally recommend the Yoast SEO plugin.


Join the conversation and share your thoughts.