How To Implement Twitter Cards On Blogger/Blogspot Blogs
Twitter started to back upward microformats past times the introduction of Twitter cards. This volition deal to present the summary, thumbnail, site twitter handle, URL etc field tweeting. This is like to opened upward graph protocol of Facebook as well as Google+. Here is how to implement it.
Twitter carte du jour is the novel means of showing our content inwards a to a greater extent than engaging means on twitter. When a user click on Expand story, he tin give notice come across weblog shipping service description, thumbnail, website twitter cause got as well as writer twitter handle. User tin give notice follow both twitter cause got from the expanded story. Now they accept vi (
Summary is what nosotros postulate for weblog posts. Photo helps to preview photos as well as thespian for videos. Using summary attribution, nosotros tin give notice part the shipping service description, 2 twitter handles(author as well as website name), thumbnail image, shipping service championship as well as URL. Twitter may add together additional attributions inwards future. Stay tuned.
[Update: You may cheque out my twitter cause got for to a greater extent than demos.. https://twitter.com/bloggerhow]
This is an illustration of twitter carte du jour summary implementation @twitter
How to implement Twitter cards inwards Blogger: Summary
We postulate to add together approximately meta tags to caput department of Blogger template.- Navigate to Template as well as and thus select Edit HTML (#)
- Clik on the Proceed of appeared popup window(#)
- Find
</head>past times Search (Use Ctrl+F) - Add next code only above to the
</head>
<!-- twitter cards --> <meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="@AUTHOR_TWITTER_HANDLE"/> <meta name="twitter:creator" content="@WEBSITE_TWITTER_HANDLE"/> <b:if cond='data:blog.pageType == "item"'> <meta name="twitter:url" expr:content='data:blog.url' /> <meta name="twitter:title" expr:content='data:blog.pageName' /> <meta name="twitter:description" expr:content='data:blog.metaDescription'/> <b:else/> <meta name="twitter:url" expr:content='data:blog.homepageUrl' /> <meta name="twitter:description" expr:content='data:blog.metaDescription'/> </b:if> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' name="twitter:image"/> <meta name="twitter:title" expr:content='data:blog.title' /> <b:else/> <meta content='WEBSITE_FAVICON_IMAGE_URL' name="twitter:image"/> <meta expr:content='data:blog.title' name='twitter:title'/> </b:if>
But the one-time blogs won't present meta description tags equally they are introduced recently. You tin give notice innovate this back upward past times adding the next code instead of greenish colored line. But yous should reach the whole code block later on
<body>. The below tag is non supported inwards caput section. Normally meta tags are used inwards caput section, thus it may arise warnings alongside search engines. <meta name='twitter:description' expr:content='data:post.snippet'/>
If yous accept already implemented Open Graph Protocol, yous postulate solely starting fourth dimension 3 tags. Don't forget to alter carmine colored strings to your value.
<meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="@AUTHOR_TWITTER_HANDLE"/> <meta name="twitter:creator" content="@WEBSITE_TWITTER_HANDLE"/>
After adding meta tags to your template, yous postulate to validate using Twitter carte du jour validator-Link
0 Response to "How To Implement Twitter Cards On Blogger/Blogspot Blogs"
Post a Comment