When creating a website, like I did with **[phillfromgchq.co.uk](http://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. 



<h1>The Facebook link</h1>

Below you can see the metadata taken from [my website](view-source:http://phillfromgchq.co.uk/). 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.

<center><img src="https://img1.steemit.com/600x0/http://phillfromgchq.co.uk/images/other/1200x630/Phill_1200_630_Samsung.png"></center>

http://phillfromgchq.co.uk/images/other/streg.png

<center><img src="https://img1.steemit.com/600x0/http://phillfromgchq.co.uk/images/other/1200x630/Phill_1200_630_raspberry.png"></center>

http://phillfromgchq.co.uk/images/other/streg.png

<center><img src="https://img1.steemit.com/600x0/http://phillfromgchq.co.uk/images/other/1200x630/Phill_1200_630_02.png"></center>


http://phillfromgchq.co.uk/images/other/streg.png

<center><img src="https://img1.steemit.com/600x0/http://phillfromgchq.co.uk/images/other/1200x630/Phill_1200_630_01.png"></center>



<h1>Twitter</h1>

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"> `

<h1>The result</h1>

<center><img src="https://img1.steemit.com/500x0/
http://eurobeast.dk/misc/Steemit/Februar/Face.jpg"></center>
<center><em>The facebook  link.</em></center>

<center><img src="http://eurobeast.dk/misc/Steemit/Februar/twit.jpg"></center>
<center><em>The twitter link</em></center>


You can read more about creating OpenGraph metadata for link here:
https://blog.kissmetrics.com/open-graph-meta-tags/

<hr>
<p><center><a href="https://www.patreon.com/katharsisdrill"><img src="http://eurobeast.dk/misc/public/Katharsisdrill_rund_150X150.png"></a></center></p>