Wanneer u een link deelt op X (voorheen Twitter), probeert het platform een preview te genereren — een zogenaamde Twitter Card. Zonder de juiste meta-tags verschijnt uw link als een gewone URL. Met correct geconfigureerde Twitter Cards haalt X echter een titel, beschrijving en afbeelding op, waardoor uw gedeelde link een visuele teaser wordt waar mensen veel waarschijnlijker op klikken.
Wat wordt er precies weergegeven?
Een Twitter Card is niets dat u uploadt of ontwerpt. Het wordt automatisch door X gegenereerd op basis van meta-tags in de HTML van de gelinkte pagina. Wanneer iemand uw URL in een tweet plakt, bezoekt de crawler van X de pagina, leest de meta-tags en stelt de preview samen. Als de tags ontbreken of verkeerd geconfigureerd zijn, is de preview onvolledig of helemaal afwezig.
De twee belangrijke kaarttypen
X ondersteunt meerdere kaarttypen, maar in de praktijk komt u er slechts twee tegen:
- Summary Card — Een compacte preview met een kleine thumbnail aan de linkerkant en de titel en beschrijving aan de rechterkant. Dit is wat de meeste blogposts, artikelen en documentatiepagina's gebruiken. De thumbnail is vierkant, doorgaans ten minste 144×144 pixels.
- Summary Card with Large Image — De afbeelding neemt de volledige breedte boven de tekst in. Dit werkt goed voor landingspagina's, productpagina's, portfolio-stukken of elke pagina waar de visual de belangrijkste blikvanger is. De afbeelding moet ten minste 300×157 pixels zijn, idealiter 1200×628 voor scherpe weergave op schermen met hoge resolutie.
Er waren vroeger nog meer types (Player Card voor audio/video, App Card voor mobiele apps), maar de meeste sites zullen deze nooit nodig hebben.
De meta-tags die u nodig hebt
Plaats deze in de <head>-sectie van uw pagina:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Uw paginatitel" />
<meta name="twitter:description" content="Een korte beschrijving van uw pagina." />
<meta name="twitter:image" content="https://example.com/image.jpg" />
<meta name="twitter:site" content="@UwHandle" />De tag twitter:card bepaalt de lay-out. De tag twitter:site is optioneel maar voegt uw handle toe als attributie onder de kaart.
De Open Graph-fallback
Hier is iets wat veel site-eigenaren niet beseffen: X valt terug op Open Graph-tags (degene die door Facebook, LinkedIn en WhatsApp worden gebruikt) als Twitter-specifieke tags ontbreken. Dus als u al og:title, og:description en og:image hebt ingesteld, geeft uw link nog steeds een preview weer op X — alleen zonder de expliciete controle die Twitter Card-tags u geven.
In de praktijk betekent dit dat een goed geconfigureerde SEO-plug-in zoals Yoast of Rank Math vaak automatisch voor de basis zorgt. Maar vertrouwen op de fallback heeft nadelen: de afbeeldingsafmetingen zijn mogelijk niet ideaal voor de lay-out van X, en de beschrijving wordt mogelijk anders afgekapt. Voor het schoonste resultaat configureert u beide sets tags.
Veelvoorkomende problemen in de praktijk
Zelfs als tags aanwezig zijn, kan er nog wel iets misgaan:
- Cachingproblemen — X cachet kaartpreviews agressief. Als u een defecte afbeelding repareert of een titel bijwerkt, kan de oude preview dagenlang blijven hangen. U kunt een vernieuwing forceren met de Card Validator-tool van X.
- Afbeelding te klein — Als uw afbeelding onder het minimumformaat is, kan X deze volledig negeren en helemaal geen previewafbeelding tonen.
- Relatieve URL's — De waarde van
twitter:imagemoet een absolute URL zijn. Relatieve paden zoals/images/header.jpgwerken niet. - Robots blokkeren de crawler — Als uw
robots.txtTwitterbot blokkeert, kan X uw meta-tags niet lezen en zal er geen kaart worden gegenereerd.
Hoe WordPress Twitter Cards afhandelt
WordPress zelf geeft standaard geen Twitter Card-meta-tags weer. U hebt een SEO-plug-in (Yoast SEO, Rank Math, The SEO Framework) of een speciale social media-plug-in nodig om ze te genereren. Met de meeste van deze plug-ins kunt u een standaard kaarttype site-breed instellen en de afbeelding en beschrijving per bericht of pagina overschrijven.
Als u WooCommerce gebruikt, controleer uw productpagina's apart — ze hebben soms aanvullende configuratie nodig omdat de productafbeelding en -beschrijving uit de productgegevens moeten worden gehaald, niet uit de generieke paginavelden.
Hoe InspectWP helpt
InspectWP leest de meta-tags op uw WordPress-site en toont u precies welke Twitter Card-tags aanwezig zijn — of ontbreken. Het rapport toont het gedetecteerde kaarttype, de titel, beschrijving, afbeeldings-URL en site-handle, zodat u kunt verifiëren dat de preview er zo uitziet als u wilt voordat u uw content deelt.