If you haven’t already heard about this your like me – busy. You can now get a summary link showing additional details about an article shared from your site on Twitter now called Twitter Cards. This is a huge opportunity as potential visitors can get a glimpse of the article instead of hesitating to click on a shortened link that they are unsure about. In this how to I’ll give you the simple and easy way to add the necessary info to your WordPress site as well as how to apply on Twitter so it is activated for your own posts! Read on how to add Twitter Cards for your WordPress Site.
What are Twitter Cards?
I just learned about Twitter Cards from my friend Wade from WadeHarman.com. This awesome feature allows people to review a summary of your articles when they are shared on Twitter. You can see the example below:
In order for Twitter to be able to get this information you will need to add the necessary ‘meta’ tags to display in the HEAD section on your WordPress site:
|
1 2 3 4 5 6 7 8 |
<meta name="twitter:card" content="summary"> <meta name="twitter:url" content="http://avgjoegeek.net/giveaway-playstation-plus-12-month-subscription/"> <meta name="twitter:domain" content="avgjoegeek.net"> <meta name="twitter:site" content="@avgjoegeek"> <meta name="twitter:creator" content="@avgjoegeek"> <meta name="og:title" content="Giveaway PlayStation Plus 12 Month Subscription"> <meta name="og:description" content="Blog post at avgjoegeek.net : I wanted to do something to reward you who have been visiting here at avgjoegeek.net. And especially for those who have helped my Facebook [..]"> <meta name="og:image" content="http://avgjoegeek.net/wp-content/uploads/2013/09/playstation-plus-250x141.jpg"> |
Notice it has some specific Twitter tags as well as the ‘og’ tags as well. Don’t worry though – I’ll show you the easy way to get those added to your site in a second.
How to Add the Meta Information to Your WordPress Site
There are a few ways to go about doing this. You could either A) hard code it by hacking your WordPress PHP code B) Find a few WordPress plugins that specifically add the information, or C) just use Yoast’s SEO Plugin and have it do it.
Adding the Twitter Meta Code Hack
This is where if you don’t want to run a plugin and want the meta information to be listed on your site then you can add this code to your WordPress header.php using the example below:
|
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 28 |
<?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) { // Make sure to Change Your Gravatar Link to your OWN Gravatar (and remove this comment! $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
Get a WordPress Plugin to add Meta Data
If you do a search you will find a lot of options out there that adds the necessary Meta information to your site. I didn’t test any of these out though. If you go to the WordPress.org site and do a search for “Twitter Card” you will see quite a few up there. Instead of adding another plugin that adds the data, and could possibly not work 100% correctly there is another way that you probably already have setup and installed on your blog already:
Use WordPress SEO by Yoast plugin
After doing the research and poking around. This really is the best solution for most bloggers out there. It is simple, easy to add the necessary meta information, and you get the double benefit of adding both the Twitter meta information and the Open Graph meta information as well. To do this follow these 3 steps (Assuming you already installed and are currently using WordPress SEO by Yoast):
Highlight over the SEO option on your WordPress Admin panel and click on “Social”
Click on Social
On the Facebook Tab Check the box to add Open Graph Meta Information and click on Save Settings – Note: You can fill out the information below if you wish but it is not necessary for this application.
Check the Open Graph Box
Now click on the Twitter tab. Check the box to add Twitter Meta Information. Make sure to add your Twitter ID without the ‘@’ and click on Save Settings again.
Check the Twitter Box and Add your Twitter Name
To check to see if you have the necessary information pull up any article on your site. Right Click and select View Source. Search below the HEAD tag for twitter: and og: and see if the information looks correct. It should look similar to the example below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<meta property="og:locale" content="en_US"/> <meta property="og:type" content="article"/> <meta property="og:title" content="How to Add Twitter Cards for Your WordPress Site"/> <meta property="og:description" content="If you haven’t already heard about this your like me busy. You can now get a summary link showing additional details about an article shared from your site on Twitter now called Twitter Cards. This is a huge opportunity as potential visitors can get a glimpse of the article instead of hesitating to click on […]"/> <meta property="og:url" content="http://avgjoegeek.net/?p=6529"/> <meta property="og:site_name" content="avgjoegeek.net"/> <meta property="article:author" content="http://www.facebook.com/avgjoegeek"/> <meta property="article:publisher" content="http://www.facebook.com/avgjoegeek"/> <meta property="og:image" content="http://avgjoegeek.net/wp-content/uploads/2013/09/twitter-card-example.png"/> <meta property="og:image" content="http://avgjoegeek.net/wp-content/uploads/2013/09/random-plugin-241x250.png"/> <meta property="og:image" content="http://avgjoegeek.net/wp-content/uploads/2012/03/wordpress-seo-by-yoast.png"/> <meta property="og:image" content="http://avgjoegeek.net/wp-content/uploads/2013/09/seo-yoast-social-1.png"/> <meta property="og:image" content="http://avgjoegeek.net/wp-content/uploads/2013/09/seo-yoast-social-2-550x156.png"/> <meta property="og:image" content="http://avgjoegeek.net/wp-content/uploads/2013/09/seo-yoast-social-3-550x201.png"/> <meta name="twitter:card" content="summary"/> <meta name="twitter:site" content="@avgjoegeek"/> <meta name="twitter:domain" content="avgjoegeek.net"/> <meta name="twitter:creator" content="@avgjoegeek"/> |
Sign Up Using the Twitter Card Validation Tool
The final steps are to apply on Twitter and then get approved. First go and review the Twitter Documentation on Twitter Cards. Then use the Twitter Validation Tool. If you pass the validation tool you will end up filling out a short form in order to get signed up and approved. After that you will start seeing summaries of your content when someone shares it!
Additional Reading
I suggest reading the following articles to help you better understand Open Graph, Twitter Meta information, and Twitter Cards in general.
Yoast.com – Yoast explains the importance of adding Social Meta data to websites.
QuickSprout – Neil Patel talks about why it is important to have OG (Open Graph) and Twitter meta tags on your site.
Twitter Blog – Another use is for paid advertising using a Lead Generation Card on Twitter. Check out the article as a possible avenue for your site or product launch.
Final Thoughts
This is very simple to implement and with the importance of using Social Media today to market your websites its a must. I just wish that Twitter would start using just the Open Graph meta information instead of the Twitter meta tags. I like it when the internet adopts a single standard for doing something. It just makes everyone’s life easier. But the good news is you don’t have to load the HEAD section with all of the Twitter meta tags – just the few listed. It will thankfully pick up the Open Graph meta to fill in the blanks.
If you run into any issues leave me a comment or find me on Facebook, Twitter, or Google + and feel free to ask me any questions you might have there.
