Notes - SEO Social Sharing Meta Tag

Sometimes when building your own website, we don't think about SEO things. Actually, that was really important to make our SEO website better. That will not only impact how our website can be searched on search engines like Google, Bing, and etc. Also, will be impacted how are our site link will be showing when shared on another place. In this article, I will share my experience of how to make them look better showing links when shared on some other website.

To improve our link showing, we must add the meta tag to our website head. There was some approach to implement this, for example:

Default minimal Template

1<title>Page Title. Maximum length 60-70 characters</title>
2<meta name="description" content="Page description. No longer than 155 characters." />
3
4<!-- Twitter Card data -->
5<meta name="twitter:card" value="summary">
6
7<!-- Open Graph data -->
8<meta property="og:title" content="Title Here" />
9<meta property="og:type" content="article" />
10<meta property="og:url" content="http://www.example.com/" />
11<meta property="og:image" content="http://example.com/image.jpg" />
12<meta property="og:description" content="Description Here" />

Standart Template for Article

1<title>Page Title. Maximum length 60-70 characters</title>
2<meta name="description" content="Page description. No longer than 155 characters." />
3
4<!-- Twitter Card data -->
5<meta name="twitter:card" content="summary">
6<meta name="twitter:site" content="@publisher_handle">
7<meta name="twitter:title" content="Page Title">
8<meta name="twitter:description" content="Page description less than 200 characters">
9<meta name="twitter:creator" content="@author_handle">
10<-- Twitter Summary card images must be at least 120x120px -->
11<meta name="twitter:image" content="http://www.example.com/image.jpg">
12
13<!-- Open Graph data -->
14<meta property="og:title" content="Title Here" />
15<meta property="og:type" content="article" />
16<meta property="og:url" content="http://www.example.com/" />
17<meta property="og:image" content="http://example.com/image.jpg" />
18<meta property="og:description" content="Description Here" />
19<meta property="og:site_name" content="Site Name, i.e. Moz" />
20<meta property="fb:admins" content="Facebook numeric ID" />

Template for Product

1<title>Page Title. Maximum length 60-70 characters</title>
2<meta name="description" content="Page description. No longer than 155 characters." />
3
4<!-- Schema.org markup for Google+ -->
5<meta itemprop="name" content="The Name or Title Here">
6<meta itemprop="description" content="This is the page description">
7<meta itemprop="image" content="http://www.example.com/image.jpg">
8
9<!-- Twitter Card data -->
10<meta name="twitter:card" content="product">
11<meta name="twitter:site" content="@publisher_handle">
12<meta name="twitter:title" content="Page Title">
13<meta name="twitter:description" content="Page description less than 200 characters">
14<meta name="twitter:creator" content="@author_handle">
15<meta name="twitter:image" content="http://www.example.com/image.jpg">
16<meta name="twitter:data1" content="$3">
17<meta name="twitter:label1" content="Price">
18<meta name="twitter:data2" content="Black">
19<meta name="twitter:label2" content="Color">
20
21<!-- Open Graph data -->
22<meta property="og:title" content="Title Here" />
23<meta property="og:type" content="article" />
24<meta property="og:url" content="http://www.example.com/" />
25<meta property="og:image" content="http://example.com/image.jpg" />
26<meta property="og:description" content="Description Here" />
27<meta property="og:site_name" content="Site Name" />
28<meta property="og:price:amount" content="15.00" />
29<meta property="og:price:currency" content="USD" />

When we are adding those meta tags to our side. The shared social link will be more interactive. So, we can make more users come to our side. There is some link to validate our site SEO meta social tag, for example:

1Twitter: https://dev.twitter.com/docs/cards/validation/validator
2Facebook: https://developers.facebook.com/tools/debug
3Google: http://www.google.com/webmasters/tools/richsnippets
4Pinterest: http://developers.pinterest.com/rich_pins/validator/

reference: moz