How to put Twitter Cards for Blogger


To those Blogger users who are fond of sharing their own blogs/blog posts on Twitter, you might notice that unlike Wordpress (or other websites, for that matter), Blogger links do not show links like the one showed above by default, but instead, they will just show plain links. I don't know about you, but for me, links don't really look good on a Tweet. Not only does it not look good, it also takes up more space than it should.

 

So this is what your link will look like by default. With the Twitter card showing instead of that link, you could've had a better, more aesthetic appearance for your tweet. 

If you're curious on how I change the link to a Twitter Card, feel free to read on.

Well, you have no idea how it took me hours to find the perfect code online. I did a lot of trial and error, and it's a good thing that I generally enjoy coding, if not, I wouldn't have the patience for this.

You see, the problem was that there were some codes that only make you show post titles and snippets, while there are codes that show blog names and post titles, but not post snippets. In the end, I finally figured out what went wrong, and I'll tell you as you read on.

I saw that none of the posts I searched about this tutorial states what I discovered, and I only found out about it in forums, so I decided to write this post to give you a more thorough view about it.

So here is how I did the codes for Twitter cards.
  1. First, go to your Blogger Dashboard, then on the left menu, select Settings >> Search Preferences. Find the one that says "Meta tags", and under that you'll see "Description". Click "Edit" beside that, and when you get asked to "Enable search description?", you click the option that says "Yes". From there, it's up to you on what you'll write on the box provided to describe your blog.
  2.  Next, go to Theme, and from there, you'll click Edit HTML.
  3.  Once you're on the Edit HTML page, find this tag:
     <head>  
     
  4. Just after that, you will have to paste this code:
  5. Once you're done, click "Save Theme".
But wait, we're not done yet! You have to validate your blog links first.

To do this, go to https://cards-dev.twitter.com/validator. Enter your blog link on the space provided, just like this:


You may also try entering a link of one of your blog posts, like this:


Now, notice the ones encircled:



We may call these Meta Descriptions. This is where my discovery comes to play.

By default, the Meta Description to be shown under the title as illustrated above will show the text you've written here:



A post without its own Meta Description will show the blog's overall description shown above, like this one:


Now, this is where I'm stressing at. This is the specific part that took me long to figure out. I didn't like how the Twitter Card post description only shows the overall blog description. It just doesn't look right to me. I tried to incorporate the "post:snippet" tag many times, as what was shown in other tutorials, but it messes up the homepage link. Well, if you really want your post to have its own description like me, this is what you should do - you have to edit each of the posts, and add the corresponding description on the Search Description option, like this:




After that, click Done, and Update.

Go back to the Card Validator and preview the card again.


See how the Meta Description for the post changes.

But another thing I discovered was that these Meta Descriptions don't appear on the Twitter mobile app, at least, on my iPad mini 2.

Well, it took me hours to realize this Meta Description thing, and I'm sharing this to you guys to save time and effort.

So yes, this ends my tutorial, and I hope you learned something. Feel free to ask me questions if you're having trouble.
Till here! :)

15 comments

  1. By utilizing Twitter to go-to people to content on your site, articles you have composed either on or off your site, or by connecting to an administration you need to feature, you drive movement.Buy twitter followers

    ReplyDelete
  2. Thank you so much! I've been searching for this for hours!!

    I do have one question. How do you set up your blog post thumbnail? I can get it to show a thumbnail for individual posts (which is what I wanted), but I'm still curious how you set an image as the thumbnail for your blog post.

    Thank you!

    ReplyDelete
    Replies
    1. Usually, the first image of the blog post is the one automatically set for the blog post thumbnail, so if you want to set an image as the thumbnail for your blog post, you should place that image as the first one to appear on your post.

      Delete
  3. TweetDeck is a desktop application that allows you to review and post status updates on Twitter and Facebook simultaneously. I consider it a "must have" application for anyone who wants to make sense of Twitter.view

    ReplyDelete
  4. i have been looking for a great blogger for a long time, finally i found this man https://twitter.com/darrenwinters01 , The ways he tell his review is just great..

    ReplyDelete
  5. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the enjoyment here keep up the good work Buy Twitter Retweets

    ReplyDelete
  6. Brisani bay in southern Albania will surprise you with the beauty of its nature. You will find the peace that you are looking for. Albanian Art

    ReplyDelete
  7. LinkedIn may linger behind Facebook with regards to clients however it conveys an appealing statistic which publicists and business to business (B2B) advertisers find extremely alluring.get over here

    ReplyDelete
  8. You made an article that is interesting.You are so amazing.
    Thanks a million and please keep up the effective work. clipping photoshop

    ReplyDelete
  9. Hey, you do have pretty much helpful post. Twitter cards is an effective way of attach rich media to any tweets and mentioning the code on how to add this absolutely you have made a conducive job. I would love to leave my hearty thanks to your for this kind of wholesome work. Though I was hunting for getting some good information to buy twitter retweets, I really enjoyed this technical support. Keep it up.

    ReplyDelete
  10. Twitter if you are going to get your message out to the masses. You must spend time on Twitter and get to know people. You must put yourself together a "Twitter Blueprint" and then work that bluprint every day. How many hours a day are you going to be seen on Twitter https://www.techfunnel.com/martech/twitter-tools/

    ReplyDelete
  11. I admit, I have not been on this web page in a long time... however it was another joy to see It is such an important topic and ignored by so many, even professionals. I thank you to help making people more aware of possible issues. top twitter trends

    ReplyDelete
  12. Hey!! This is such an amazing article that I have read today & you don't believe that I have enjoyed a lot while reading this amazing article. thanx for sharing such an amazing article with us.

    buy facebook page likes

    ReplyDelete

What can you say? :)