Now a days almost every website encourages visitors to share their content like: article, videos, images and pages on social network, where Facebook, Twitter and Instagram are the mostly used by websites.
And there is no doubt, that social media sharing became the most effective way for individuals and businesses to divert traffic to their websites or portals.
Facebook, Instagram and Twitter are the by far most popular sharing mediums, lets look at the meta tags implementation for these below:
Facebook provides various options, that how shared pages should appear in the facebook timeline, though by default every website shared post uses the “appropriately” the default type.
For example if someone shares the page of rida.dk on Facebook, that will be default display like this:
Twitter also has multiple format of shared web pages that appears in it’s feed. Let’s look at the default shared post style of Twitter, that is called “Summary Card with Large Image”
As you can see above, that both shared pages appearance has multiple attributes.
- A big image and prominent bold title
- A description
- And the domain name
Implementation of meta tags
How to specify these attributes with meta tags. When a link is shared, Twitter and Facebook both scrape the shared web page and read it’s meta tags to display appropriate page information.
Facebook uses the OpenGraph, and following are the meta tags to support Facebook Share.
<meta property="og:url" content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />
Where as Twitter has it’s own meta tags, as given below.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@bolddk">
<meta name="twitter:title" content="Leicester udlejer dansk keeper til Belgien">
<meta name="twitter:description" content="Leicesters unge målmand Daniel Iversen rykker til belgiske Oud-Heverlee Leuven på en etårig lejeaftale.">
Both Facebook and Twitter has developer page for detailed explanation of the meta tags.
