How To Add Twitter Cards To Blogger And Wordpress Step By Step

These days, almost every website encourages visitors to share their pages on social media. We’ve all seen the abundant Facebook and Twitter icons, among others, just pleading to be clicked. This comes as no surprise as sharing via social media, the internet incarnation of word-of-mouth is one of the most effective ways for businesses and individuals to gain cognizance. 

Twitter Cards allow you to add media to your tweets. It’s very well known that updates on social media platforms with images are what gets shared the most. A good way to add an extra element to your tweets without having to upload an image with every tweet is by using Twitter Cards to automatically provide more information when linking to your website or blog. When Twitter Cards have been installed, you can see the extra information the tweet has.

Just tweeting a URL is not enough to make the users more engaging and bringing traffic to your website or app. So, Twitter introduced “Twitter Cards”, using which we can make Twitter can generate a summarized preview of our website or app and also provide basic information about what the webpage contains.

This might not seem like a big thing to most but why write something if nobody reads it? Engagement is the name of the game on social media platforms like Twitter and Twitter Cards (and images in general) are proven to increase engagement. In this article, I will tell you what a Twitter Card is and how to add Twitter Card meta tags to your blogger blog and WordPress.

Read also:

Blogger Review - 15 Pros And Cons Of The Blogger Platform 

How To Add A Contact Form - Contact Page In Blogger Step By Step

How To Add Breadcrumbs Post Navigation In Blogger Step By Step

How To Create A Blog On Blogger.com (Blogspot) Step By Step 

How To Set Custom Header Tags For Blogger Blog Step By Step - 4 Steps

What Is A Twitter Card?

Before we dive into the technical details on how to add Twitter Cards to your blog it might make sense to understand what a Twitter Card actually is. The Twitter card is a preview of a URL tweeted. This card is produced by twitter by crawling twitter card-specific meta tags from the tweeted web page. Twitter cards have been around for quite a while now, but they’re far from outdated solutions.

Twitter cards were designed back when Twitter only allowed people to tweet 140 characters at a time. Back then, the cards were a crucial way of going beyond the restrictive character limit. Today, the cards still serve the same purpose for some. Twitter says that even after updating their limit to 280 characters, many users still hit the threshold.

It is worth knowing that there are more than 330 million monthly active users on Twitter. If that number isn’t significant enough to make your marketing team’s mouths water – how about the fact that 51% of Twitter users earn more than $50,000 per year? That’s some real purchasing power. Twitter is great at driving more qualified traffic to your blog, product page or website. Sometimes you need more than 280 characters to capture a conversion.

Fortunately, there is a solution. Twitter Cards give you the power to convey plenty of useful and engaging information to your followers, without breaking the character limit. Here’s everything you need to know about using Twitter cards to drive leads to your website. 

Benefits Of Using Twitter Cards For Your Blogsite, Website Or App

Beyond giving you more space to engage your followers, Twitter cards are also a visual component on your news stream, that help you to stand out from an avalanche of wordy updates. Using Twitter cards:

1. Gives you more visibility on Twitter
2. Helps you to earn followers through immersive interactions
3. Makes your Tweets more attractive and “clickable.”
4. Increases traffic to your website
5. Encourages conversions from customers

It’s a well-known fact that Tweets with media attachments get greater exposure than the average tweet. Tweets with images get up to a 55% increase in leads and a 41% increase in retweets. It only makes sense that Twitter cards would have a similar impact.

I currently don't have any Twitter Cards set up of my blogsite. After sitting down to write this article I realize that I should fix that. If I share out a link to my homepage on Twitter it looks like this. 

Pretty boring right? No matter what my message is you aren't going to be very compelled to click that link. Here is a blog post link I posted on twitter, after adding a twitter card to my blog. 

In this case, you can see a nicely formatted card with a summary and an image. Now I will admit the image could use a little work as some text is running up against the side, but you get the idea. I think this is a really nice addition that you can add to your blog today and with just a few lines of code.

How To Add Twitter Cards Meta Tags To Blogger

When you post a link on twitter only the post link appears and not the post summary and image as I've described above. In this tutorial, we will get to know how to add a twitter card to our blogger template so that if we post a link, it will look attractive. Adding a twitter card to your blogger blog site is easier than you think. Just follow!

Step 1: Log in to your Blogger account, then go to Dashboard > >Theme >> Edit HTML

Step 2: You will be provided with the whole code of your blog template in a large field.

Search for the close head tag of the template and place the code given below just before it.

If you don't know how to do it don't worry I am taking you through this tutorial step by step. Click inside the template and press ctrl +F keys on your keyboard simultaneously. This action will trigger a search box to appear at the upper right part of the template codes. Copy and paste this code </head> inside the search box and press enter on your keyboard. Copy and paste the following code just before it. 


<!--Twitter Card-->
<b:if cond='data:blog.pageType == "index"'> <!--homepage-->
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" expr:content='data:blog.metaDescription' />
<meta name="twitter:title" expr:content="data:blog.pageTitle" />
<meta name="twitter:site" content="@username" />
<meta name="twitter:image" content="YOUR_LOGO_URL" />
<meta name="twitter:creator" content="@username" />
</b:if>
<b:if cond='data:blog.pageType == "static_page"'> <!--page-->
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" expr:content='data:blog.metaDescription' />
<meta name="twitter:title" expr:content="data:blog.pageTitle" />
<meta name="twitter:site" content="@username" />
<meta name="twitter:image" content="YOUR_LOGO_URL" />
<meta name="twitter:creator" content="@username" />
</b:if>
<b:if cond='data:blog.pageType == "item"'> <!--blog post-->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" expr:content='data:blog.metaDescription' />
<meta name="twitter:title" expr:content="data:blog.pageName" />
<meta name="twitter:site" content="@username" />
<meta name="twitter:image" expr:content="data:blog.postImageUrl" />
<meta name="twitter:creator" content="@username" />
</b:if>

<!--End Twitter Card-->

The twitter card tag code above is divided into 3 sections, the first section is for homepage or your blog URL, the second is for your blog pages and the third is for your blog post. SO you realize that this is a complete twitter card for your blogger blog. Whenever you or someone shares your post, one of your pages or your home page, it will appear on twitter nicely formatted card with a summary and an image.

Remember to replace @username to your twitter username and also replace YOUR_LOGO_URL with your logo URL. Quick reminder, Your username appears 6 times in the twitter card tag above 2 for each section, that is the homepage, pages and blog post as explained earlier. YOUR_LOGO_URL also appears 2 times, one for the homepage and one for your pages, it is not in the blog post section. See the infographic below for more information!

In case you don't know how to add your logo Url to the twitter card above, don't worry, just go to where you uploaded your site logo, right-click and copy the image address and replace it with YOUR_LOGO_URL in the twitter card above, you're good to go. If you don't have a logo on your site you may use an image that represents your blog logo in place of it. Just upload the image in CloudApp after signing in or signing up, hover your mouse over the image get the link and replace it with YOUR_LOGO_URL in the twitter card tags above, you're good to go. Now save the template. Congratulations! you've now added twitter card meta tags to your blog, your links posted on twitter will now have a nicely formatted card with a summary and an image.

Step 3: Twitter Card Validator

To test whether your Twitter Cards are displaying correctly, there is a way to test them. You can use the Twitter Card Validator; paste in the URL you want to test and see what the outcome is along with some information. Here I have entered another blog post and I get a preview of what my twitter card is going to look like.

How to set up Twitter Cards for your blog – WordPress

WordPress users, you’ll find </head> in your header.php file. You could use the WordPress SEO by Yoast plugin instead. Go to SEO > Social > Twitter. You can only choose from two cards at the moment – summary and summary with a large image. There are also a number of plugins for integrating Twitter Cards available. See below for more details on adding to WordPress.com. WordPress.com is already configured for Twitter Cards so it’s pretty easy to setup.
Step 1: Log in to your WordPress Admin Dashboard. In the left sidebar, go to Settings > Sharing. Go to the Twitter section, click the connect button and continue to allow your blog to Authorize to your Twitter account.
Step 2: Go to Settings > Reading > Site Visibility and allow search indexing.

Step 3: Go to the Validator here, click Validate & Apply and paste the URL of your latest blog post. Share your blog post links as usual and they will automatically include the appropriate card. Now all you have to do is share your blog/site links as usual and they will automatically include the appropriate card.

Tips To Consider As You Add Twitter Cards To Your BLog

1. Give People A Reason To Click
To reach audiences whether they’re browsing on mobile or desktop, set your cards up to capture audience attention. One way to do this is to pin your latest card to the top of your timeline. That way, whenever someone comes to your profile, they’ll see the card.
2. Use Stunning Images
Speaking of impressive images, Twitter is great at adjusting your images to fit your post. However, if you let Twitter do all the formatting for you, then you risk your pictures appearing pixelated or stretched. Spending a little extra time on your profile’s appearance will help you a lot. Remember, Tweets with images get 18% more clicks and 150% more retweets than tweets without. Treat your Twitter cards more like your Instagram feed and make sure that your pictures are compelling enough to drive people to your site.
3. Don’t Forget To Hack Your Hashtags
Twitter is famous for making the #hashtag a crucial component of social media. With that in mind, don’t forget to use hashtags when you’re publishing your Twitter cards. Use your tags to launch a specific campaign, or to make sure that people can find your posts when they’re looking for specific keywords.
4. Keep Your Posts Short And Sweet
Finally, with Twitter cards, your image, video or audio snippet should do most of the talking on your brand’s behalf. That means that you don’t have to use the full 280-character limit explaining what your cards are all about. The best Twitter card examples work because they use a short and compelling intro to draw attention to the content below and convince people to click.

I have tried so much to cover everything in this tutorial, how to add twitter card on your blogger blog and WordPress if you encounter issues, comment it at the comment section below and I will attend to you! Happy blogging!
full-width