You can understand twitter cards by below example of tweets, after optimization of cards in template code, “View summary” options are added automatically in your tweets you share on twitter account. These cards allow readers to read about article within the twitter platform on beforehand.
This card allows user to share image and snippets in their tweets as well. This optimization increase you twitter traffic significantly. And getting approved your blog is also quite easy, to make sure to get approved without any hitch you should apply twitter cards in most of your popular article.
This article is divided in three parts, first include the selection of cards and applying cards in blogger. Second part includes applying in websites and last part includes validating and getting approved.
1: Choosing Twitter Cards and applying in blogger.
There are seven different types of cards or you can say seven options are available for optimization, though it is recommended for blogger using BlogSpot to use “summary_large_image” card in your blog and this is the card I will be using for my example. Though you can choose any cards depending upon your content you publish and they are as follows.(link)
- Summary Card: Default Card, including a title, description, thumbnail, and Twitter account attribution.
- Summary Card with Large Image: Similar to a Summary Card, but with a prominently featured image.
- Photo Card: A Card with a photo only.
- Gallery Card: A Card highlighting a collection of four photos.
- App Card: A Card to detail a mobile app with direct download.
- Player Card: A Card to provide video/audio/media.
- Product Card: A Card optimized for product information.
First search for <head> and paste the following code below it. I Have enclosed this cards in “item” condition so that it run in post pages only and that what is required.
Make sure to change “@BlogEutectics” with your twitter ID. In “site” add your website twitter account ID and in place of “creator” add your personal twitter account ID. Since I use “@BlogEutectics” ID for personal as well as for my blog therefore I have used the same for both.
<b:if cond='data:blog.pageType == "item"'>
<meta content='summary_large_image' name='twitter:card'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta content='@BlogEutectics' name='twitter:site'/>
<meta content='@BlogEutectics' name='twitter:creator'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='435' name='twitter:image:width'/>
<meta content='375' name='twitter:image:height'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' name='twitter:image:src'/>
</b:if>
</b:if>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
For more information you can read their docs file here. Since we have “expr” in content of Meta tag, the respective data will get added automatically.
Also make sure in your blogger account your search Meta tag options are enabled and you should write description on every post whenever you post a new article in search descriptions. Also First image you place in a blog post is appeared in your tweets summary snippet.
Adding Twitter Cards in website or WordPress.
Since there are no official WordPress twitter cards plugin therefore you have to add manually in all your new posts. Add the following code inside in head after adding some content respectively.
<meta content='summary_large_image' name='twitter:card'/>
<meta content='your-website' name='twitter:domain'/>
<meta content='@twitterID' name='twitter:site'/>
<meta content='@twitterID' name='twitter:creator'/>
<meta content='Your article title' name='twitter:title'/>
<meta content='URL of image' name='twitter:image:src'/>
<meta content='URL of article' name='twitter:url'/>
<meta content='Description of article' name='twitter:description'/>
Since all the meta added manually in hosted blogger or wordpress, this user have ability to add different cards types including videos and app review.
Plugins that may works (choose according to reviews)
- Yoast plugin have inbuilt Open graph and twitter Meta tag options.
- Another Plugin : JM Twitter Cards
Validating Twitter Cards:
It is Necessary to validate your website or blog your codes before it started appearing in your tweets. Go to this link and validate by adding your optimized article URL as shown in image.
Though I have seen some complaining against the validating time required by twitter to validate your website, but in my case everything went very smooth and got notified in email address of successful process instantly within seconds.
Hope this article helps you to add this small code in your blog. If face any problem just comment.
We are always here for help.
0 comments:
Post a Comment