Speaking | Technical

An introductory look at social mark-up

by on 11th June 2015

For those relatively new to the world of Open Graph & Twitter Card, these slides would make for a great introductory reference. For others who might have worked with social mark-up before, there’s a couple of interesting areas around leveraging the twitter:player for interactive content in Twitter’s UI, as well as an experiment to merge HTML mark-up with JSON-LD. This I’ll detail below.

Leveraging Interactive Content in Twitter:Player

Twitter has some strict rules around the use of the twitter:player property, which is enforced by an approval process before these types of Cards can even be generated. However, providing that the content you’re marking-up isn’t spammy / overtly promotional / deceptive i.e. includes banner ads etc, the actual scope of this tag reaches beyond just the realms of audio & video that Twitter specify.

The twitter:player property works with iframe based content, and therein lies the flexibility / opportunity to leverage this property to add more creativity to your tweets. Let’s take a look at a couple of examples…

So here’s an ‘interactive’ Card for a typical paid advertiser (Acura) on Twitter:


And another from Twitter’s content partner Slideshare:


Now imagine for a second that the embed code used for both of these, references a piece of content marketing, or even an interactive segment.

I think this is an invitation to really experiment with your Tweets, and by default getting your clients / sites at least submitted for approval can only be a good thing.

Experimenting with JSON-LD

Given our historic love for the topic, and why we think JSON-LD is part of an exciting future of the web, we wanted to test to see how far social networks have gone in acknowledging this type of mark-up.

As an experiment we converted the traditional HTML mark-up for Twitter Cards & Open Graph into the following JSON-LD:

Twitter Card

Open Graph:

Sadly despite the mark-up validating in the structured data testing tool, both Twitter & Facebook are not able to yet process the data contained to form cards / snippets, or even pull the data in the Twitter validator of FB debugger.

In comparison to Schema.org which has a growing community of sites integrating (& recommending) JSON-LD based mark-up, and even the fast adoption rate of web technologies such as Angular.js, I seriously hope that the likes of Twitter & Facebook will soon follow suit.


  1. I love the power this can be used for. Like the interactive tweets by where you don’t even have to leave twitter! Absolutely awesome and something to have in place for sure.

Comments are closed.

We're hiring – check out our careers page Careers

Get insights straight to your inbox

Stay one step ahead of the competition with our monthly Inner Circle email full of resources, industry developments and opinions from around the web.