What are Twitter Cards?



ID #1108
Last update: 2017-09-15 11:04


If you want to control the appearance of link post format tweets on Twitter, setting the right Twitter Card Meta Tags in your blog posts meta data is important! But what are Twitter Cards and why are they so essential?

Twitter Cards are a custom set of Social Meta Tags in your website’s HTML, which allow you to control the appearance and post format of your tweets. If you share a link on Twitter these parameters tell the network, which image, title and description to pull and display in an automatically generated link preview.

Why do I need Twitter Cards?

To ensure that link posts previews can be customized for Twitter individually, Twitter invented their own meta tags called Twitter Card tags. If you have not defined any Twitter Card Meta tags in your blog post’s meta data, Twitter searches for Open Graph tags and uses them instead. if Twitter can't find these tags either, it will display a random image from your blog post or website. If you have defined an image in your blog post's Twitter Card Meta Tags that does not meet the image size requirements, Twitter displays a white space for the image of your link post.
If you use Blog2Social, it will automatically set Twitter Card tags for you. Unlike with other link preview networks, you can change your image, title and description for Twitter without affecting the og tags. Telegram on the other hand uses Twitter Card Tags to display link preview infromation like image, title and a desciption. Changes made to Twitter tags will therefore only apply to Twitter and Telegram.

Please make sure that your image meets the image size requirements for Twitter.

What are the most important Twitter Cards Meta Tags?

While Twitter Cards offer a wide variety of post formats, there are three very basic Twitter Cards Meta Tags which are the most important. To provide all necessary information to turn your website link in a correct link preview, you need to define the image, the title and the description.

The Twitter Card Tag: twitter:image

The image tag is the most important Twitter Card Meta Tags or at least the most obvious if not set correctly. It’s the Twitter Card Tag responsible for the correct image information. Twitter crawls your website’s code in search for an image to pull in the automatically generated link preview. If you have not set the twitter:image tag, Twitter might not display any image. Instead of the correct featured image of your post, Twitter will then show a white space or a wrong image.

Example:

<meta name="twitter:image" content="https://www.blog2social.com/en/blog/wp-content/uploads/2017/01/A-Complete-Guide-1.png" />

The Twitter Card Tag: twitter:title

There is nothing better than a catchy title to encourage your followers to like, click or retweet. Defining the intriguing title is exactly what the twitter:title tag is for. It is providing all necessary information for Twitter to display a bold headline in the automatically generated link previews of your blog post.

Example:

<meta name=”twitter:title” content=”A Complete Guide To Social Media Sharing” />

The Twitter Card Tag: twitter:description

Additionally, your post should show a description of  what your blog post or shared website is all about. This Twitter Card tag is very similar to the regular HTML tag, however, instead of showing up in the Google search results, this little snippet will show up in the generated link preview.
As Twitter will not show more than the first two lines, try to keep it short and sum up your blog post in less than 200 characters.

Example:

<meta name=”twitter:description” content=”Social media automation tools can boost your efficiency.” />

The Twitter Card Tag: twitter:card

The twitter:card tag determines the layout of you link post on Twitter.  There are two basic Twitter card types to use: “summary” and “summary_large_image”.

The twitter:card tag “summary”  sets an equal focus on your image and your text content:

The twitter:card tag “summary_large-image”  sets the focus on your image:

You can use whichever twitter:card tag you like. If your website has stunning visuals, however, you should consider using the  twitter:card tag “summary_large-image”.

This is how these tags will look inside your source code:

<meta name="twitter:card" content="summary">
or
<meta name="twitter:card" content="summary_large_image">

Setting your twitter:card tag with Blog2Social

You can choose the twitter:card tag format you like best in the Blog2Social Settings.
Just go to “Settings” in your Blog2Social menu bar and then click on “Social Meta Data”.


Scroll down to “Twitter Card” and choose you default twitter:card tag in the dropdown menu “The default card type to use:”, then click on the lower right “save” button.
 

Tip: You can check whether your Twitter Cards Meta Tags are set correctly by copy-pasting your blog posts URL into the Twitter Cards Validator.

How do I implement Twitter Card Tags on my WordPress blog?

There are different ways and tools to implement Twitter Card tags in your website’s meta data. The easiest and most efficient way to do so when sharing your blog posts to Twitter, is to use the social media automation plugin Blog2Social.

With Blog2Social you can select a featured image or any image you want to be displayed with your link post. Blog2Social will automatically write the required parameter into the Twitter Card meta tags of your blog post, so that your selected image will be displayed with your link post.

To do so, click on the image displayed in your Blog2Social editor and select your desired image.

Same goes for defining the Twitter:title and Twitter:description tag for your blog posts. Simply click into the respective fields in your Blog2Social post preview and type in your intriguing title and description to be displayed on your Twitter profile.

If you have defined your own Twitter Cards Meta Tags,you can easily deactivate this Blog2Social feature. To do so, go to your Blog2Social settings - select the tab “Social Meta Data” and untick the box “ Add Twitter Cards Meta tags to your shared posts and pages, required by Twitter to display your post and page image, title and description correctly.

Please note that you cannot select a specific image for your link post without OG meta tags.

Tags: Twitter Cards