Why meta tag important?
A meta tag is a coding statement in the Hypertext Markup Language (HTML) that describes some aspect of the contents of a Web page. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.The metadata can be used to display content or reload page, search engines (keywords) and other web services.
A. Twitter Cards: Summaries, Images, Galleries, App, Video, Audio and Produts
B. Facebook: Articles, Photos, Audio, Video, Book and More
Note:Find the opening <html ...statement and add Open Graph namespace information. Add this code
=>Change the RED colour value..
=>"summary_larger_image" help to display Twitter thumbnail image share. You can also use "summary" for small Twitter thumbnail image. "product" can use for product post.
Tool for Testing and approval Twitter Card
Card Validator for card url : https://cards-dev.twitter.com/validator
After add the Twitter Card for Open Graph tag, You must first have domain approved from twitter. After adding the card just go to above URL and simple paste your ULR into Validator tool. And select "submit for Approval" button.
B. Injecting Facebook Open Graph meta tags in Blog\Web template
Add this code any where above </head> tag
To find your Fcaebook Number ID and You App Id (How to create a app id)
Recommend read it: Facebook Open Graph meta tags in Blog\Web template
Tool for testing Facebook Open Graph Mete Tags
Debugger : https://developers.facebook.com/tools/debug/
Go to above line and test your Facebook Open Graph mete tags by pasting URL in Debugger tool and click "Debug". It will analyse your meta tag (note: It also analyse twitter tag ) and gives informations about it.
xmlns:og='http://ogp.me/ns#'
after add the code lock like this
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:og='http://ogp.me/ns#' >
A. Injecting Twitter Cards Open Graph meta tags in Blog\web template
Now paste following Twitter Card Open Graph meta tags Above </head> tag
<!-- Twitter Card data -->
<meta name='twitter:card' content='summary_large_image'/>
<b:if cond='data:blog.pageType == "item"'>
<meta name='twitter:title' expr:content='data:blog.pageName'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta name='twitter:description' expr:content='data:blog.metaDescription'/>
</b:if>
<meta name="twitter:site" content='@publisher_handle'/>
<meta name='twitter:creator' content='@author_handle'/>
<!-- End Twitter Card data -->
=>Change the RED colour value..
=>"summary_larger_image" help to display Twitter thumbnail image share. You can also use "summary" for small Twitter thumbnail image. "product" can use for product post.
Tool for Testing and approval Twitter Card
Card Validator for card url : https://cards-dev.twitter.com/validator
After add the Twitter Card for Open Graph tag, You must first have domain approved from twitter. After adding the card just go to above URL and simple paste your ULR into Validator tool. And select "submit for Approval" button.
B. Injecting Facebook Open Graph meta tags in Blog\Web template
Add this code any where above </head> tag
<!-- Begin FB Open Graph metadata -->Now Change the RED colour value.
<meta property='og:type' content='article' />
<meta property='og:locale' content='en_US' />
<meta property='og:locale:alternate' content='en_GB' />
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.pageType == "item"'>
<meta property='og:title' expr:content='data:blog.pageName' />
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta property='og:image' expr:content='data:blog.postImageThumbnailUrl' />
<b:else/>
<meta property='og:image' content='IMAGE URL 200x200px' />
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta property='og:description' expr:content='data:blog.metaDescription' />
<b:else/>
<!-- If Needed -->
</b:if>
<meta property='fb:admins' content='Facebook number ID'/>
<meta property='fb:app_id' content='Your App ID' />
<!-- End FB Open Graph metadata -->
To find your Fcaebook Number ID and You App Id (How to create a app id)
Recommend read it: Facebook Open Graph meta tags in Blog\Web template
Tool for testing Facebook Open Graph Mete Tags
Debugger : https://developers.facebook.com/tools/debug/
Go to above line and test your Facebook Open Graph mete tags by pasting URL in Debugger tool and click "Debug". It will analyse your meta tag (note: It also analyse twitter tag ) and gives informations about it.
No comments:
Post a Comment