Social media engagement is one of the best factor for any website in their online ranking. If we talk about X (Twiter) Twitter then most of us use two ways to use twitter for websites viz. the first way is to use Twitter Follow/ Tweet Button and the other way is to show twitter widget to any site. But, a non-technical and newbie does not know about the Twitter Cards which highlights every tweets with a feature image along with title, summary and attribution for the linked webpage after recognizing the URLs included in your tweets.
I have already discussed the meaning and importance of Twitter Cards in earlier tutorial for Blogger BlogSpot.com Blogs. Hence, if you have also a blogger blog then you may also like to read How to Add Twitter Summary Cards to Your Blogger Blogs.
Here, I will guide you to install two different Twitter Cards viz. Twitter Summary Cards and Twitter Summary Cards with Large Image into your WordPress sites without using any plugin. However, you should use either of these two twitter cards in accordance with your preference and size of featured images of your WordPress blog posts.
As of now there are 7 different Twitter Cards but with effect from July 3, 2015 all other Cards like Photo Card, Gallery Card and Product Card will be deprecated and will be mapped either to the Summary Card or to the Summary Card with Large Image.
How to Add Twitter Summary Card Meta Data to WordPress sites
Twitter Summary Card is a basic card available for all blogs/sites. It will prevent your tweets to get lost in the noise by displaying the title, description and a thumbnail image. This twitter card is useful for those website owners who generally use small images for their posts.
Accordingly, if you are using small thumbnail image with a minimum size of 120px by 120px then you may install this card to your WordPress blogs. However, you may use this card even your posts does not contain any image as because this is not compulsorily required.
Step-1: Login to your WordPress blog and navigate Theme Editor under Appearance sidebar menu.
Step-2: Now, open your header.php file and copy paste these Twitter Card Meta Tag codes just before/above closing </head> tag. However, you may also use your FTP account for the same.
<!-- Twitter Card Meta Tags by SWT ~ www.superwebtricks.com --><meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@SuperWebTricks">
<?php if (is_single()) { ?>
<meta name="twitter:title" content="<?php echo get_the_title(); ?>">
<meta name="twitter:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>">
<?php } else { ?>
<meta name="twitter:title" content="<?php wp_title(''); echo ' | '; bloginfo( 'name' ); ?>">
<meta name="twitter:description" content="<?php the_excerpt(); ?>">
<?php } ?>
<?php if ( has_post_thumbnail( $post->ID ) ) : $swt_thumbsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail' ); ?>
<meta name="twitter:image" content="<?php echo $swt_thumbsrc[0]; ?>" />
<?php else : ?>
<meta name="twitter:image" content="http://img.superwebtricks.com/files/SWT-logo.png" />
<?php endif;// Twitter Card Meta Tags HELP ~ http://www.superwebtricks.com?p=955 ?>
Step-3: To provide your own blog attribution and image, please replace the following terms in accordance with your preference and blog posts.
A) Replace @SuperWebTricks from the second line with your own twitter @username for the correct attribution to your tweets.
B) Replace the URL of image from the 13th line with your own custom image URL link which will be shown as default thumbnail.
All other codes will work automatically for each your WordPress blog post tweets.
Step-4: Finally, save your HEADER PHP file and enjoy!
How to Add Twitter Summary Card with Large Image to WordPress sites
This Twitter card is similar to the previous summary card with some extra features. As name indicates, this Twitter Summary Card with Large image will show full width photo for your every tweets to give the reader a rich image experience. When a user click on the image it brings him to your website. Additionally, this twitter card will also display the twitter username of content creator i.e. author of the particular tweet.
Therefore, if you are using a big image to represent your WordPress blog posts then you may use this twitter card instead of Twitter Summary Card with Large Image. Note that your images should be at least 280px in width and at least 150px in height for this twitter card.
Copy these codes and paste it above/before closing </head> tag in your header.php file.
<!-- Twitter Card Meta Tags by SWT ~ www.superwebtricks.com --><meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@SuperWebTricks">
<meta name="twitter:creator" content="@_SureshPrasad">
<?php if (is_single()) { ?>
<meta name="twitter:title" content="<?php echo get_the_title(); ?>">
<meta name="twitter:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>">
<?php } else { ?>
<meta name="twitter:title" content="<?php wp_title(''); echo ' | '; bloginfo( 'name' ); ?>">
<meta name="twitter:description" content="<?php the_excerpt(); ?>">
<?php } ?>
<?php if ( has_post_thumbnail( $post->ID ) ) : $swt_largesrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full', false ); ?>
<meta name="twitter:image" content="<?php echo $swt_largesrc[0]; ?>" />
<?php else : ?>
<meta name="twitter:image" content="http://img.superwebtricks.com/files/twitter-cards-for-blogger.png" />
<?php endif;// Twitter Card Meta Tags HELP ~ http://www.superwebtricks.com?p=955 ?>
Thereafter, change these terms with your own contents and images:
A) Replace @SuperWebTricks from 2nd line with your own website (publisher) twitter @username for the correct attribution to your every tweets.
B) Replace @_SureshPrasad from 3rd line with twitter @username of author (creator). However, you may use same twitter @username in both places publisher as well as creator.
C) Replace the URL of image from the 14th line with your own custom large photo URL link which will be shown as default featured image.