Kennis - Het online marketing blog van Tribal

Online marketing is een vak apart en een wereld die snel verandert. Wij laten ons dagelijks inspireren door de nieuwste ontwikkelingen, tips & tools en allerlei nuttige toepassingen. Hieronder lees je welke kennis wij in huis hebben.

Grote verandering bij Twitter: de cards [met implementatietips]

Door: easy_admin & Redactie

Geschatte leestijd: 5 minuten

AllThingsD’s Mike Isaac geeft aan dat er grote veranderingen worden doorgevoerd bij Twitter, waaronder de cards. Cards zijn Twitter-berichten die je kunt uitklappen. In de uitklapper wordt meer informatie weergegeven, welke vanaf een andere website wordt ingeladen. Samen met collega Rick van Ravensberg hebben we de mogelijkheden van deze nieuwe functionaliteit bekeken. In dit artikel bespreken we de mogelijkheden en de implementatie van deze cards.

Met de Twitter cards kun je:

  • Meer invloed uitoefenen op de weergave van de content in Twitter-berichten;
  • Traffic genereren naar je website;
  • Het aantal volgers op Twitter vergroten, middels content attributie.
Voorbeeld van Twitter card

Voorbeeld van Twitter card

Twitter card types

Er zijn 3 card types die je aan de Twitter-berichten kunt toevoegen:

  • Summary
  • Photo
  • Player

Summary

Dit is de default card, inclusief titel, omschrijving, thumbnail image en verwijzing naar je Twitter account. Deze kan gebruikt worden voor o.a. blogposts, nieuwsartikelen en productpagina’s.

Voorbeeld van Twitter summary card

Voorbeeld van Twitter summary card

Photo

Dit is een card met een tweet sized foto.

Voorbeeld van Twitter photo card

Voorbeeld van Twitter photo card

Player

Deze card zal misschien wel de meest interessante zijn. Het wordt mogelijk om een tweet sized media player te plaatsen binnen het Twitter-bericht van de gebruiker. In tegenstelling tot de summary en de photo card, waarbij de content door de server van Twitter wordt ingeladen en vanuit Twitter zelf wordt geserveerd, zal de player card in een iframe geladen worden. In beginsel is dit bedoeld om het mogelijk te maken om verschillende soorten media players te kunnen plaatsen binnen in een tweet, waarvan YouTube en Vimeo de meest bekende zijn. Je kunt echter ook jouw eigen media in deze iframe plaatsen. Een iframe maakt het namelijk mogelijk om een website rechtstreeks te embedden in een andere website.

Voorbeeld van Twitter player card

Voorbeeld van Twitter player card

De YouTube player wordt eigenlijk vanuit YouTube.com rechtstreeks in de Twitter omgeving ingeladen met behulp van een iframe.

Deze technologie zagen we eerder al toegepast worden bij Facebook applicaties. De gebruiker bezoekt een applicatie binnen de omgeving van Facebook, terwijl in werkelijkheid een externe locatie wordt bezocht. Hierdoor heeft de eigenaar van deze externe locatie volledige controle over de content die vertoond wordt binnen in de iframe.


Mogelijkheden voor advertenties?

Vermoedelijk stelt Twitter binnen deze cards ook advertentieruimte beschikbaar. De microblog hoopt met deze cards een betere uitgangspositie binnen de online advertentiemarkt te verkrijgen. De cards zullen niet zichtbaar zijn in Flipboard en andere apps, die op Twitter parasiteren. Hierdoor wordt de waarde van deze third-party apps vermoedelijk een stuk minder.


Do’s en don’ts

Bij alle typen cards, maar met name bij de laatsgenoemde, de player, geeft Twitter een deel van de controle over de content op haar website uit handen. Bij Twitter staat de gebruikerservaring altijd centraal. Om deze alsnog te kunnen bewaken, heeft Twitter in het verleden al voor developers bindende richtlijnen opgesteld. Deze heeft ze nu aangevuld met een aantal do’s en dont’s die bij hetzelfde doel aansluiten:

Do’s

  • De Twitter card moet op zoveel mogelijk Twitter clients goed vertoond worden, maar in ieder geval door de officiële clients van Twitter, namelijk de websites twitter.com en mobile.twitter.com en de (native) Twitter apps voor iPhone en Android. Het is een pré wanneer third party clients zoals Hootsuite en Tweetdeck ook ondersteund worden. Probeer de card zo uitvoerig mogelijk te testen voordat je deze ter goedkeuring aanbiedt.
  • Als je video en audio aanbiedt, doe dit dan met behulp van een zogenaamde stream. Op die manier hoeft de gebruiker niet te wachten totdat de volledige content is ingeladen. Het wordt afgeraden om gebruik te maken van Flash of Silverlight, omdat niet iedere gebruiker dit heeft geïnstalleerd. Mocht je video willen weergeven, dan kun je het beste gebruik maken van bijvoorbeeld YouTube, zodat de meeste gebruikers het direct kunnen afspelen.
  • Maak altijd gebruik van een met SSL beveiligde HTTPS verbinding. En zorg ervoor dat alle content via HTTPS wordt ingeladen.
  • Zorg ervoor dat de weergave binnen verschillende browsers optimaal is en dat elementen op jouw pagina niet in conflict raken met de website van Twitter. Een bekend voorbeeld is het ontbreken van het wmode="opaque" attribuut, waardoor Flash of Silverlight objecten niet op de juiste diepte staan.

Ontbreken van wmode=”opaque”

Ontbreken van wmode="opaque"

In bovenstaand voorbeeld ontbreekt wmode="opaque", waardoor het menu áchter het filmpje valt

Dont’s

  • Voorkom dat de browser waarschuwingen of foutmeldingen genereert, zoals een ‘mixed content’ warning als de website content via zowel HTTPS als HTTP geladen wordt. Onderstaand een voorbeeld hiervan:

‘mixed content’ warning

‘mixed content’ warning
  •  Laat media niet automatisch afspelen
  • Stel niet als voorwaarde dat gebruikers moeten inloggen om de media af te spelen.
  • Vermeld geen sharing features binnen de media


Twitter cards implementeren

Het implementeren van Twitter cards is erg eenvoudig. Hiervoor dien je een stukje HTML in de header van je website te plaatsen. YouTube heeft deze Twitter card tags bijvoorbeeld inmiddels ook al bij de video’s geïmplementeerd. Onderstaand een voorbeeld van het stukje HTML bij the  New York Times:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimes" />
<meta name="twitter:creator" content="@SarahMaslinNir" />
<meta name="twitter:url" content="https://www.nytimes.com/2012/02/19/arts/music/amid-police-presence-fans-congregate-for-whitney-houstons-funeral-in-newark.html" />
<meta name="twitter:title" content="Parade of Fanse for Houston's Funeral" />
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here." />
<meta name="twitter:image" content="https://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articeLarge.jpg" />

De hele lijst met een overzicht van alle Twitter card tags zijn onderaan in dit artikel te vinden.

 

Gelijkenissen met Open Graph

Het zal je misschien al zijn opgevallen dat de Twitter-tags gelijkenissen vertonen met de Open Graph tags die door Facebook gebruikt worden. Dit klopt inderdaad, want de tags zijn beiden gebaseerd op hetzelfde uitgangspunt, namelijk dat je per kanaal kunt aangeven welke zogenaamde meta data wordt vertoond. Meta data geeft aanvullende informatie over een bepaald object, zoals in dit geval aanvullende informatie over een webpagina. Deze data wordt in HTML altijd tussen de <head> tags geplaatst op de webpagina.

In principe moedigt Twitter het gebruik van haar eigen attributen, zoals twitter:title aan. Wanneer deze niet worden gevonden, wordt er gezocht naar het corresponderende attribuut als OpenGraph tag, namelijk og:title. Mocht zelfs deze niet gevonden worden, dan zal Twitter de inhoud van de <title> tag gebruiken. Echter wanneer je specifiek voor Twitter aparte meta data kunt definiëren, voorkom je het risico op duplicated content over verschillende kanalen en kun je content presenteren die beter aansluit bij het kanaal.

Kort gezegd zoekt Twitter in onderstaande volgorde naar een geschikte titel, zoals in het gegeven voorbeeld:
1. <meta name="twitter:title" content="Twitter specifieke titel" />
2. <meta property="og:title" content="Facebook specifieke titel" />
3. <title>HTML specifieke titel</title>

Twitter cards zijn nog in bèta en om in aanmerking te komen voor de implementatie dien je (a) de documentatie door te nemen op https://dev.twitter.com/docs/cards, (b) er zeker van te zijn de Twitter cards ook echt te gaan gebruiken en (c) het contactformulier voor deelname in te vullen. Het is bij ons nog niet bekend of in de toekomst het protocol wordt vrijgegeven en iedere website het mag implementeren, zoals dit ook bij Facebook’s Open Graph het geval is.

Discussie- Geen reacties

Blijf op de hoogte van handige kennis en het laatste nieuws van je favoriete online marketing bureau:

INSCHRIJVEN VOOR ONZE NIEUWSBRIEF