Twitter Card Tags in WordPress hinzufügen

Wenn jemand deine WordPress-Seite auf X (ehemals Twitter) teilt, sucht die Plattform nach Twitter Card Meta-Tags, um eine ansprechende Vorschau zu generieren. Ohne diese Tags erscheinen geteilte Links als einfache URLs ohne Bild, Titel oder Beschreibung — was das Engagement deutlich verringert. So richtest du sie ein.

Methode 1: Mit Yoast SEO (Empfohlen)

Wenn du bereits Yoast SEO verwendest, sind Twitter Cards integriert:

1. Gehe zu SEO → Social in deinem WordPress-Admin.
2. Klicke auf den Tab Twitter.
3. Aktiviere "Twitter Card Meta-Daten hinzufügen".
4. Wähle den Standard-Card-Typ: Summary oder Summary mit großem Bild.
5. Änderungen speichern.

Yoast generiert automatisch Twitter Card Tags für alle Beiträge und Seiten. Du kannst auch den Twitter-Titel, die Beschreibung und das Bild für jeden einzelnen Beitrag im Post-Editor unter dem Tab "Social" anpassen.

Methode 2: Mit Rank Math

Rank Math bietet ebenfalls integrierte Twitter Card Unterstützung:

1. Gehe zu Rank Math → Titel & Meta → Social Meta.
2. Aktiviere "Twitter Card Typ" und wähle deinen bevorzugten Card-Typ.
3. Änderungen speichern.

Individuelle Anpassungen sind in der Rank Math Meta-Box auf jeder Beitragsseite möglich.

Methode 3: Manuelle Implementierung (ohne Plugin)

Füge Folgendes in die functions.php deines Themes oder ein eigenes Plugin ein:

function add_twitter_cards() {
    if (is_singular()) {
        global $post;
        $title = get_the_title();
        $excerpt = has_excerpt()
            ? wp_strip_all_tags(get_the_excerpt())
            : wp_trim_words(wp_strip_all_tags($post->post_content), 30);
        $image = get_the_post_thumbnail_url($post->ID, 'large');

        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";
        if ($image) {
            echo '<meta name="twitter:image" content="' . esc_url($image) . '" />' . "\n";
        }
    }
}
add_action('wp_head', 'add_twitter_cards');

Twitter Cards testen

Nach dem Hinzufügen der Tags:

1. Verwende InspectWP, um zu überprüfen, ob die Meta-Tags im Seitenquelltext vorhanden sind.
2. Teile einen Link auf X, um die Card-Darstellung zu prüfen.
3. Lösche zwischengespeicherte Vorschauen, indem du einen Query-Parameter anhängst (z. B. ?v=2), um X zu zwingen, die Tags neu abzurufen.

Best Practices

• Verwende Summary mit großem Bild für Blogbeiträge und Artikel — das größere Bild zieht mehr Klicks an.
• Bilder sollten mindestens 1200 × 628 Pixel groß sein für optimale Darstellung.
• Halte Titel unter 70 Zeichen und Beschreibungen unter 200 Zeichen.
• Definiere immer sowohl Open Graph als auch Twitter Card Tags für plattformübergreifende Kompatibilität.