MENUMENU
  • Services
    • Services
      • Search Engine Optimization
      • Local SEO
      • Generative Engine Optimization
      • Digital PR
      • Content Marketing
      • Email Marketing Services
      • Lifecycle Marketing
      • Paid Media Advertising
      • Social Media Marketing
      • Creative Design Services
      • Conversion Rate Optimization
      • Website Design & Development
      • Amazon Marketing Services
      • Franchise Marketing
      • Franchise Development
      • National to Local Marketing
      • Reporting and Data Analytics
      • Digital Marketing Strategy
  • Who We Serve
    • Who We Serve
      • Franchise Marketing
      • B2B Marketing
      • Lead Generation
      • Ecommerce
      • We Build Custom Strategies
      • View Sample Industries
  • About Us
    • About Ignite Visibility
      • Our Story
      • Our Values
      • Our Team
      • Clients
      • Diversity & Inclusion
      • Our Blog
      • Marketing Resources
      • Franchise Marketing Resources
      • Careers
      • Hiring Notice
  • Case Studies
  • Awards
  • Contact
  • 619.752.1955
Home / Twitter / What are Twitter Cards, What is a Twitter Card?

What are Twitter Cards, What is a Twitter Card?

November 9, 2012 By IgniteVisibility

What are Twitter Cards

What are Twitter Cards? Learn How they Work and What They Are!

Google recently made changes to its SEO ranking system that saw users scrambling to understand the implemented changes, and taking the necessary measures to benefit from them. Now it is time for Twitter users to do the same. In June of this year (2012) Twitter’s VP of Product Michael Sippey announced through a blog post that the social media platform was going to implement changes that would see a new experience for expanded tweets. The technology behind this new feature has been named Twitter cards.

What are Twitter Cards
What are Twitter Cards

Twitter Cards seek to allow Twitter’s partner websites (web site owners who use the social media platform) to present the contents of their website in a more engaging manner. This latest Twitter development will enable users to attach media experiences (videos and pictures etc.) to tweets that are linked to their content. Through the implementation of Twitter Cards to their web site, Twitter partners would be offering their Twitter audience a new experience. The process requires that web site owners add a few lines of HTML to their webpages. This will allow their customers/site visitors who tweet links to their content to have a card that is added to the tweet. This card will be visible to all the followers of the user that sent the tweet.

In a nutshell, Twitter cards refer to the technology that will deliver expanded, multimedia-rich tweets to users of web sites using the card. The tweets that are delivered will now be a more attractive and fancier version of tweeted content. The cards will now show more detail about your posts, giving your readers a bit of preview of what they will be seeing when they click through to your site. Developers, publishers and brands can simply add a few code lines to their web pages and create better tweets that will showcase their content in the Twitter stream.

The Advantages of Twitter cards

Twitter cards will allow a web developer to:

* Have control over how the content from their web site is displayed.

* Increase their site traffic through better looking tweets.

* Increase their Twitter account followers through content attribution.

* Better instream experience for Twitter users.

What are the Three Main Types of Cards?

There are three main types of Twitter Cards the user can select from to add to his or her tweets. These are summary, photo and player. Each card offers users its own unique experience, and they are also designed to facilitate both web and mobile users. Here is a little background information on each card.

1. Summary – This is the default card. Along with its Twitter account attribution, the card features a title, a description and a thumbnail image. It will allow your readers to see the title of your blog post along with a thumbnail image, and a short description of your post. They will also be able to see your Twitter handle.

Twitter Card Summary
Twitter Card Summary

2. Photo – This is a Tweet size photo card.

Twitter Card Photo
Twitter Card Photo

3. Player – This card features a Tweet sized video, audio or media player.

Twitter Card Player
Twitter Card Player

The developer must specify which card he will use for his page content by adding the HTML (meta name=”twitter:card” content=”summary”>) to the HEAD section of his page.

What are the Twitter Card Properties?

Twitter Card properties are actually key-value pairs that are each defined in its own HTML meta tag. The entire card experience on Twitter is defined by the collection of properties, but the function of individual cards requires a specific set of properties that it supports. There is only support for one card per page. There are a few basic principles that are supported by all three cards although each a bit differently. Here is an idea of what I am talking about:

* Card Property – twitter: card

Description – The card type, which will be one of “summary”, “photo”, or “player”.

* Card Property – twitter: url

Description – Canonical URL of the card content.

* Card Property – twitter: title

Description – The title of your content as it should appear in the card.

* Card Property – twitter: description

Description – A description of the content in a maximum of 200 characters.

* Card Property – twitter: image

Description – A URL to the image representing the content.

Note: The Card Property and description information is as seen in the official Twitter Cards documentation.

How do They Work with Opengraph Tags?

Twitter card tags may appear similar to Opengraph tags because Twitter based their principles on the same ones used by the Open Graph protocol. When Opengraph is used to describe the data on a page, it makes it easier to produce a Twitter card without creating duplicate tags and data. Twitter Cards are customized to show just the content the site owner wants to show in the tweet. This is possible through the addition of OpenGraph tags in the HEAD of the website. Developers are able to do a classification and description of the content they want attached to their Like buttons. Twitter will then be able to pick up and display the correct information, such as the image and category from the website when readers like your content and it appears on their profile or in news feeds. The tags used will determine how your Like button functions.

When the Twitter card processor conducts a tag search on your page it will first try to find the Twitter property, but if it is not there it will default to the supported Open Graph property. Both properties are therefore independently defined on your web page, and the chances of the markup being duplicated in order to provide a description of your content and experience is greatly reduced. The OpenGraph protocol is easy to use, and can be used to create more than just a title tag and meta description.

Both Twitter and Open Graph tags may be used to create a definition of a summary card. With the introduction of Twitter Cards, OpenGraph has gained even more importance than it once held. Every web site should have the basic OpenGraph meta data. The recent announcement by Microsoft that OpenGraph will now be supported in Internet Explorer 10 and in Windows 8 is even more good news for Twitter users.

Should you Add Twitter Cards to your Website?

As is the case with new implementations and changes, the Twitter Card does have its quirks. Not all Twitter users will see the buttons at all times, and not across all web or mobile platforms. That has never stopped people from gravitating to the technology, and even making suggestions that help to perfect it. Twitter has just rolled out this new user experience for expanded tweets, and has acknowledged there are shortcomings. They continue to work to develop the technology and every Twitter user should definitely start using it on their websites. If you miss one element of the tag it will not should up on your page.

The Twitter buttons will not work right away. You will first have to add the markup for the Twitter cards to your template then submit your blog to Twitter and wait for approval. They even provide a tester page where you can preview your Twitter card and see what it will look like when it is expanded on Twitter. The expanded tweets are indeed attractive and the new technology is already proving to do a great job at getting people more engaged with the web sites that use them.

There have been no indications so far that Twitter cards will harm or disrupt the overall function of your website. It may be down at times, but for some users when it is up it definitely adds that touch of class to tweeting. The debate continues as to whether or not Twitter is making the right decision on seemingly wanting to become the next Facebook. Some users appreciate it and see this as welcome change. Indications are that the web site owners, developers and brands that have tested and are using the technology are impressed with it. While some people think Twitter should do away with this move others are looking forward to the fixes and even wish to see it go beta.

References

  • https://dev.twitter.com/blog/twitter-cards
  • https://dev.twitter.com/docs/cards
  • https://allthingsd.com/20120801/the-future-of-twitters-platform-is-all-in-the-cards/
  • https://www.codeitpretty.com/2012/09/twitter-cards-for-blogger.html

Related Posts

  • A Better Twitter?

    Earlier this week, Twitter made their ‘refreshed’ look global, a move they tweeted in January…

  • Twitter Kicks Off New Customizable Timelines

    Twitter has just introduced the ability to make custom timelines today. This new feature will…

  • A Brief Look at Twitter Advertising Reporting - $100 Spend

    This post is meant to show a newbie what Twitter ads can do for you.…

  • A Better Twitter?

    Earlier this week, Twitter made their ‘refreshed’ look global, a move they tweeted in January…

  • Twitter Kicks Off New Customizable Timelines

    Twitter has just introduced the ability to make custom timelines today. This new feature will…

  • A Brief Look at Twitter Advertising Reporting - $100 Spend

    This post is meant to show a newbie what Twitter ads can do for you.…

About IgniteVisibility

About Ignite

Ignite Visibility is a premier full-service digital marketing agency. We were founded in San Diego, CA but are now a 100% remote-first company with Igniters and clients around the globe.

Ignite Visibility is one of the highest awarded digital marketing agencies in the industry, works with some of the biggest brands in the world and is a 6x Inc. 5000 company.

noun-trading

Our Services

Ignite Visibility offers Award-Winning Services including comprehensive full-funnel digital marketing strategies. Learn more about our most popular service offerings below:

  • SEO Search Engine Optimization
  • PPC Pay Per Click
  • Email Marketing
  • Social Media
  • Creative
  • View All Services

Contact Us. Let’s Chat!

  • This field is hidden when viewing the form

Marketing Guides

SEO In 2020: How To Prepare For Major Disruption

"SEO: The Movie" - Have You Seen Our Film? Watch Now

"Social Media Marketing: The Movie" - Have You Seen Our Film? Watch Now

Amazon Seller Central vs Vendor Central

Listen To The Podcast Featuring The Best Minds In Marketing

John Lincoln Interviews Global Director of Digital Marketing & Strategy at Qualcomm, Jessica Jensen

Check Out 227 Free Online Marketing Classes

The 2020 Guide To Dominating SEO With Advanced Schema

Learn More About Our Digital Marketing Agency

Learn More About Our SEO Services

Learn More About Our Paid Media Services

SELECT CATEGORY

Become A Contributor

Interested in writing for Ignite Visibility?

APPLY NOW

noun-chat

Let's Chat

Ready to grow your online visibility and sales?

Request Your Free Proposal

Work With Us

NEWSLETTER // SIGN UP NOW










noun-strategy

Free Marketing Resources

  • Digital Marketing Resources
  • Marketing Strategy Videos
  • Weekly Marketing News Recaps
noun-strategy

Most Popular Blogs

  • How Long Does SEO Take?
  • Multi-Location SEO: Top Strategies
  • Google AI Overviews: Everything You Need to Know
  • Technical SEO 101
  • 18 Google Ad Extensions You Should Use
  • Complete Guide to Google Responsive Display Ads
  • Capitalizing on Local Service Ads
  • How SEO and PPC Work Together
  • Community Management Best Practices
  • B2B Social Media Marketing Guide
  • VIEW ALL BLOGS
noun-letter

Join Our Newsletter

CONNECT WITH US

  • facebook
  • twitter
  • instagram
  • youtube
  • linkedin

Services

  • Search Engine Optimization
  • Generative Engine Optimization
  • Pay Per Click Management
  • Social Media Marketing
  • Email Marketing
  • Conversion Rate Optimization
  • Website Design & Development
  • Creative Design
  • Content Marketing
  • Digital PR
  • Franchise Marketing
  • Digital Marketing Agency Services

About

  • Our Team
  • Our Values
  • Clients
  • Industry
  • Reviews
  • Careers
  • Marketing Resources
  • Privacy Policy & Service Terms
  • Advertising Disclosures
  • Sitemap

Contact

4370 La Jolla Village Drive
Suite 320
San Diego, California 92122

619.752.1955

Join The Newsletter

Sign up for our newsletter to get the latest from Ignite Visibility.











google parther logo

©2025 Ignite Visibility. All Rights Reserved. Privacy Policy and Terms of Service