Academy

Wat zijn Twitter Cards?

Twitter Card mark-up—Twitter Cards in het kort—is gestructureerde markup die je aan jouw HTML documenten kunt toevoegen om de context van jouw inhoud uit te leggen en om controle te krijgen over de snippets die getoond worden wanneer URL’s op Twitter gedeeld worden.

Hier is een voorbeeld hoe CNN Twitter Cards gebruikt om te bepalen hoe een blog post eruit ziet op Twitter:

Twitter Card example tweet

Waarom Twitter Cards ook voor jou belangrijk zijn

Pagina’s geoptimaliseerd met Twitter Cards krijgen meer kliks, likes, en retweets.

Waarom?

Omdat een mooie afbeelding de aandacht trekt. En een goede naam en omschrijving mensen verleiden om op de snippet te klikken.

Maar genereert Twitter deze niet automatisch?

Dat doen ze—tot op zekere hoogte. Maar 99% van de tijd kiest Twitter een niet zo goede afbeelding en toont het een afgekorte naam en omschrijving.

Net als Open Graph markup voor Facebook en LinkedIn, geven Twitter Cards je controle over hoe de snippets van een URL eruit zien op Twitter.. In SEO hebben we een grote passie voor het fine-tunen van titels en meta descriptions om een zo groot mogelijk aantal kliks te krijgen, maar mensen vergeten dit vaak wanneer het sociale media betreft. Dat is jammer want de strijd om aandacht op sociale media is net groot (misschien zelfs groter).

Verhogen Twitter Cards mijn rankings?

Nee, Twitter Cards verhogen niet direct jouw rankings. We denken echter dat Twitter Cards zoekmachines helpen de context van jouw inhoud te bepalen, net als Open Graph en Schema.org. En bovendien verbetert het gebruik van markup in je Twitter Cards jouw zichtbaarheid op Twitter, wat leidt tot meer shares en links. Dus jouw SEO prestatie profiteert indirect van Twitter Cards.

Welke platforms ondersteunen Twitter Cards

Vanzelfsprekend worden Twitter Cards door Twitter ondersteund, omdat zij de Twitter Card standaard hebben ontwikkeld, maar zij worden ook door Slack ondersteund.

Na een aantal testen hebben wij uitgevonden dat Facebook, LinkedIn, en Google Plus hun snippets niet baseren op Twitter Card markup als er geen Open Graph markup is. In plaats daarvan baseren zij de snippets op de title en meta description en een willekeurig gekozen afbeelding.

Dus als je jouw zichtbaarheid op LinkedIn, en Google Plus wilt optimaliseren, maak dan zeker gebruik van Open Graph markup.

Hoe implementeer je Twitter Cards

Zoals hierboven vermeld, kun je Twitter Cards implementeren door Twitter Card markup toe te voegen aan jouw HTML documenten—in de <head> sectie van jouw pagina’s. Je kunt dit handmatig doen, maar als de website aangestuurd wordt door een CMS dan zijn er waarschijnlijk plugins of andere functionaliteit beschikbaar. Als dit niet het geval is, neem dan contact op met jouw developer omdat het meestal niet moeilijk is hier functionaliteit voor te maken.

Verschillende types Twitter Cards

Er zijn vier types Twitter Card die je kunt gebruiken:

  1. Summary Card
  2. Summary Card with Large Image
  3. App Card
  4. Player Card

Hieronder kijken we naar de eerste twee in meer detail, en naar welke eigenschappen in een Twitter Card gedefinieerd moeten worden.

Twitter Card type: Summary Card

Twitter heeft de volgende twee twee eigenschappen nodig voor een geldige Twitter Card implementatie.

  • twitter:card
  • twitter:title

Maar we raden het ten zeerste aan dat je ook de onderstaande eigenschappen gebruikt om meer context over de inhoud te geven:

  • twitter:site
  • twitter:descriptio
  • twitter:image

Een voorbeeld

Zo ziet een Search Engine Journal article on Machine Learning eruit wanneer het gedeeld wordt:

Twitter Card Summary Card example

Wanneer we de source code opvragen, ziet de Twitter Card implementatie er zo uit:

Twitter Card Summary Card source code example

Twitter Card type: Summary Card with Large Image

De vereiste en aanbevolen eigenschappen voor een Summary Card with Large Image type zijn hetzelfde voor de Summary Card.

Een voorbeeld

Al onze artikelen zijn een goed voorbeeld—ze gebruiken allemaal de Summary Card with Large Image. Ons hreflang artikel ziet er bijvoorbeeld zo uit wanneer het gedeeld wordt op Twitter:

Twitter Card Summary Card Large Image example

Wanneer we de source code opvragen, ziet de Twitter Card implementatie er zo uit:

Twitter Card Summary Card Large Image source code example

Twitter Card eigenschappen in detail

twitter:card

De twitter:card De twitter:card eigenschap bepaalt welke van de vier Twitter Card types je gebruikt:

  1. Summary Card: tekst met een vierkante afbeelding.
  2. Summary Card with Large Image: tekst met een grote, rechthoekige afbeelding.
  3. App Card: voor het promoten van apps.
  4. Player Card: om video’s te laten zien. Maar om dit te gebruiken zul je gewhitelist moeten zijn.

Voorbeeld code snippet

<meta name="twitter:card" content="summary_large_image" />

Vereisten

Je moet een van de vier Twitter Card types kiezen.

Wat gebeurt er als je ze niet definieert\

Als je niet de twitter:card defineert, weet Twitter niet volgens welk Twitter Card type je de inhoud wilt laten zien, en dus behandelen ze de URL alsof het geen Twitter Card mark-up heeft.

twitter:site

De twitter:site eigenschap beschrijft de Twitter account of website.

Voorbeeld code snippet

<meta name="twitter:site" content="@contentking" />

Vereisten

De twitter:site eigenschap moet naar een actief Twitter account van een website verwijzen.
Bepaal of twitter:site eigenschap, of de twitter:site:id eigenschap, die je de Twitter ID van de site laat bepalen. Een Twitter ID is een unieke numeric value die jouw Twitter account identificeert. Je kunt jouw Twitter ID hier opzoeken: : http://mytwitterid.com/. In ons geval zouden we dit voorbeeld snippet gebruiken:

<meta name="twitter:site:id" content="15467325" />

Wat gebeurt er als je het niet definieert

De relatie tussen de inhoud en het bijbehorende Twitter account is niet duidelijk. Terwijl dit niet direct een impact heeft, is het altijd aan te raden, twitter:site te definiëren.

twitter:creator

De twitter:creator eigenschap beschrijft de Twitter account van de auteur.

Voorbeeld code snippet

<meta name="twitter:creator" content="@stevenvvessum" /><\code>

Vereisten

De twitter:creator moet naar een actief Twitter account verwijzen. Definieer of twitter:creator, of twitter:creator:id.

You can look up your Twitter ID here: http://mytwitterid.com/. In Steven’s geval zou hij het volgende voorbeeld snippet gebruiken:

<meta name="twitter:siteid" content="8728882" />

Wat gebeurt er als je het niet definieert

De relatie tussen jouw content en het Twitter account van de auteur is niet duidelijk. Dit heeft niet direct een effect.

twitter:title

The twitter:title eigenschap bepaalt de naam van de Twitter Card, net als een title attribuut van een pagina.

Voorbeeld code snippet

<meta name="twitter:title" content="Hreflang: ranking the right pages for multi-language sites" />

Vereisten

Wanneer je jouw snippet optimaliseert voor Twitter, bedenk dan dat de titel niet op een regel past als het langer dan 55 tekens is. N.B. Twitter raadt een maximum van 70 tekens aan—maar in onze testen laten ze nooit zulke lange titels zien.

Wat gebeurt er als je het niet definieert

Twitter gebruikt je og:title eerst, en dan de pagina titel als een fallback..

twitter:description

De twitter:description eigenschap bepaalt de omschrijving van de Twitter Card. Het is een korte omschrijving van de pagina.

Voorbeeld code snippet

<meta name="twitter:description" content="Learn how to implement hreflang to get search engines to rank the right pages for your multi-language site. Check it out now!" />

Vereisten

Wanneer je jouw snippet optimaliseert voor Twitter, bedenk dan dat de omschrijving niet op twee regels past als zij langer dan 125 tekens is. N.B. Twitter raadt een maximum van 200 tekens aan—maar in onze testen laten ze nooit zulke lange titels zien.

Wat gebeurt als je het niet definieert happens

Twitter gebruikt dan eerst jouw og:description, en dan jouw then your description als een fallback.

twitter:image

De twitter:image eigenschap bepaalt de afbeelding die jouw snippet moet laten zien. Zorg ervoor dat je deze afbeeldingen zorgvuldig selecteert. De grootte doet er toe, en ook de kwaliteit en afmetingen.

Voorbeeld code snippet:

<meta name="twitter:image" content="https://www.contentkingapp.com/wp-content/uploads/2018/06/[email protected]" />

Vereisten

Wanneer je Twitter Card type twitter:image met de Summary Card Twitter Card type gebruikt, houd dan rekening met de volgende vereisten:

  • Beeldverhouding: 2:1
  • Minimale grootte: 300 x 157 pixels
  • Maximale grootte: 4096 x 4096 pixels
  • Maximale bestandsgrootte: 5 MB
  • Ondersteunde formaten: JPG, PNG, WEBP, and GIF (voor animated GIFs wordt alleen het eerste frame gebruikt). NB SVG wordt niet ondersteund.

Wanneer je twitter:image met de Summary Card with Large Image Twitter Card type gebruikt, houd dan rekening met de volgende vereisten:

  • Beeldverhouding: 2:1
  • Minimale grootte: 300 x 157 pixels
  • Maximale grootte: 4096 x 4096 pixels
  • Maximale bestandsgrootte: 5 MB
  • Ondersteunde formaten: JPG, PNG, WEBP, and GIF (voor animated GIFs wordt alleen het eerste frame gebruikt). NB SVG wordt niet ondersteund.

Wat gebeurt er als je het niet definieert

Twitter controleert eerst of je een og:image gedefinieerd hebt, en anders pakt het gewoon een willekeurige afbeelding op jouw pagina.

twitter:image:alt

De twitter:image:alt laat je de twitter:image in tekst omschrijven voor slechtzienden.

Example code snippet:

<meta name="twitter:image:alt" content="Hreflang image that symbolizes different languages" />

Vereisten

Gebruik een maximale lengte of 420 tekens.

What gebeurt er als je het niet definieert

Niets, omdat het een optionele eigenschap is. Het is echter goed als het bepaalt want het helpt slechtzienden je inhoud te begrijpen.

Andere Twitter Card types en eigenschappen

Er zijn nog twee types Twitter Card: App en Player. Deze zijn echter zeldzaam en zijn niet van toepassing op de meeste websites. Je kunt hier meer informatie over deze types en de eigenschappen vinden:

Valideer jouw Twitter Card implementatie met een checker

Je kunt de Card Validator van Twitter gebruiken om Twitter Card implementatie te valideren. Deze laat je echter maar een URL per keer controleren. Het is logisch om dan te kiezen voor een andere oplossing die je een groot aantal pagina’s tegelijkertijd laat controleren. ContentKing helpt je hiermee want de app laat je in real time de Twitter Card implementatie van je hele website controleren:

Twitter Cards issues in ContentKing

Best practices voor Twitter Cards

Houd rekening met de volgende best practices wanneer je werkt met Twitter Cards:

  1. Zorg ervoor dat je alle vereiste Twitter Card eigenschappen definieert—en idealiter ook de aanbevolen eigenschappen.
  2. Houd jouw twitter:title onder 55 karakters.
  3. Houd jouw your twitter:description onder 125 chars.
  4. Gebruik voor twitter:image, afbeeldingen met een hoge kwaliteit met tenminste 144 x 144 pixels voor de Summary Card en tenminste 300 x 157 pixels voor Summary Card with Large Image, en maximale afmetingen van 4096 x 4096 pixels. De maximale bestandsgrootte is 5 MB en ondersteunde bestandsformaten zijn: JPG, PNG, WEBP, en GIF.
  5. Wanneer je Twitter Card markup voor een pagina voorbereid, gebruik dan altijd de Twitter’s Card validator om je snippet te previewen en om te controleren of alle gegevens ingevuld zijn. Pas het aan totdat alles naar wens is. Een bijkomend voordeel is dat de snippet ook geprecached wordt, zodat jouw snippet meteen goed verschijnt als het voor de eerste keer gedeeld wordt.
  6. Zorg ervoor dat je niet de Twitterbot blokkeert in jouw robots.txt file, aangezien zij jouw pagina’s moeten kunnen bezoeken om de Twitter Card mark-up op te kunnen halen om het te kunnen laten zien. Dit is inclusief de twitter:image waar je naar verwijst, wees dus voorzichtig met disallows.
  7. Als je een fout gemaakt hebt, ze gecorrigeerd hebt en je wilt dat Twitter een nieuwe snippet genereert: ga dan naar de Card Validator en haal de Twitter Card gegevens opnieuw op. Dit ververst de cache. Het ververst echter niet automatisch de afbeelding—daarvoor moet je een nieuwe URL voor de twitter:image definiëren en de Twitter Card gegevens opnieuw door de Card Validator laten controleren. Wij raden je aan een query string aan de twitter:image toe te voegen zodat je makkelijk de afbeelding in de snippet kunt verversen door de waarde van de query string te veranderen.

Veelgestelde vragen over Twitter Cards

  1. Welke afbeeldingsgrootte moet ik kiezen voor mijn Twitter Cards?
  2. Mijn Twitter Card afbeeldingen worden niet getoond. Wat is er verkeerd?
  3. De validator geeft aan dat er geen meta tags zijn. Wat is er verkeerd?

1. Welke afbeeldingsgrootte moet ik kiezen voor mijn Twitter Card?

Vanaf 2018, de beste afbeeldingsgrootte van jouw Twitter Cards is:

  • Summary Card: 1024 x 1024 (aangezien een beeldverhouding van 1:1 nodig is)
  • Summary Card with Large Image: 1024 x 512 (aangezien een beeldverhouding van 2:1 nodig is)

Dit zorgt ervoor dat jouw Twitter Card afbeeldingen niet wazig zijn.

Zorg verder voor het volgende:

  • maximale bestandsgrootte: 5 MB
  • Ondersteunde formaten: JPG, PNG, WEBP, en GIF (voor een animated GIF wordt alleen het eerste frame gebruikt). NB SVG wordt niet ondersteund.

2. De afbeelding van mijn Twitter Card image wordt niet getoond. Wat is er verkeerd?

Als de afbeelding van jouw Twitter Card niet wordt getoond, dan kunnen er een aantal dingen verkeerd gaan:

  1. Je hebt niet een correcte URL voor de afbeelding gedefinieerd (inclusief het protocol, HTTP of HTTPS).
  2. De afbeelding van jouw Twitter Card heeft niet de juiste afmetingen, en/of is groter dan de maximale bestandsgrootte van 5 MB.
  3. De afbeelding van jouw Twitter Card is niet een ondersteund formaat. Bijvoorbeeld BMP en SVG worden niet ondersteund.
  4. Je hebt de toegang tot jouw pagina’s geblokkeerd voor de Twitterbot. Controleer jouw robots.txt bestand of deTwitterbot toegang heeft tot jouw pagina’s. Houd er rekening mee dat een block of een disallow ook betrekking heeft op de Twitterbot als je er een instelt voor: User-agent: *.

3. De validator geeft aan dat er geen meta tags zijn. Wat is verkeerd?

Dit kan om een aantal redenen gebeuren:

  1. Jouw pagina geeft niet een HTTP status 200 terug. Zorg ervoor dat het dit doet.
  2. Jouw pagina geeft niet Content-type:text/html in de header terug. Zorg ervoor dat het dit doet.
  3. Twitter Card mark-up is toegevoegd na het laden door middel van Javascript. De Twitterbot voert Javascript niet uit. De meta tags moeten statisch zijn. Implementeer de Twitter Card mark-up in de <head> sectie als statische meta tags.
ContentKing Academy Content Team
Steven van Vessum
Steven van Vessum

Steven is onze Chief Customer Officer. Hij zorgt ervoor dat onze klanten tevreden zijn én blijven. Daarnaast is hij gek op alles wat met SEO en content marketing te maken heeft!

Vojtěch Zach
Vojtěch Zach

Vojtěch is ContentKing’s Customer Support & Localization Manager. He is the one who will answer your questions when you reach out to us. He is a studied translator, so apart from making our users happy, he also loves to take on our localization challenges.

Lorena Torsani
Lorena Torsani

Lorena is ContentKing’s Marketing Specialist. She’s a creative thinker, who is highly enthusiastic about engaging with customers, running exciting campaigns and bringing forth some fresh ideas.

Probeer 14 dagen gratis

Binnen 20 seconden aan de slag

Gelieve een geldige domeinnaam (www.voorbeeld.nl) op te geven.
  • Geen credit card nodig
  • Geen installatie nodig
  • Geen verplichtingen