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
To this:
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 & 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
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.