Wildcard Engineering Blog

WE'RE HIRING TRYWILDCARD.COM
Wildcard Logo

Visit our site to learn more about Wildcard.

Let's go →

Pinterest Rich Pins

Rich Pins are a way to publish cards in Pinterest. Like all cards, Rich Pins are typeful, and include information and functionality specific to their type. They’re more useful and engaging than standard pins, which only contain an image, link and title. Providing a more informative and delightful experience in Pinterest gives users a stronger incentive to convert on a key action, or into your brand’s mobile app or website.

image

Basics

There are currently 5 types of Rich Pins (which are cards) offered by Pinterest:

Each type represents a unique template that displays data specific to its content. Recipe pins include data like ingredient lists and instructions, Movie pins include plot summaries and ratings, and product pins include price and availability, among many other fields. This information, displayed beautifully, provides a user more information about the pinned object, making the content behind a link less opaque. They render faster than web views or an in-app browser, and help a user engage with and understand your content in Pinterest.

image

Mechanics

Rich Pins, like Twitter Cards, are based on URL’s. However, where Twitter Cards are reliant purely on HTML meta-tags in the <head> section of webpages, Pinterest accepts two architectures. The first, like Twitter, is HTML markup-based.

Tags

For every URL you’d like to render as a Rich Pin when shared to Pinterest, semantic meta-tags must be added to the head or body of the webpage. Pinterest accepts both Schema.org and Open Graph markup in the <head> section, as well as markup wrapped around the content in the <body> of your pages. The tags required are specific to each Rich Pin type: they differ for products, recipes, movies, articles and places.

After adding the appropriate tags, a brand can submit a URL (or canonical domain) for approval. During the approval process, Pinterest will check to see that all required tag fields are present in your webpages. Once approved, any time a user shares a link to your domain in Pinterest, the relevant Rich Pin tag fields will be fetched from your HTML, and displayed as a card in Pinterest. If at any point your HTML changes, and the required tags cannot be located by the Pinterest bot, your Rich Pin will not display. In some cases, the Pin will fail to be posted, and in others, a standard Pin will be displayed.

Card Provider

Maintaining semantic markup for all webpages, across a variety of card types, is tedious. Additionally, it only allows a single card per webpage. With this in mind, Pinterest offers a second, preferred method: oEmbed. oEmbed is a protocol that allows you to designate a card-providing endpoint. This method is more scalable and flexible than HTML markup, and allows multiple cards per page.

A card-providing endpoint is one that can accept a request, usually in the form of a URL, and return the structured data required to populate the appropriate card. oEmbed refers to the standard Pinterest uses for formatting the request and card data returned in the response. An oEmbed endpoint that satisfies Pinterest’s requirements accepts a URL from your domain, and returns Rich Pin data in oEmbed format. The address of this endpoint does not have to match your domain, and could be set up by you, or by a third-party card provider, like Wildcard.

To enable this, a card provider (oEmbed endpoint, in this case) must be registered with Pinterest. Once approved, whenever Pinterest sees a URL from your domain, it will pass that address to the endpoint as a request, and the endpoint is expected to return Rich Pin data as a response.

image

Creating Rich Pins

Enabling Rich Pins requires implementing one of the two methods listed above (meta-tags or a card-providing endpoint).

Implementation

For tags, each Pin type has a different set of required fields. These can be added to the <head> section of your HTML document, with the appropriate values filled in, or you can simply wrap the existing values in the <body> of your page with tags. Adding tags to the <head> can appear cleaner and more concise, but requires duplicating the data necessary to populate the card. Wrapping content in the body section means simply adding tags where your content already is, without replicating the data. However, this will make the body of your page less concise and human-readable.

Alternatively, you can set-up a card providing server. This server must have an endpoint that accepts URL’s, and returns the matching card data in Rich Pin format. There are a variety of ways to set up a card-providing endpoint, including working with a third-party, such as Wildcard.

Registration

After implementing tags or a card-providing endpoint, you need to apply for Rich Pins with Pinterest. This is accomplished by submitting webpages URLs (tags) or an oEmbed endpoint (card provider). Both forms of registration start by submitting an address into a form on the Pinterest Rich Pins dashboard. After that, it’s time to sit back and wait for a confirmation email. Pinterest has provided no information on how the approval process works, but, in our observations, it takes 2-3 weeks. As with the Twitter Card Platform, we hope this process becomes more transparent in the near future.

Conclusion

Rich Pins are Pinterest’s verison of cards, and they’re the best way to engage Pinners. They are a better representation of your brand and content in user’s boards. On mobile, where friction to switching contexts is high, Rich Pins can help a user understand your brand’s content. Providing a more informing and interactive user experience will improve engagement and conversion.

How Twitter Cards Work

Twitter Cards are a way to tweet more than just 140 characters of text, links and static images. Using them, you can publish different layouts with use-case specific media, data and features. These cards are not just visually distinct and more engaging than “normal” tweets, they’re also more interactive— designed to include specific features and content for each use case.

Basics

10 different card types (like templates) are currently offered by Twitter:

There are also a variety of other card types that have been teased in temporary promotions, such as a voting card, as well as rumored-but-not-spotted types, like the commerce-enabled product card.

image

Cards are the most expressive and effective way to present content in Twitter. They increase engagement and conversion by bringing key content and actions into a user’s stream, rendering them natively. This presents a much faster, delightful user experience than asking a user to undergo the friction of a full-age in-app mobile web browser. Those are slow, frustrating for users, and have minuscule conversion rates. Cards are better, but how do they work in Twitter?

Mechanics

Twitter Cards are based on URL’s. After registering your brand, whenever Twitter sees a URL from your site in a tweet, it sends a bot to your page. That bot looks for specific “meta-tags” (labels, like creator, and values, like @trywildcard) that point to all the information needed to populate a card template. If all the required fields can be found by the bot (if their tags are formatted correctly), the tweet will render as a Card. If there are no tags, or some tags but not all required, or unexpected/disallowed values after tags, no card will appear. Instead, the plain text link will be included in a standard tweet.

Twitter also has a web dashboard where you can test product links, view card previews, and inspect which tags are working or broken. Once you’ve tweeted out some cards, you can track their performance in this dash as well.

image

Creating Twitter Cards

Specifically, Twitter Cards are based on tags in the <head> section of HTML pages. Registering your domain with the Twitter Card Platform is what informs the bot to check for Card tags each time your URL’s are published in Twitter. So, to get Twitter Cards, you need two things:

  1. Twitter Card (or, in some cases, Open Graph) meta-tags in the <head> section of your webpage
  2. Domain registration with the Twitter Card Platform via the Twitter Dashboard

Tags

Meta-tags must be added to the head section of a webpage according to Twitter’s standards. The required fields vary by card type, but can be found in more detail here. These tags convey basic information, like title, and content-specific information, like a product price or app download link. As information about the content in your card changes, the tags must be updated accordingly. The Twitter bot doesn’t read any of your page except what’s captured currently inside Twitter tags. While some other card platforms have begun offering more scalable, programmatic ways to create and serve cards, this remains the only way to integrate with the Twitter Card Platform.

Registration

After adding the necessary tags, you must register your domain and validate your cards with Twitter. This is achieved through Twitter’s Card Vaildator dashboard, available to any logged-in Twitter user here. The ‘Try Cards’ tab allows you to check the accuracy of each field, and see a preview. The ‘Validate & Apply’ tab is a single URL submission form. This is where you register your domain for card approval with Twitter. The time it takes Twitter to approve you for cards is highly variable— time sit back and wait for a confirmation email! Hopefully, in the future, this approval process will be more programmatic and transparent.

In Conclusion

Cards are a great way to increase engagement and conversion on Twitter. They do a better job highlighting your brand’s content, and provide a more interactive, enjoyable experience for users. However, implementing them isn’t painless. Tags for all required fields must be added to the <head> section of each webpage on your domain. After adding meta-tags, you can apply for approval. A confirmation email will indicate when your URLs are Twitter Card enabled!

Why Cards?

Cards have received a lot of attention over the last year. Across the industry, investors, entrepreneurs, designers, engineers and product people have taken turns exploring the future of mobile interaction and discovery*. Some of the advantages touted range from user experience, to search, shareability, inter-app communication and sheer performance. There’s one theme that recurs in all the commentary though: the current mobile ecosystem is missing something.


image

The mobile web, which is increasingly our primary web and the only web for many, sucks. It’s slow, it breaks a lot, it’s hard to use.


image
Screenshots from Alexis Madrigal’s wtfmobileweb.com

Apps fix much of that: they’re fast, dynamic and engaging. But only if you stay within a single app’s confines.

Try to share content or context between apps, or discover a new one, and the experience is slow, difficult and confusing. If mobile is the new dominant paradigm, why do we limit mobile optimization to single programs, and wrestle with legacy technology the rest of the time? Imagine if users could access their touchscreen only inside apps, and had to use a mouse to navigate between them—they’d be outraged. This is more or less analogous to the way we’re plugging the gaps between sandboxed applications with legacy web technology.


image

Cards fix that. They’re the best way to format content for your phone, whether that content is a product, an article, a video, a map, a stock price, a reservation tool, or pretty much anything you might encounter in a web page or app. Cards are single-purpose: one card usually contains one thing. This keeps them fast and easy-to-use.


image

The look and feel of cards are also ideal for mobile devices, as the many successful apps that have adopted this approach can attest to. The user experience and performance of cards outstrips mobile webpages by several orders of magnitude. Additionally, a card’s single-minded focus on just one piece of content or functionality keeps it fast and easy to digest, and makes the form particularly well suited for re-arrangement, engagement and intelligent presentment to users. 


image

Cards, unlike content locked inside an app, can work across platforms. That’s because, under the hood, cards are just structured data—information formatted in a predictable, specific way. Apps lack this common syntax, which is why we can’t easily share content between them. There’s lots of structured data in webpages, but there’s also lots of data related to layout and interaction that doesn’t take advantage of mobile device affordances, which is why the mobile web is so slow. Cards provide a middle ground, allowing us to share content between apps, without forcing the user to load an entire webpage every time. 

So, what are cards? Single-purpose units of structured data, optimized for mobile interaction. They’re the ideal amount of content, coupled with a sip of functionality. Cards are fast and delightful, ideal for mobile users. They’re easily discoverable and sharable. Cards are the beginning of a truly mobile web.

For further reading on cards, check out these great posts by our friends:

If you’re a brand or business looking to take advantage of cards, we’d love to hear from you.

Tech Talks And Hack Days

One of the themes over at Wildcard Engineering is continuous self improvement as an engineer. Since we have team members working on all sorts of different projects, using many different programming languages and technologies, we have clear opportunities to learn skills from one another that we wouldn’t if we were all pigeon holed into one particular project or codebase. In addition to general team meetings and pair programming, two ways in which we try and share knowledge with each other are tech talks and hack days.

Tech Talks

Once per week an engineer at Wildcard gives an hour long tech presentation on a topic that may be new to most other people on the team. Someone may present on a Wildcard specific topic like the architecture of a particular internal service, or on an interesting technology that we may want to considering using the future like a new iOS framework or devops tool. 

Last week the super talented @yusmi​ gave a great talk on search architecture and ElasticSearch , and this week Matthew Ng will be speaking on automated entity extraction. The talks are generally interactive and leave plenty of time for examples, questions, and looking at code. Outsiders are welcome to attend or even speak, so if you’re in the area and want to participate in the future just drop us a line.

Hack Days

This past Friday we broke from regular work to hold our first internal hack day. We pitched some projects, split into teams of 2-3, and sprinted to finish working apps by the end of the day. The benefits of spending a day like this include:

On top of that, it’s fun. The hack day was a tremendous success. Business folks, designers, interns, and developers all got down to work. Some people hacked on Wildcard related one offs that add a ton of value, but never seem to make it onto the product roadmap as top priority. Some people worked on office related improvements like the ability to buzz people into the office without getting out of your seat.

The winning hack, called Entrance Music, was an iOS app where you can choose the song that you want to play as you walk into the Wildcard office…much like a baseball player picking the song that plays as he walks up to bat. It used iBeacons, donated by Estimote, to detect the users location, and a custom music server hooked up to our Sonos speakers to play the song.

Maybe we’ll release it so guests can make a powerful entrance of their own design.

Hacking The Office

After a few months of living with the leftover artwork hanging on the walls of our Chinatown office, we decided that it was time to spice things up a bit….

Engineering At Wildcard

When we speak with engineers who are considering joining our team at Wildcard, they tend to hone in on two attributes of our business more so than others:

We agree wholeheartedly with both. Wildcard is ambitious in that it is attempting to replace the web browser, and all web views, on your mobile phone. It is technically difficult in that in order to take the first steps towards doing so we have to structure data and actions representing a large portion of interactions on the existing web. These attributes are simultaneously exciting and frightening - there will be no overnight success here, but instead there will be a rewarding journey towards building something great over the long term.

Each team member to join so far, regardless of what they’re working on, has signed on to work on something that’s both ambitious and challenging. The engineering team is entrepreneurial by nature. Each member has started their own successful business in the past, or is looking forward to doing so sometime in the future. As such, everyone owns their own projects, and are responsible for putting points on the board via whatever means they deem the most appropriate - engineering solutions, algorithmic solutions, manual solutions, crowdsourced solutions, and clever hacks. Collaboration is constant, but in the end you are responsible for your own metrics and your own impact.

There exists a significant breadth of engineering problems that we’re working on at Wildcard. We have a team focused on iOS development, working closely with talented product designers, and thinking about consumers. We have a data team, focused on turning the existing world wide web into consistent, data and action based cards. We have a platform team building a system that sits between every client interaction and the existing web, dealing with issues around web emulation, proxying, session management, and performance. We are building SDKs, developer tools, search systems, and more. We have people thinking about what things look like in the mobile world in three months, and also what things look like in three years.

It’s been a pleasure putting the beginning of this team together as we’ve been getting the company started, but we still have a long road ahead. If you’ve been thinking about the next step in your career, and you’re looking for an entrepreneurially focused environment where you can learn a lot, have a big impact, and take ownership over hard problems that haven’t been solved before, then please get in touch. We’d love to talk soon and show you what we’re building.

ABOUT

Wildcard is a seamless replacement for the Internet on your phone. Our vast library of cards delivers the mobile web faster than any browser, and in a fraction of the time it takes to download native apps.