Do you want to add Twitter Cards to your WordPress site? Twitter Cards are images and descriptions that appear on Twitter when someone shares your content.
It helps you control how your Tweets will look on Twitter, get credit by automatically including your name in the Tweet, and boost user engagement.
In this article, we will show you how to add Twitter Cards in WordPress, so your Tweets can stand out.
Why Use Twitter Cards in WordPress?
Twitter Cards allow you to add a title, summary, image, and a video or audio file to your Tweet. This way, you are more likely to get more clicks and retweets.
You can see a live example by going to our Twitter page.
The biggest advantage of having Twitter Cards is that it increases the number of people following your Twitter accounts through content attribution. Often people Tweet your links without giving you proper credit.
For example, @syedbalkhi retweets a post from @pluginthemehub without attribution, and other people retweet @syedbalkhi. Then users viewing those retweets are more likely to follow @syedbalkhi than @pluginthemehub.
Often content curators do this to keep the Tweet lengths short and ensure retweets of their own Tweets.
With Twitter Cards, this problem is solved because you get credit to your site from every Tweet that mentions your article.
Now that you know the benefits of Twitter Cards, letβs take a look at how to implement them in WordPress.
Method 1: Use AIOSEO Plugin to Add Twitter Cards
The easiest way of adding Twitter Cards to your website is by using the All in One SEO (AIOSEO) plugin for WordPress. It is the best WordPress SEO plugin and is used by over 2 million websites.
First, you will need to install and activate the AIOSEO plugin. For more details, follow our step-by-step tutorial on how to install a WordPress plugin.
You can use the free version of AIOSEO as it offers a feature to set up Twitter Cards on your WordPress website.
After the plugin is active, go to your WordPress admin area and navigate to All in One SEO Β» Social Networks. Then click on the βTwitterβ tab and make sure that the βEnable Twitter Cardβ option is enabled.
Once you enable Twitter Cards, you can change their appearance using different settings.
AIOSEO lets you select the Default Card Type for your content. The plugin will set βSummaryβ as the default card type which shows the title, summary, and thumbnail image for your content.
However, you can change it to βSummary with Large Imageβ from the drop-down menu and Twitter will show your tweet with a large image.
After that, you need to select the Default Post Image Source. It is the image you want to display in your Twitter Cards.
There are different options to choose from using the drop-down menu. For instance, you can upload or select a default image that will appear in the Twitter Card or select the featured image, attached image, first image in content, etc.
Next, add a Default Post Twitter Image, which will be used as a backup in case your content doesnβt have an image.
For instance, if your post image source is a featured image but the post is missing a featured image, then Twitter will use the default image instead.
Aside from that, AIOSEO offers more options to show additional data like post author and the time it would take to read an article.
There is also an option to set the Default Term Image Source, but you will need AIOSEO Pro or a higher license to use this feature.
Now, if you scroll down, you will see home page settings for Twitter. The plugin will show a preview of how your home page will look in a Twitter Card.
Under this section, you can change the Card Type and add a Home Page Image. It is similar to the steps we showed earlier, but the only difference is that these settings are for your home page.
Next, enter a Home Page Title and Description that will appear on the Twitter Card.
Once that is done, click the βSave Changesβ button.
Aside from that, AIOSEO also lets you change the Twitter Card settings for individual posts and pages.
To do that, edit any blog post or page and then scroll down to the AIOSEO Settings in the content editor. Now click on the βSocialβ tab and select βTwitterβ.
The plugin will show a preview of your postβs Twitter Card and give you an option to use data from the Facebook tab. It also lets you edit the Twitter title and description.
You can write a new title and description or use smart tags. For instance, if you use the β+ Post Titleβ tag under Twitter Title, AIOSEO will automatically use your postβs title in the Twitter Card.
After that, scroll down and select the Image Source for your Twitter Card. Use the drop-down menu to select the image you want to display for your post, like a featured image, attached image, first image in content, and so on.
Lastly, you can select the Twitter Card Type from the drop-down menu. By default, AIOSEO will set it to βSummaryβ but you can change it to βSummary with Large Image.β
Next, update or publish your blog post. You have now successfully added Twitter Cards to your WordPress website.
Method 2: Add Twitter Cards in WordPress (Code Method)
This method requires adding code to your theme or child theme files. Simply open the header.php file and add this code just before the </head>
tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?php #twitter cards hack if (is_single() || is_page()) { $twitter_url = get_permalink(); $twitter_title = get_the_title(); $twitter_desc = get_the_excerpt(); $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id( $post ->ID), full ); $twitter_thumb = $twitter_thumbs [0]; if (! $twitter_thumb ) { $twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75' ; } $twitter_name = str_replace ( '@' , '' , get_the_author_meta( 'twitter' )); ?> <meta name= "twitter:card" value= "summary" /> <meta name= "twitter:url" value= "<?php echo $twitter_url; ?>" /> <meta name= "twitter:title" value= "<?php echo $twitter_title; ?>" /> <meta name= "twitter:description" value= "<?php echo $twitter_desc; ?>" /> <meta name= "twitter:image" value= "<?php echo $twitter_thumb; ?>" /> <meta name= "twitter:site" value= "@libdemvoice" /> <? if ( $twitter_name ) { ?> <meta name= "twitter:creator" value= "@<?php echo $twitter_name; ?>" /> <? } } ?> |
Source: Ryan Cullen @artesea
If you donβt know how to work with PHP or running into issues with Method 2, then please use Method 1.
Test and Validate Your Twitter Cards
Before links from your WordPress site start showing Twitter Cards, you need to first check it in the Twitter card validator.
Simply head over to the Card Validator page on Twitter developers website. Enter URL of any post from your WordPress site and click on preview card button.
Twitter will show you a preview of your Twitter card.
Update: Previously you had to apply for participation in the Twitter Cards. However, Twitter has implemented a system that automatically whitelists domains when you test them with the validator or just share a URL on Twitter.
We hope this article helped you add Twitter cards in WordPress. You may also want to see our list of the best Twitter plugins for WordPress, and our expert pick of the must have WordPress plugins to grow your website.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.