When creating a website, like I did with phillfromgchq.co.uk, one thing that will let it stand out is to consider to control how the link to your site will look on blogs and social networks. The OpenGraph metadata let you control this via the html <meta> tag.
The Facebook link
Below you can see the metadata taken from my website. it lets you set a 1200x630 px. image, a descriptive text and of course the link. Below you can see some of the different images I have used, switching them every fortnight or so.
<meta property="og:image" content="http://phillfromgchq.co.uk/images/other/Phill_1200_630.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta property="og:title" content="Phill from GCHQ - episode 17: No. 10" />
<meta property="og:url" content="http://phillfromgchq.co.uk/?phill=17&pa=view" />
<meta property="og:description" content="The ongoing webcomic about the suave, sophisticated British agent and cryptographer Phill Philby. This weeks episode: No. 10" />
<meta property="og:locale" content="en_GB" />
Examples of the 1200 x 630 px. image from my comic-site.
It is also possible to set the same properties for Twitter.
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Phill from GCHQ - episode 17: No. 10" />
<meta name="twitter:description" content="The ongoing webcomic about the suave, sophisticated British agent and cryptographer Phill Philby. This weeks episode: No. 10" />
<meta name="twitter:url" content="http://phillfromgchq.co.uk/?phill=17&pa=view" />
<meta name="twitter:image" content="http://phillfromgchq.co.uk/images/other/Phill_twitter.jpg">
The result
You can read more about creating OpenGraph metadata for link here:
https://blog.kissmetrics.com/open-graph-meta-tags/
