Blogger Twitter/X Card Documentation

Welcome to It Is Unique Official! In this post, we will explore how to integrate Twitter/X Card metadata into your Blogger posts for better social media sharing and engagement.

What are Twitter/X Cards?

Twitter Cards (now also known as X Cards) are a feature that allow you to attach rich media experiences to Tweets or posts on X. These cards display additional information such as a title, description, image, and more, making your shared content more engaging.

By implementing Twitter/X Cards in your Blogger posts, you can ensure that your content appears in an eye-catching and optimized format when shared on Twitter/X, increasing visibility and interaction.

Types of Twitter/X Cards

There are several types of Twitter/X Cards, but the most common ones are:

Summary Card: A simple card with a title, description, and thumbnail image.
Summary Card with Large Image: Similar to the summary card but with a larger image.
Player Card: Used for video or audio content embedded in the tweet.
App Card: Used for linking to mobile applications.

In this documentation, we will focus on implementing the Summary Card and the Summary Card with Large Image for Blogger posts.

Key Twitter/X Card Tags for Blogger

Blogger uses dynamic variables to insert Twitter/X Card metadata. Here's a breakdown of the key tags and how you can integrate them into your Blogger site.

1. twitter:card

This tag specifies the type of Twitter/X card to use. For a simple card, use summary, and for a card with a large image, use summary_large_image.

<meta expr:content='summary_large_image' property='twitter:card'/>

2. twitter:site

This tag defines the handle of the site. It’s typically the @username of your website or brand on Twitter/X.

<meta expr:content='@itisunique_x' property='twitter:site'/>

3. twitter:title

The twitter:title tag defines the title of the blog post. It usually matches the page title or post title.

<meta expr:content='data:post.title' property='twitter:title'/>

4. twitter:description

This tag defines the description of the post. If you have a meta description set, that will be used. Otherwise, a snippet of the content is pulled.

<b:if cond='data:view.isMultipleItems'>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
  <b:else/>
    <meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' name='twitter:description'/>
  </b:if>
<b:else/>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
  <b:else/>
    <meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' name='twitter:description'/>
  </b:else>
</b:if>

5. twitter:image

The twitter:image tag specifies the image to use when the post is shared. If the post has a featured image, that will be used. Otherwise, you can set a default image.

<b:if cond='data:blog.postImageUrl'>
  <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
  <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ1DSnZ1gvpNGwNyJg7ywckRti4lBv2hcZEGWjRhehCeTRt7ienI_RgMT5h3RleTn_gJqC4FsiRsJFB_hIAfdA5cnHX1CflfcbHLDemqOy5BdS8vl-Kb_wJiuNKqLzHkSkmNF1Gf6XTnUvMuKNxu7jhFtZdMR5Jwcfgx4DhWXsNav1TFI/s1600/It%20Is%20Unique%20Official.png' name='twitter:image'/>
</b:if>

6. twitter:image:alt

This tag defines the alternative text for the image. It's essential for accessibility and SEO.

<meta expr:content='data:post.title.escaped' property='twitter:image:alt'/>

7. Combining All Tags

Here’s how you can combine all the Twitter/X Card metadata for a Blogger post:

<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='twitter:title'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<b:if cond='data:view.isMultipleItems'>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
  <b:else/>
    <meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title' name='twitter:description'/>
  </b:if>
<b:else/>
  <b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription.escaped' name='twitter:description'/>
  <b:else/>
    <meta expr:content='data:post.snippet.escaped snippet { length: 147, links: false, linebreaks: false, ellipsis: false }' name='twitter:description'/>
  </b:else>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@itisunique_x' name='twitter:site'/>
<meta expr:content='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' name='twitter:image:alt'/>
<b:if cond='data:blog.postImageUrl'>
  <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<b:else/>
  <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ1DSnZ1gvpNGwNyJg7ywckRti4lBv2hcZEGWjRhehCeTRt7ienI_RgMT5h3RleTn_gJqC4FsiRsJFB_hIAfdA5cnHX1CflfcbHLDemqOy5BdS8vl-Kb_wJiuNKqLzHkSkmNF1Gf6XTnUvMuKNxu7jhFtZdMR5Jwcfgx4DhWXsNav1TFI/s1600/It%20Is%20Unique%20Official.png' name='twitter:image'/>
</b:if>

Conclusion

By adding Twitter/X Card metadata to your Blogger posts, you enhance the appearance and engagement of your content when shared on Twitter/X. The right cards can lead to higher interaction, more clicks, and ultimately increased traffic to your site. Be sure to test your implementation using Twitter’s Card Validator to ensure everything is set up correctly.

If you have any questions or suggestions, feel free to leave a comment below!