Including Twitter Cards on your web pages is a great way to optimize the performance of your content on the popular social media platform. Similar to open […]
Including Twitter Cards on your web pages is a great way to optimize the performance of your content on the popular social media platform.
Similar to open graph tags, Twitter Cards make your content more engaging and clickable to Twitter users.
Here is a guide to adding Twitter cards to your web pages and how it can help with your overall online visibility.
Twitter Cards are a way to enhance your tweets whenever you (or someone else) shares a link to your web page content.
When you include a Twitter Card on a web page, it will show a preview of that content when shared on twitter. Then, the user can click on the tweet to see the full content on your website.
Without Twitter Cards, your content will look less appealing when shared on Twitter.
For example, here is a web page that is missing an essential Twitter Card. As a result, it doesn’t populate the Twitter post in a way that makes it desirable for users to click or engage with.
Which of these tweets would you be more likely to click on?
The upside of Twitter Cards to your social media presence and visibility is fairly obvious.
But this meta tag can also have ancillary benefits to your SEO visibility as well.
How? Well if a Twitter User clicks on your content and finds the content valuable, they may choose to link to that content on their own website. That link can help bring valuable link equity and improve your website’s ranking potential.
But without that initial click, those users will never see your content. So although not a ranking factor, using Twitter Cards can make it so there are fewer barriers to other people finding, clicking, and sharing your content.
If you are missing essential Twitter cards or there are issues with implementation, the issue will be flagged in your SearchAtlas audit report.
There are four Twitter cards types available to webmasters:
We recommend using the first or second option for your content, and you will find details on how to implement each below.
Here is an example of what the summary card looks like in Twitter:
This is the most simple Twitter Card and is very easy to implement with just two Twitter card properties: “twitter:card” and “twitter:title”.
The Twitter Summary Card with Large Image will make the image more prominent in the display.
If your content has great visual assets, you may want to consider this Twitter card. Here is an example of the Summary Card with Large Image from Search Engine Journal:
And here is what the Twitter card implementation looks like in HTML:
The required properties for this card are the same as the Summary Card, but you will need to specify a different twitter:card type.
There are only two required properties for a valid twitter card.
However, you may want to consider more to make your content more appealing when shared on Twitter.
Here is a rundown on each property.
This is the most important property because it tells Twitter which of the four types of Twitter cards you are using.
This is a required property in order to produce a valid Twitter Card.
The other required property for validation is twitter:title. This should be the title of your content and give users a good idea of what your content is about.
If you don’t define your title, Twitter will use your open graph title– “og:title “– for the title of your content.
For best practices with this property:
The description will be visible to users below the title and provides a summary about your content.
Best Practices for this property include:
If you do not define twitter:description, twitter will use your og:description first, then your meta description.
This property communicates the Twitter account associated with the website.
For best practices with this property:
If you don’t define twitter:site, you should define twitter:site:id. The id is the unique numeric value associated with your twitter account.
Arguably one of the most important properties, this will tell Twitter which image to display when the content is shared.
The size of the image is very important, and depending on whether you are implementing a Summary card or a Summary with large image card, your dimensions will be different.
In addition to proper sizing, best practices with this property include:
The twitter:creator property defines the author of the content.
With author authority becoming even more important in communicating the quality of your content, we recommend including this property on your web pages.
Best practices with this property include:
There will be two types of issues related to Twitter Cards that you may see flagged in your site audit report.
The most common issue webmasters make is they simply just don’t add Twitter Cards to their web pages or are missing specific properties that make the implementation valid.
This is any easy fix and simply involves adding the required property to your HTML.
The second issue you will see flagged in the SearchAtlas site auditor is when your twitter properties do not follow character count best practices.
To fix this issue, you will need to edit the length of your title or description in your Twitter Card implementation.
Although not an SEO ranking factor, adding Twitter Cards to your shareable content is worth the effort!
For more information on how to use Twitter Cards, visit the Twitter Developers website: https://dev.twitter.com/cards/getting-started
“They are dedicated to our success and are a thoughtful sounding board when we run ideas by them - sometimes on ideas and projects that are tangential to our main SEO project with them. Also, I love that they allow for shorter-term contracts compared to the usual 1-year contract with other SEO companies. Lastly, they deliver on their promises.”