How to Create Twitter Cards for Blogger

Instructions to implement Twitter Cards on Blogger

For a long time, I wondered why some links to articles I tweeted turned into preview links while others didn't. When I set up my blog, I wanted to use this feature. It took quite a bit of searching to figure out how to create them. The main problem was that I didn't know what they were called. And because I didn't know what they were called, I didn't know what search terms to use. Then I learned that these preview links in a tweet are called Twitter Cards, and knowing that led me to instructions on how to implement them.

Twitter Cards are quick, easy, and, best of all, free to implement on a blog hosted on blogger.com. But you have to exercise some caution because it involves making minor code changes. To practice doing this before implementing it on my actual site, I set up a temporary blog with just one post. I wanted to be sure I could get everything to work without breaking anything. These are the instructions to add Twitter Cards to your blog.

Step 1 - Enable Search Description
A Search Description is necessary to have a more useful Twitter Card. The Search Description should show up on the right side of each post. If you don’t have a description, the card will still work. However, it may get fewer clicks if you don’t describe the purpose of your post.

Search Description is located on the right side of each post

To enable the Search Description:

• Go to Settings
• Scroll down until you find Meta Tags
• Click Enable Search Description

Now when you go back to the post, the description will be there and you can type a brief description of the post into it.

Search Description is located under Meta Tags in Settings

Step 2 - Back Up your Blog

To be on the safe side, make sure everything is backed up. To back up the contents of your blog:

• Go to Settings on the left side menu and scroll almost to the end
• Under Manage Blog, choose 'Back up content'
• The contents of your blog will download to your local machine.

Back up the posts on your blog before making updates to code

Next, you should back up the blog itself.

• Click on Theme
• Click the down arrow next to Customize and choose 'backup'
• This will download a file to your hard drive

Click Customize in Theme, then Backup

If you break your blog, you will need this file to fix it by clicking Restore.

Step 3 - Update the Twitter Card Code
Now that everything is backed up, you must edit the code for your blog. But first, you need the code for the Twitter Card.

Go to the blog Mo Physics, Mo Problems and copy the code under one of these headings:

Option 1: Basic Summary Card - this option creates a small preview link
Option 2: Summary Card with Large Image - creates a large preview link

Important: You can only choose one option. 

Example of Option 1: Basic Summary Card

Example of Option 2: Summary Card with Large Image

After you decide between the Basic Summary Card or Summary Card with Large Image, paste the code into Notepad. Look for @yourtwitterusername in the code and change it to your personal Twitter handle.

Add your Twitter handle to the code

Highlight the code block and click copy.

Step 4 - Update the Code for your Blog
You should still have Theme open in your blog. If not, go to Theme on the left-side menu.

Click the arrow next to Customize again and this time click Edit HTML.
HTML code is the code that makes up your blog and there’s a lot of it.

Click the down arrow, and choose Edit HTML

• Click anywhere on the HTML code, then click CTRL F. This will open up a search that will scan your code
• In the search box, type </head> and hit enter
• This will take you to the HTML tag </head>. Paste the code you copied from Notepad right above this tag. Make sure you don't accidentally overwrite any code
• Click Save

Paste the Twitter Card code above the </head> HTML tag

Step 5 - Test Your Link
Go to View Blog at the bottom of the left-side menu, click on your test post, and copy the address for your post. Now open the Twitter card validator. You can use this validator to get an idea of what your links will look like on Twitter. And of course, you can do a test on Twitter itself.

And that’s it. It isn’t difficult. Just use caution when pasting the code. Don’t accidentally delete anything, overwrite any code, or put the code in the wrong place.