Twitter Introduces Mobile App Deep-linking and New Twitter Cards-Valid W3C META Tags

Twitter rolls out mobile app deep-linking and new Twitter Cards including "App, Product, and Gallery." Download valid W3C meta tags.

Twitter Cards, that was launched with three card types: "summary," "photo" and "player/video" today, gets three new types of Cards, as well as a new way to bring people directly to your app from a Tweet.

The cards are now used by more than 10,000 developers and helps mobile apps and websites to richly represent content on Twitter, including article summaries, user-posted photos, videos, songs and more.

Twitter today introduced an ability called "mobile app deep-linking" that allow users to tap a link to either view content directly in your app, or download your app, depending on whether or not they have your app installed, explains Twitter.

The mobile app deep-linking is available globally across all Twitter Card types. To enable this features, you just need to add a new set of markup tags.

Twitter Card App Install

In addtion, following new types of Twitter Cards are launched today include:

  • App card show information about moible app from the App Store or Google Play-- including app name, icon, description and other details like rating or price. Twitter say, it only needs developer ID to display information.
  • Product shows an image and description, along with up to two customizable fields that let you display more details like price or ratings.
  • Gallery represent an album or collection of photographs via a preview of the photo gallery--indicating user that a gallery has been shared, rather than just one individual photo.

Additionally, the company has also re-architected the way Cards are created and delivered. The new system is backward compatible and continue to work seamlessly with already implemented cards.

Twitter Card Mobile App Deep-Linking

Just few days back, I experienced W3C validation issue, with Twitter Cards META tags--below are the correct HTML5 META tags that validates W3C:

Here is an example of original metatag:

<meta name="twitter:card" value="summary"/>

Here are W3C valid Summary Twitter Card META tags:

<meta property="twitter:card" content="summary"/>
<meta property="twitter:site" content="@diTii"/>
<meta property="twitter:creator" content="@diTii"/>
<meta property="twitter:url" content="http://www.ditii.com/"/>
<meta property="twitter:title" content="diTii.com - All About Technology"/>
<meta property="twitter:description" content="CONTENT DESCRIPTION."/>

The premise is just change the "name" with "property" and "value" with "content."

To get started with implementing the markup for Twitter Cards, check out this article, or this documentation page, and test using this validator tool.

Note: If you are using new responsive design with HTML5 and CSS3, "not all" the markup can be validated at this time--for example "Pubdate", "DateTme" and more. You'll have to stay "un-validated" for some HTML5 properties.

The event, also saw the mentioning of geekier terminology like "footer tags," and "URL schemes."

Finally, Twitter also a href="http://blog.twitter.com/2013/04/new-mobile-updates-for-android-iphone.html" target="_blank">released new version of Android and iphone apps and mobile.twitter.com.

All the three mobile apps, plus twitter.com, now show more types of content in expanded Tweets: photo galleries, apps and product listings.

You'll now see a new link right below content that is shared from another mobile app, such as Foursquare or Path. The link lets you open or download the app right from the Tweet, depending on whether or not you have it installed.

You can download these updates from the Google Play or App Store.

New Twitter for Android app Twitter mobile app with deep-linking