In dit deel uit de reeks Twitter Cards bespreken we de “Twitter Summery Card with large image” zoals deze officieel heet. Wij zullen deze summery card met afbeelding dan ook een Twitter Summery Card met afbeelding noemen. In principe is deze hetzelfde als de Twitter Summery Card maar dan met een extra afbeelding in de samenvatting en er hoeft slechts 1 regel uit de HTML voor reguliere summery cards te worden aangepast. Om de Twitter Summery Card met afbeelding te gebruiken moet deze eerst worden toegevoegd aan de pagina in kwestie. De summery card (met en zonder afbeelding) is een kosteloze Twitter Card en moet niet worden verward met de advertentie Twitter Card.

De summery card met afbeelding wordt dus getoond bij tweets, die een link naar een pagina met deze summery card bevatten en is zichtbaar als een korte tekst met een afbeelding die wordt weergegeven onder de tweet. Binnen Twitter marketing worden de summery cards dan ook veelal gebruikt als inbound tool voor meer organisch zoekverkeer naar de eigen website.  In deze “how to” leggen wij uit hoe u in een paar eenvoudige stappen, en in slechts enkele minuten, zelf uw eigen Twitter Summery Card met afbeelding toevoegt aan uw website. Hieronder treft u een voorbeeld aan van een Twitter Summery Card met afbeelding zoals wij die gebruiken op omnileads.nl.

De Twitter Summery Card met afbeelding

De Twitter Summery Card met afbeelding voegt extra informatie toe aan een webpagina met daarbij een grote afbeelding. De samenvatting en de afbeelding zijn zichtbaar op Twitter maar ook voor andere applicaties zoals zoekmachines. Deze extra informatie over een webpagina wordt op Twitter weergegeven als samenvatting. De samenvatting wordt bijvoorbeeld getoond wanneer men een link naar een pagina op uw website opneemt in een Tweet waarvoor een Twitter Summery Card actief is. De samenvatting onder de tweet wordt ook weergegeven als website bezoekers een pagina delen / tweeten met een embedded share knop op een webpagina.

Omdat de werkwijze voor het aanmaken van deze card hetzelfde is als voor de reguliere Twitter Summery Card verwijzen wij graag naar de uitleg daarover voor de details over hoe deze card gevalideerd en geactiveerd moet worden.

Voorbeeld HTML code die in het HEAD deel van de front page wordt ingevoegd voor het weergeven van een samenvatting van de website op Twitter:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@OmnileadsNL" />
<meta name="twitter:title" content="Omnileads.nl Twitter LeadGenerator" />
<meta name="twitter:description" content="Bezoek onze website voor info." />
<meta name="twitter:image" content="http://149.210.158.12/~newland/wordpress/wp-content/uploads/2014/01/twitter-lead-generator-model.png" />
<meta name="twitter:url" content="https://www.omnileads.nl/" />

Voor een Twitter Summery Card kunnen we zelf de site (het account op Twitter), een titel, een omschrijving, een grote afbeelding en een url opgeven. De voorbeeld code hierboven is gebruikt om de voorbeeld tweet in deze how-to te maken.

Valideren Twitter Summery Card met afbeelding

Zie de uitleg voor reguliere Twitter Summery Cards voor de uitleg want die is hetzelfde.