How to set website social share image in pure HTML

It is not a secret that websites like LinkedIn, Facebook and Twitter do a social preview for your website link:

It depends on what you have under <social> section of your website.

So if you want to customise it or change to a new one there is an easy way to do so by adding these tags into the <head> section of every page you need to change:

<!-- Facebook/OpenGraph Image and description derived from the website link -->
<meta property="og:image" content="images/big_data13.jpg" />
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">

<!-- Twitter --> <!-- You can have different summary for Twitter! -->
<!-- <meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="YOUR_URL">
<meta property="twitter:title" content="YOUR_HEADING">
<meta property="twitter:description" content="YOUR_SUMMARY"> -->
<meta property="twitter:image" content="images/big_data13.jpg">

It was a bit annoying for me to discover that LinkedIn couldn't update the social shared image even after I changed my website code.

There is a tool from LinkedIn called Post inspector. You can use it to update the social share image:

Mike is a passionate and digitally focused individual with an abundance of drive and enthusiasm, loving the challenges the full mix of digital marketing throws up. Lives in the UK, completed MBA from Newcastle University in 2015.

How to set website social share image in pure HTML

An easy way to update your website with just a few lines of code

Now deploy and refresh. Here you go you have a new social share image!

Mike is a passionate and digitally focused individual with an abundance of drive and enthusiasm, loving the challenges the full mix of digital marketing throws up. Lives in the UK, completed MBA from Newcastle University in 2015.