Monday, March 18, 2019

How To Add Twitter Cards Meta Tags on the Blogger

Currently, social network is very popular for all people around the world such as Facebook or Twitter etc. Most people registered with them and post every thing that they want to share. Also Twitter is one of popular social media that everyone can Tweets some text, images, video, or articles like Facebook too. One more thing, Twitter allowed you Tweet direct on their platform. And if you want to Tweet anything on Twitter, it is very easy and work normally for text and large images. But most people want to share something such as text, images, or video from blogger to Twitter and it will appear with small images. So they always try to find some way to post with large images for attract their visitors. Depend on my experience, I found that the blogger template need twitter card to connect relationship between blogger and Twitter. Normally, most free blogger template does not to add twitter card for build-in function. 


Do you know that what is twitter card?
Most people gives definition of Twitter card or Twitter card meta tag is feature or the social media meta tag for social network like Twitter that it allowed blogger become a rich object in the social graph. It means that when people share images and text from blogger into Twitter, they will share with large image like they tweets on Twitter directly. On this article, i will talk about How to add twitter card on the blogger to share with large image.

Step 1: i recommend you should backup your current template
To avoid lose template, before you start to add Twitter card or Twitter card meta tag, i recommend you should backup your current template first because If in during you do something wrong, you can restore it back from your backup.
  • Please login your blogger profile first
  • Please click on Theme at the left your hand
  • Please click on Backup/Restore button at the right hand and click Download theme. It will download your template into your computer or device.
Step 2: Please go to “Theme” menu at the left hand then click “Edit HTML”
Step 3: you will see HTML box, please click Ctrl + F to find word “ </head> “
Step 4: you need to copy below code and past between <head> …..</head>

<!--****for add twitter card or Twitter card meta tag****-->
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@your name' name='twitter:site'/>
<b:switch var='data:blog.pageType'>
<b:case value='index'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:default/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
</b:switch>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<meta content='@your name' name='twitter:creator'/>
<b:switch var='data:blog.pageType'>
<b:case value='item'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:default/>
<meta content='img-url-for-home-page' name='twitter:image'/>
</b:switch>
<!--****end for add twitter card or Twitter card meta tag****-->

Please Note that: please edit @your name@your name is the name URL of your blog. For example my blogger is https://happysharemoney.blogspot.com/ , so you need to input @happysharemoney

Step 5: after you finished to edit then please click on “Save theme” button.
Step 6: On the step 5 is completed How to add to twitter card or Twitter card meta tag on the blogger but  make sure your configure is correct or not, please test your configuring with other URL.
You need to test your configuration with this URL https://cards-dev.twitter.com/validator to make sure your twitter card is working normally.
  • You need to click on the above link
  • You need to copy your article URL and past into Card URL box
  • You need to click on “Preview Card”
  • Then you will see your article with large image at right hand.
Step 7: i recommend you should try to test for sharing article with images from your blogger to Twitter account after you finished to test on the above URL ready. Also you will see your article with the large images on Twitter. It means that your visitors will see large images the same you.

One more thing, if you purpose to change type of twitter card, you can copy or edit Meta tag code and put  between <head>………</head>

<meta content='summary' name='twitter:card'/> 

No comments:

Post a Comment