Have you ever wondered how Facebook, Twitter and other social media platforms pull an image, video, or a post title from a link you share?

It's actually very simple, but in order for it to work on your website, you will need to add a few lines of code.

Sharing to Facebook without a title or featured image

This Facebook post is not currently optimized to display any rich data, such as the post title or a featured image. Right now it is just displaying the link, which is pretty boring.

Let's fix that, and make this post a little more friendly. A post people will want to share.

Most social media sites use the open graph protocol which enables any web page to become a rich object in a social graph, AKA letting your featured image, post title and meta description appear on Facebook and Twitter.

<meta property="og:title" content="your post title" />
<meta property="og:description" content="your post meta description" />
<meta property="og:type" content="article" /><!– You can also use 'website' >
<meta property="og:url" content="your post link" />
<meta property="og:image" content="add a link to your featured image" />

Twitter is a little different from Facebook, in that you can also implement Twitter Cards, to drive traffic to your website. You can learn more about Twitter Cards by clicking here.

<meta name="twitter:card" content="Summary" />
<meta name="twitter:site" content="@Mirrorcomm" /><!– Add your Twitter handle here >
<meta name="twitter:title" content="your post title" />
<meta name="twitter:description" content="your post meta description" />
<meta name="twitter:image" content="add a link to your featured image" />
Apple Icon Template

Now that is looking a lot better. As you can see, the post title is now being displayed automatically, as well as the meta description. We even have a featured image. Now when a user shares your post it will automatically pull in all this data.

If you need any help implementing social sharing on your website, send us an email here.