Wanneer iemand uw WordPress-pagina deelt op X (voorheen Twitter), zoekt het platform naar Twitter Card-metatags om een rijke preview te genereren met een afbeelding, titel en beschrijving. Zonder deze tags verschijnen gedeelde links als simpele tekst-URL's, wat de doorklikratio en algehele engagement aanzienlijk verlaagt. Twitter Cards zijn een van de eenvoudigste manieren om uw content te laten opvallen in sociale feeds, en ze nemen slechts enkele minuten in beslag om in te stellen.
Twitter Card-typen en hun impact begrijpen
Voordat u in de implementatie duikt, helpt het te begrijpen welke typen Twitter Cards er bestaan en wanneer u welke moet gebruiken:
- Summary Card: Toont een kleine vierkante thumbnail naast de titel en beschrijving. Werkt goed voor homepages, categoriepagina's en content waar de afbeelding ondergeschikt is aan de tekst.
- Summary Card with Large Image: Toont een grote, prominent uitgelichte afbeelding boven de titel en beschrijving. Dit is de beste keuze voor blogposts, artikelen, productpagina's en alle content waarbij een visuele preview de engagement vergroot.
- Player Card: Embed een video- of audiospeler rechtstreeks in de tweet. Vereist goedkeuring van X en wordt gebruikt door mediaplatforms als YouTube of SoundCloud.
- App Card: Ontworpen voor de promotie van mobiele apps met een directe downloadlink. Vereist eveneens goedkeuring van X.
Voor de meeste WordPress-sites is de Summary Card with Large Image de beste standaardkeuze. Onderzoeken laten consequent zien dat tweets met grote afbeeldingskaarten 2 tot 3 keer meer engagement opleveren dan tweets met alleen tekst. Het visuele element trekt de aandacht terwijl gebruikers door hun feed scrollen, waardoor ze eerder geneigd zijn te stoppen en te klikken.
Vereiste Twitter Card-metatags uitgelegd
Elke Twitter Card heeft een specifieke set metatags nodig in het <head>-gedeelte van uw pagina. Hier is wat elke tag doet:
twitter:card: Definieert het kaarttype. Stel dit in opsummaryofsummary_large_image.twitter:title: De titel die in de kaart wordt weergegeven. Houd hem onder de 70 tekens om afkapping te voorkomen.twitter:description: Een korte samenvatting van de inhoud. Houd hem onder de 200 tekens. Deze tekst verschijnt onder de titel in de kaartpreview.twitter:image: De URL naar de afbeelding die in de kaart wordt weergegeven. Voor summary_large_image-kaarten gebruikt u afbeeldingen van minimaal 1200 x 628 pixels. Voor summary-kaarten moeten afbeeldingen minimaal 144 x 144 pixels zijn. De maximale bestandsgrootte is 5 MB.twitter:image:alt: Alternatieve tekst voor de afbeelding, belangrijk voor toegankelijkheid. Beschrijf de inhoud van de afbeelding in minder dan 420 tekens.twitter:site: De X-handle van uw website (bijv.@UwSite). Optioneel, maar helpt bij naamsvermelding.twitter:creator: De X-handle van de auteur. Handig voor blogs met meerdere auteurs.
X ondersteunt ook een fallbackmechanisme. Als Twitter Card-tags ontbreken, probeert het platform in plaats daarvan Open Graph-tags te gebruiken (og:title, og:description, og:image). Dit betekent dat als u al Open Graph-tags hebt ingesteld, uw links basispreviews krijgen, ook zonder specifieke Twitter Card-tags. Het toevoegen van expliciete Twitter Card-tags geeft u echter meer controle over hoe uw content specifiek op X verschijnt.
Twitter Cards toevoegen met Yoast SEO
Yoast SEO is de meest populaire SEO-plugin voor WordPress en bevat ingebouwde ondersteuning voor Twitter Cards. Als u Yoast al gebruikt, kost het inschakelen van Twitter Cards slechts enkele klikken:
- Ga naar SEO > Sociaal in uw WordPress-adminpaneel.
- Klik op het tabblad X (Twitter).
- Schakel "Twitter Card-metadata toevoegen" in.
- Selecteer het standaardkaarttype. Kies Summary with large image voor de meeste sites.
- Sla uw wijzigingen op.
Vanaf dit moment genereert Yoast automatisch Twitter Card-tags voor elk bericht en elke pagina op uw site, waarbij de titel, beschrijving en uitgelichte afbeelding uit uw inhoud worden gehaald.
Om de Twitter Card voor een specifiek bericht aan te passen, opent u de berichteditor en scrolt u naar de Yoast-metabox. Klik op het tabblad Sociaal (het deel-icoon) en selecteer vervolgens het tabblad X. Hier kunt u de standaardtitel, -beschrijving en -afbeelding voor die specifieke pagina overschrijven. Dit is handig wanneer u wilt dat de socialemediapreview verschilt van de SEO-titel op de pagina, bijvoorbeeld door een opvallendere kop te gebruiken voor sociaal delen.
Twitter Cards toevoegen met Rank Math
Rank Math is nog een populaire SEO-plugin met uitgebreide socialemedia-integratie:
- Ga naar Rank Math > Titels & Meta > Globale meta.
- Scroll naar de sectie Sociale meta.
- Activeer het Twitter Card-type en kies uw voorkeurkaartformaat.
- Voer optioneel uw standaard X-gebruikersnaam in de Twitter-velden in.
- Sla uw wijzigingen op.
Voor aanpassing per bericht opent u een willekeurig bericht of pagina in de editor. Klik op het Rank Math-icoon in de bovenste werkbalk en navigeer vervolgens naar het tabblad Sociaal. Schakel naar het X-gedeelte om aangepaste titels, beschrijvingen en afbeeldingen voor dat specifieke stuk content in te stellen.
Met Rank Math kunt u ook verschillende sociale afbeeldingen per bericht instellen, wat handig is wanneer uw uitgelichte afbeelding niet de juiste verhouding heeft voor Twitter Cards. U kunt een aparte afbeelding van 1200 x 628 pixels uploaden die specifiek voor sociaal delen is geoptimaliseerd.
Twitter Cards toevoegen met All in One SEO (AIOSEO)
All in One SEO biedt eveneens functionaliteit voor Twitter Cards:
- Navigeer naar All in One SEO > Sociale netwerken.
- Klik op het tabblad X (Twitter).
- Activeer Twitter Card en kies uw standaardkaarttype.
- Voer de X-gebruikersnaam van uw site in.
- Configureer de standaardinstellingen voor berichten en pagina's.
- Sla de wijzigingen op.
AIOSEO biedt ook Twitter Card-instellingen per bericht in de berichteditor onder het paneel AIOSEO Settings, tabblad Social.
Handmatige Twitter Card-implementatie zonder plugin
Als u liever geen SEO-plugin gebruikt, of als u volledige controle over de uitvoer nodig hebt, kunt u Twitter Card-tags handmatig toevoegen via het bestand functions.php van uw thema of een aangepaste sitespecifieke plugin:
function custom_twitter_cards() {
if (is_singular()) {
global $post;
$title = get_the_title();
$url = get_permalink();
// Genereer beschrijving uit excerpt of inhoud
$excerpt = has_excerpt()
? wp_strip_all_tags(get_the_excerpt())
: wp_trim_words(wp_strip_all_tags($post->post_content), 30);
// Haal uitgelichte afbeelding op
$image = get_the_post_thumbnail_url($post->ID, 'large');
// Haal Twitter-handle van auteur op uit user meta
$author_twitter = get_the_author_meta('twitter', $post->post_author);
echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
echo '<meta name="twitter:title" content="' . esc_attr($title) . '" />' . "\n";
echo '<meta name="twitter:description" content="' . esc_attr($excerpt) . '" />' . "\n";
echo '<meta name="twitter:url" content="' . esc_url($url) . '" />' . "\n";
if ($image) {
echo '<meta name="twitter:image" content="' . esc_url($image) . '" />' . "\n";
// Voeg alt-tekst toe vanuit de uitgelichte afbeelding
$thumbnail_id = get_post_thumbnail_id($post->ID);
$alt_text = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true);
if ($alt_text) {
echo '<meta name="twitter:image:alt" content="' . esc_attr($alt_text) . '" />' . "\n";
}
}
// Twitter-handle van site
echo '<meta name="twitter:site" content="@UwSiteHandle" />' . "\n";
// Twitter-handle van auteur (indien ingesteld)
if ($author_twitter) {
echo '<meta name="twitter:creator" content="@' . esc_attr($author_twitter) . '" />' . "\n";
}
} elseif (is_front_page()) {
echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
echo '<meta name="twitter:title" content="' . esc_attr(get_bloginfo('name')) . '" />' . "\n";
echo '<meta name="twitter:description" content="' . esc_attr(get_bloginfo('description')) . '" />' . "\n";
echo '<meta name="twitter:site" content="@UwSiteHandle" />' . "\n";
}
}
add_action('wp_head', 'custom_twitter_cards');Vervang @UwSiteHandle door uw werkelijke X-gebruikersnaam. Om Twitter-handles van auteurs op te slaan, kunt u een aangepast user-meta-veld twitter aan elk gebruikersprofiel toevoegen of een plugin als "Extra User Details" gebruiken om het veld toe te voegen aan het scherm voor profielbewerking.
Best practices en specificaties voor Twitter Card-afbeeldingen
De afbeelding is het belangrijkste element van een Twitter Card. Het correct kiezen maakt een aanzienlijk verschil in engagement:
- Summary Card with Large Image: Gebruik afbeeldingen met een 2:1-verhouding. De aanbevolen grootte is 1200 x 628 pixels. Het minimum is 300 x 157 pixels, maar grotere afbeeldingen zien er merkbaar beter uit, met name op high-DPI-schermen.
- Summary Card: Gebruik vierkante afbeeldingen met een 1:1-verhouding. De aanbevolen grootte is 400 x 400 pixels. Het minimum is 144 x 144 pixels.
- Bestandsformaat: JPG, PNG, WEBP en GIF worden ondersteund. JPG is de veiligste keuze voor foto's. PNG werkt het best voor afbeeldingen met tekst of transparante delen (al wordt transparantie samengevoegd op een witte achtergrond).
- Bestandsgrootte: Houd afbeeldingen onder de 5 MB. Grotere bestanden laden mogelijk niet of worden door de kaartverwerker genegeerd.
- Vermijd tekstrijke afbeeldingen: X snijdt afbeeldingen anders bij op mobiel en desktop. Tekst aan de randen van een afbeelding kan worden afgekapt. Houd belangrijke inhoud gecentreerd.
- Gebruik unieke afbeeldingen per bericht: Hergebruik niet steeds dezelfde afbeelding voor elk bericht. Unieke beelden helpen uw inhoud op te vallen en voorkomen dat uw tweets repetitief lijken.
Hoe Twitter Cards samenwerken met Open Graph-tags
X gebruikt een specifieke fallbackhiërarchie om te bepalen wat in een kaartpreview wordt weergegeven:
- Eerst controleert het op expliciete
twitter:*-metatags. - Als een
twitter:*-tag ontbreekt, valt het terug op de equivalente Open Graph-tag (og:title,og:description,og:image). - Als beide ontbreken, gebruikt het de
<title>-tag van de pagina en probeert het een beschrijving uit de inhoud te halen.
Dit betekent dat u niet per se beide sets tags nodig hebt. Als uw Open Graph-tags al ingesteld zijn (bijvoorbeeld voor delen op Facebook), zullen basis-Twitter Card-previews werken. Er zijn echter situaties waarin u verschillende inhoud wilt op verschillende platforms. U kunt bijvoorbeeld een liggende afbeelding voor X gebruiken, maar een vierkante afbeelding voor Facebook. In dat scenario geeft het instellen van zowel og:image als twitter:image op verschillende URL's u platformspecifieke controle.
De twitter:card-tag heeft geen Open Graph-equivalent, dus u moet deze altijd expliciet opnemen om het kaarttype te definiëren. Zonder deze tag rendert X helemaal geen kaart, ook niet als alle andere tags aanwezig zijn.
Uw Twitter Cards testen en debuggen
Verifieer na het toevoegen van de tags dat alles correct werkt:
- Controleer metatags met InspectWP: Voer uw URL door InspectWP om te verifiëren dat alle Twitter Card-metatags aanwezig zijn in de paginabron. InspectWP somt elke metatag op die het vindt, zodat u kunt bevestigen dat de juiste waarden worden uitgevoerd.
- Test direct op X: Plaats een link in een tweet (u kunt deze direct daarna verwijderen). De kaartpreview in de tweet-composer toont u precies hoe uw link zal verschijnen. Verschijnt de kaart niet, wacht dan een minuut en probeer het opnieuw. X kan even nodig hebben om kaartgegevens voor nieuwe URL's op te halen en te cachen.
- Forceer cachevernieuwing: X cachet kaartgegevens agressief. Als u uw tags hebt bijgewerkt maar nog oude gegevens ziet, voeg dan een queryparameter zoals
?v=2aan uw URL toe. Hierdoor behandelt X deze als een nieuwe URL en haalt de kaartinformatie opnieuw op. - Controleer op HTTPS-problemen: Alle afbeeldings-URL's in Twitter Card-tags moeten HTTPS gebruiken. HTTP-afbeeldings-URL's worden geblokkeerd, en de kaart wordt zonder afbeelding gerenderd.
- Valideer afbeeldingsafmetingen: Als uw kaart een kleine thumbnail toont in plaats van de grote afbeeldingspreview, is uw afbeelding waarschijnlijk kleiner dan de minimale afmetingen. Controleer de verhouding en pixelgrootte.
Veelvoorkomende Twitter Card-problemen en oplossingen
- Kaart wordt helemaal niet getoond: Zorg ervoor dat de
twitter:card-metatag aanwezig is. Deze tag is verplicht. Zonder deze tag negeert X alle andere twitter-metatags. Controleer ook of uw pagina publiek toegankelijk is en niet wordt geblokkeerd door een loginmuur, wachtwoordbeveiliging of robots.txt. - Verkeerde afbeelding weergegeven: X cachet kaartgegevens, dus recent gewijzigde afbeeldingen worden mogelijk niet direct bijgewerkt. Gebruik een cachebustingqueryparameter op de URL om vernieuwing te forceren. Verifieer ook dat de
twitter:image-tag verwijst naar de juiste, publiek toegankelijke URL. - Afbeelding te klein of slecht bijgesneden: Gebruik afbeeldingen die voldoen aan de minimale grootte-eisen. Voor summary_large_image-kaarten houdt u 1200 x 628 pixels of groter aan. Vermijd het plaatsen van belangrijke inhoud nabij de randen.
- Dubbele metatags: Als u een SEO-plugin gebruikt en daarnaast handmatige code Twitter Card-tags toevoegt, krijgt u dubbele tags. X gebruikt doorgaans de eerste die het tegenkomt, maar duplicaten kunnen onvoorspelbaar gedrag veroorzaken. Verwijder de handmatige code als een plugin dit afhandelt, of andersom.
- Interferentie van cachingplugin: Als u een paginacachingplugin gebruikt, leeg dan de cache na het bijwerken van uw Twitter Card-configuratie. Anders kan de gecachte versie van uw pagina's nog steeds de oude (of ontbrekende) metatags bevatten.
Best practices voor Twitter Card-optimalisatie in WordPress
- Standaard summary_large_image: Het grote afbeeldingsformaat presteert in engagementmetrics consistent beter dan het kleine thumbnailformaat. Gebruik het voor alle blogposts en artikelen.
- Schrijf aansprekende beschrijvingen: De twitter:description-tekst is uw pitch. Schrijf hem als een mini-kop die mensen aanzet om te klikken. Houd hem onder de 200 tekens en zet de belangrijkste informatie vooraan.
- Stel zowel OG- als Twitter-tags in: Hoewel X terugvalt op OG-tags, zorgt het hebben van beide sets voor consistente previews op alle sociale platforms, waaronder Facebook, LinkedIn, Slack en messaging-apps.
- Test na thema- of plugin-updates: Thema- of plugin-updates kunnen soms de uitvoer van metatags breken. Voer na grote updates een snelle InspectWP-scan uit om te verifiëren dat uw Twitter Cards nog correct werken.
- Gebruik een standaard fallback-afbeelding: Configureer een sitebrede standaardafbeelding in de instellingen van uw SEO-plugin. Dit zorgt ervoor dat zelfs pagina's zonder uitgelichte afbeelding nog een gemerkte visual in de Twitter Card tonen, zoals uw logo of een algemene gemerkte afbeelding.