How to Easily Add Twitter Card in Blogger Template
Add & Validate Dynamic Twitter Card (Meta tags) to Blogger Blogs
Hello Everyone today we are writing this post to clarify your doubts and we will answer few important questions i.e what actually twitter cards are? and how to add it in our blogs?
Twitter Cards generated from meta tags only appear when a Tweet is either expanded in the timeline (on web) or viewed on the Tweet’s individual permalink page (by clicking on the date from the timeline, either on web or on mobile).
Twitter cards are based on the same conventions as the Open Graph protocol that Facebook Use. With Few Meta tags (HTML tags to inform Crawlers) in your template you can display twitter card.
In Simple Language Twitter Cards works similar to Facebook Open Graph Tags. When we share the link of our post or our website in Facebook pages or profile then it fetches and display your post featured image with little summary. Here when we add twitter meta tags in our blog and then when we shared our post or blog link in a tweet then twitter bot fetches our Post Featured image if available with some summary.
Twitter Cards supports rich photos, videos and media experiences to Tweets.
It works similar to the summary card the difference just it will add the large image instead of small thumbnail.
STEP 3: Now Search For <head> and Paste The Code Just Below/After The <head>.
STEP 4: All Done Save the Template and Check it in your Posts.
Now we have done our work by adding the meta tags in our site now we will inform and request twitter that we have added the meta tags kindly approve us and show our card in the tweet.
If we don't follow this approval method then our adding of tags will go into vain.
STEP 4: You will see a Request Approval button as shown in the image above.
STEP 5: After Clicking on Request approval button this type of form will appear fill it with correct details..
STEP 6: After Submitting you will see a message as shown in the image above.
After submitting it will take less than a week to show your card in the twitter. but once your card get approved then you will see some like this based on your card choice.
Twitter Cards generated from meta tags only appear when a Tweet is either expanded in the timeline (on web) or viewed on the Tweet’s individual permalink page (by clicking on the date from the timeline, either on web or on mobile).
Twitter cards are based on the same conventions as the Open Graph protocol that Facebook Use. With Few Meta tags (HTML tags to inform Crawlers) in your template you can display twitter card.
In Simple Language Twitter Cards works similar to Facebook Open Graph Tags. When we share the link of our post or our website in Facebook pages or profile then it fetches and display your post featured image with little summary. Here when we add twitter meta tags in our blog and then when we shared our post or blog link in a tweet then twitter bot fetches our Post Featured image if available with some summary.
Twitter Cards supports rich photos, videos and media experiences to Tweets.
Types of Twitter Cards:
Twitter has classified cards into different types:- Summary Card : Title, description, and thumbnail.
- Summary Card with Large Image : Similar to the Summary Card, but with a prominently-featured image.
- App Card : A Card with a direct download to a mobile app.
- Player Card : A Card that can provide video/audio/media.
Summary Card :
The Summary Card can be used for many kinds of web content, from blog posts and news articles, to products and restaurants. It is designed to give the reader a preview of the content before clicking through to your website.
Summary Card Will Only Display Title, Description and thumbnail if available when you shared your post or blog link in a tweet. When you shared the link in a tweet Twitter bot will recognizes your post or blog link which is included in a Tweet, and crawls your site to fetch the Card type and content.
Summary Card with Large Image :
The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich photo experience, and clicking on the image brings the user to your website or blog.It works similar to the summary card the difference just it will add the large image instead of small thumbnail.
App Card:
The App Card is a great way to represent mobile applications on Twitter and to drive installs. the App Card is designed to allow for a name, description and icon, and also to highlight attributes such as the rating and the price.
This Card type is currently available on the twitter.com website, as well as iOS and Android mobile clients. It is not available on mobile web.
The name itself indicated that this card is for applications so we will not go deep into this as we are talking about blogger here. To know more about App Card just visit this link
Player Card :
Video clips and audio streams have a special place on the Twitter platform thanks to the Player Card. By implementing a few HTML meta tags to your website and following the Twitter Developer Policy, you can deliver your rich media to users across the globe.
How To Add Twitter Tags in Blogger Template?
Now We know different cards types and why we use them. Now its time to implement it in your blog.
STEP 1: Log in to your Blogger account and Go to your Blogger Dashboard
STEP 2: In The Left Side Bar You will find Template Section as highlighted in the image above Click on Template.
STEP 3: Now Search For <head> and Paste The Code Just Below/After The <head>.
<meta content='summary' name='twitter:card'/>
<meta content='@AllBloggerTrick' name='twitter:site'/>
<meta content='@AllBloggerTrick' name='twitter:creator'/>
<b:if cond='data:blog.pageType == "index"'>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<b:else/>
<meta content='Your -Blog-URL' name='twitter:image'/>
</b:if>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
Customization:
- The Orange Highlighted Text is responsible for the type of twitter card if you want to change the type of your twitter card to summary_large_image to have big image with summary then replace that first line with this line below.
<meta name="twitter:card" content="summary_large_image">
- The Light Blue Highlighted Text is Responsible For Your Twitter username the card should be attributed to. and second one for your username. Use Your Username for both.
- The Yellow Highlighted Text is Responsible For Your Blog Logo URL So change this and add your Blog Image URL.
Time to Request Twitter for approval of the card:
If we don't follow this approval method then our adding of tags will go into vain.
Lets start the approval process Kindly follow with us
STEP 3: Enter your Blog or Post URL and click on Preview card
STEP 4: You will see a Request Approval button as shown in the image above.
STEP 5: After Clicking on Request approval button this type of form will appear fill it with correct details..
STEP 6: After Submitting you will see a message as shown in the image above.
After submitting it will take less than a week to show your card in the twitter. but once your card get approved then you will see some like this based on your card choice.
Conclusion:
After Following this guide you should know what twitter cards meant? what is its importance? how it should be implemented in the blog? So if you are feeling confused or lost somewhere then feel free to comment or contact us directly we will try to help you as fast as possible.Hope After adding this twitter tags in your template and when someone retweeted, Like your blog post in twitter the card will appear and your traffic will surely increase because the chances of clicking your post will increase.
That's It Thanks For Following our Tutorial '' Add & Validate Dynamic Twitter Card (Meta tags) to Blogger Blogs '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.
No comments:
Post a Comment