Do you use Twitter? Many people have found it to be a great way to promote their website, posts, products and services. Of course, the more Twitter followers you have, the better your promotion will work.
Promotion is basically getting your message in front of eyeballs.
Do not dismiss Twitter if you do not personally use it much, or if you do not have many followers. Someone else might see something good or useful on your site and share it on Twitter themselves. A post could be shared by someone with thousands of followers.
Whether you share the link yourself or someone else shares it, you want it to look good. When a link is shared on Twitter, it could be displayed as a simple link like this:
http://www.rawinfopages.com/tips…
However, it can be made to display as a more visually attractive link like this by inserting Twitter cards – meta tags – into the web page HTML.
Benefits of Twitter cards
The item above is much more exciting than a plain text link and sharing the posts on your website using Twitter cards will get a much better response from your followers than simply sharing plain text links.
It is bright, colourful and informative.
Twitter cards maximise the chance that someone will click a link because they are visually attractive thanks to the image, and they also show a couple of lines from the article description as a teaser.
Make this text grab the reader’s attention and you have a killer Twitter card that will boost the visitors to your site.
Twitter’s meta tags
Twitter uses its own system of meta tags, which means that special information has to be added to the code of the web page. The meta tags are invisible in the browser and your visitors will not see them, but Twitter sees them when it access the page when you share a link.
The meta tags enable Twitter to create the card by providing the text and link to the image.
If you were to right click an empty area of a web page and select the option to view the code, there would be a section near the start that looks like this:
<meta name="twitter:card" content="summary" /> <meta name="twitter:title" content="Sketch on Google Keep... <meta name="twitter:description" content="Google Keep is... <meta name="twitter:image" content="http://www.rawinfopages...
Of course, you don’t need to type this into the code of every post you create and there are plugins that do the job automatically. When posts are created and viewed, the plugins automatically insert the Twitter card meta tags.
Twitter and Open Graph tags
Twitter can use some of the Open Graph tags that Facebook uses, which reduces the duplication of tags that would otherwise occur. (See Twitter Cards Markup Tag Reference)
For example, it can use these: og:type, og:title, og:description and og:description.
Notice that in the screenshot below there are only three Twitter card tags instead of the full set. Twitter gets the rest of the information it needs from the OpenGraph tags elsewhere.
Recommended plugins for Twitter cards
There is no way to add these to your posts manually and plugins are required. These are the ones recommended by Twitter: Twitter Plugin for WordPress, Jetpack, JM Twitter Cards and Yoast.
If you have created meta tags and Open Graph tags, there is nothing else required for Twitter cards. These plugins do everything that is necessary. However, check that the plugin is set correctly. For example, with Jetpack you need to turn on one of the social sharing features – automatically share posts or add sharing buttons.
Twitter Plugin for WordPress is the official plugin. It has several extra features that might make it worth using instead of one of the others. For example, it adds Tweet, Follow, and Periscope On Air buttons to posts.
There is overlap in the features of plugins and if you have Jetpack and Yoast for example, both can add Twitter card meta tags. However, Jetpack should automatically stop inserting Twitter cards if another plugin is doing it.
It’s worth checking that the meta tags aren’t being inserted twice by right clicking a post and viewing the source.
Yoast will use the information provided for the meta tag description, the post title and the featured image. One thing to watch out for is that Twitter has a very low character limit and if you use the same description for everything, you must make it short.
URLs and images require a small number of characters, so the meta description must be around 100 characters. That isn’t much, so you might want to avoid problems by specifying a separate Twitter title and description.
Scroll down to the bottom of the page in WordPress to the Yoast section. Click the share button on the left and then select the Twitter tab.
As it says, only fill in these boxes if you don’t want to use the post title, meta description or post featured image. Leave them blank and you will still get all the Twitter tags you need.
Use the Card Validator
Twitter has a special tool for checking that the meta tags it requires are all present and correct. Go to the Card Validator and enter the URL of a page on your website. Click Preview card.
The card is displayed on the right and below it are success or failure messages. Read the messages in the Log section to see if there are any problems.
Card not displaying correctly? Troubleshooting
One curious thing is that sometimes the Card validator says that everything is OK, but when the link is shared on Twitter it is missing the image.
If you are having problems with Twitter cards, first look at the web page source code (right click an empty part of the page and select View Page Source) and check that everything is present and correct, go to Twitter’s Troubleshooting Guide. Some of it is a bit technical, but there are plenty of suggestions for fixes.
Twitter caches the card information for 7 days. So if you update the page you won’t see any change to the Twitter card till next week! That troubleshooting link above provides a solution, and it is a weird one with 7 steps and involves sharing links shortened using the bit.ly service.
The image specified for a card should have an aspect ratio of 2:1 (twice as wide as high), and have dimensions of 300 x 157 pixels up to 4096 x 4096 pixels. An image must be under 5MB in size and JPG, PNG, WEBP and GIF files are supported.
Action points
- Make sure Twitter’s meta tags are in all posts
- Use Open Graph tags, they’re used as a backup
- Get a plugin that supports Twitter meta tags
