Add & Validate Dynamic Twitter Card (Meta tags) to Blogger Blogs

How to Easily Add Twitter Card inwards Blogger Template

Add & Validate Dynamic Twitter Card (Meta tags) to Blogger Blogs

Hello Everyone today nosotros are writing this shipping service to clarify your doubts together with nosotros volition answer few of import questions i.e what genuinely twitter cards are? together with how to add together it inwards our blogs?

Twitter Cards generated from meta tags exclusively seem when a Tweet is either expanded inwards the timeline (on web) or viewed on the Tweet’s private permalink page (by clicking on the appointment from the timeline, either on spider web or on mobile). 

Twitter cards are based on the same conventions every bit the Open Graph protocol that Facebook Use. With Few Meta tags (HTML tags to inform Crawlers) inwards your template yous tin laissez passer on the sack display twitter card.

In Simple Language Twitter Cards plant similar to Facebook Open Graph Tags. When nosotros percentage the link of our shipping service or our website inwards Facebook pages or profile then it fetches together with display your shipping service featured icon with little summary. Here when nosotros add together twitter meta tags inwards our weblog together with hence when nosotros shared our shipping service or weblog link inwards a tweet hence twitter bot fetches our Post Featured icon if available with unopen to summary.

Twitter Cards supports rich photos, videos together with media experiences to Tweets. 

Types of Twitter Cards:

Twitter has classified cards into dissimilar types:

1. Summary Card : Title, description, together with thumbnail.
2. Summary Card with Large Image : Similar to the Summary Card, but with a prominently-featured image.
3. App Card : H5N1 Card with a lead download to a mobile app.
4. Player Card : H5N1 Card that tin laissez passer on the sack render video/audio/media.

Summary Card :

The Summary Card tin laissez passer on the sack hold upwards used for many kinds of spider web content, from weblog posts together with intelligence articles, to products together with restaurants. It is designed to laissez passer on the reader a preview of the content earlier clicking through to your website.

Summary Card Will Only Display Title, Description together with thumbnail if available when yous shared your shipping service or weblog link inwards a tweet. When yous shared the link inwards a tweet Twitter bot will recognizes your shipping service or weblog link which is included inwards a Tweet, together with crawls your site to fetch the Card type together with content.

Summary Card with Large Image :

The Summary Card with Large Image features a large, full-width prominent icon amongst a tweet. It is designed to laissez passer on the reader a rich photograph experience, together with clicking on the icon brings the user to your website or blog.

It plant similar to the summary bill of fare the deviation merely it volition add together the large icon instead of pocket-size thumbnail.

App Card:

The App Card is a keen agency to correspond mobile applications on Twitter together with to drive installs. the App Card is designed to permit for a name, description together with icon, together with too to highlight attributes such every bit the rating together with the price.

This Card type is currently available on the twitter.com website, every bit good every bit iOS together with Android mobile clients. It is non available on mobile web.

The refer itself indicated that this bill of fare is for applications hence nosotros volition non larn deep into this every bit nosotros are talking near blogger here. To know to a greater extent than near App Card merely see this link 

https://dev.twitter.com/cards/types/app

Player Card :

Video clips together with good streams have got a particular identify on the Twitter platform thank yous to the Player Card. By implementing a few HTML meta tags to your website together with next the Twitter Developer Policy, yous tin laissez passer on the sack deliver your rich media to users across the globe.

How To Add Twitter Tags inwards Blogger Template?

Now We know dissimilar cards types together with why nosotros role them. Now its fourth dimension to implement it inwards your blog.

STEP 1: Log inwards to your Blogger concern human relationship together with Go to your Blogger Dashboard

STEP 2: In The Left Side Bar You volition honour Template Section every bit highlighted inwards the icon inwards a higher identify 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 == &quot;index&quot;'>
<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 != &quot;&quot;'>
<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 bill of fare if yous desire to alter the type of your twitter bill of fare to summary_large_image to have got large icon with summary hence supersede that showtime work with this work below.

<meta name="twitter:card" content="summary_large_image">

• The Light Blue Highlighted Text is Responsible For Your Twitter username the bill of fare should hold upwards attributed to. together with bit i for your username. Use Your Username for both.
• The Yellow Highlighted Text is Responsible For Your Blog Logo URL So alter this together with add together your Blog Image URL.

STEP 4:  All Done Save the Template together with Check it inwards your Posts.

Time to Request Twitter for blessing of the card:

Now nosotros have got done our move past times adding the meta tags inwards our site straightaway nosotros volition inform together with asking twitter that nosotros have got added the meta tags kindly approve us together with exhibit our bill of fare inwards the tweet.

If nosotros don't follow this blessing method hence our adding of tags volition larn into vain.

Lets start the blessing procedure Kindly follow with us

STEP 1: First Login to your twitter account.
STEP 2: Go to Twitter Card validator page 

STEP 3: Enter your Blog or Post URL together with click on Preview  card

STEP 4: You volition encounter a Request Approval push every bit shown inwards the icon above.

STEP 5: After Clicking on Request blessing push this type of shape volition seem attain total it with right details..

STEP 6: After Submitting yous volition encounter a message every bit shown inwards the icon above.

After submitting it volition have got less than a calendar week to exhibit your bill of fare inwards the twitter. but i time your bill of fare larn approved hence yous volition encounter unopen to similar this based on your bill of fare choice.

Conclusion:

After Following this guide yous should know what twitter cards meant? what is its importance? how it should hold upwards implemented inwards the blog? So if yous are feeling confused or lost somewhere hence experience gratuitous to comment or contact us lead nosotros volition assay to assistance yous every bit fast every bit possible.

Hope After adding this twitter tags inwards your template together with when mortal retweeted, Like your weblog shipping service inwards twitter the bill of fare volition seem together with your traffic volition certainly increment because the chances of clicking your shipping service volition increase.


That's It Thanks For Following our Tutorial '' Add & Validate Dynamic Twitter Card (Meta tags) to Blogger Blogs '' Along With us If yous institute whatever difficulty Please Comment together with Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This together with Share this with your friends.

Sumber http://www.allbloggertricks.com/

Bagikan Artikel ini