Wednesday, March 15, 2017

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! :)

No comments:

Post a Comment

What can you say? :)

Blog Widget by LinkWithin