Anfängerleitfaden zum Hinzufügen von Twitter-Karten in WordPress

Haben Sie sich jemals gefragt, warum manche Tweets viel mehr Klicks erhalten als andere, selbst wenn der Inhalt ähnlich ist? Das Geheimnis liegt oft darin, wie der Inhalt beim Teilen erscheint. Reine Text-Tweets werden überflogen, aber Tweets mit auffälligen Vorschauen erregen Aufmerksamkeit und treiben Klicks an.

Hier bei WPBeginner verwenden wir Twitter Cards, um zu steuern, wie unsere Tweets aussehen, und um das Engagement zu steigern. Wir verzeichnen einen spürbaren Anstieg unseres Social-Media-Traffics und unserer Engagement-Raten.

Das Beste daran? Das Hinzufügen von Twitter Cards zu Ihrer WordPress-Website erfordert keine Programmierkenntnisse oder technisches Fachwissen. Wir zeigen Ihnen mehrere Methoden, um dies einzurichten, von einfachen Plugin-Lösungen bis hin zur manuellen Implementierung, damit Sie wählen können, was am besten zu Ihrem Kenntnisstand passt.

Warum Twitter Cards in WordPress verwenden?

Twitter Cards ermöglichen es Ihnen, einen Titel, eine Zusammenfassung, ein Bild und eine Video- oder Audiodatei zu Ihrem Tweet hinzuzufügen. Auf diese Weise erhalten Sie eher mehr Klicks und Retweets.

Sie können ein Live-Beispiel sehen, indem Sie unsere WPBeginner-Seite auf X besuchen.

Der größte Vorteil von Twitter-Karten ist, dass sie die Anzahl der Personen erhöhen, die Ihren X-Konten über die Inhaltsattribution folgen. Oft twittern Leute Ihre Links, ohne Ihnen die richtige Anerkennung zu geben.

Sagen wir zum Beispiel, @syedbalkhi retweetet einen Beitrag von @wpbeginner ohne Namensnennung, und andere Leute retweeten @syedbalkhi. Dann folgen die Nutzer, die diese Retweets sehen, eher @syedbalkhi als @wpbeginner.

Oft machen Content-Kuratoren dies, um die Tweet-Längen kurz zu halten und Retweets ihrer eigenen Tweets zu gewährleisten.

Mit Twitter Cards wird dieses Problem gelöst, da Sie für jeden Tweet, der Ihren Artikel erwähnt, Gutschriften auf Ihrer WordPress-Website erhalten.

Jetzt, da Sie die Vorteile von Twitter Cards kennen, werfen wir einen Blick darauf, wie Sie sie in WordPress implementieren. Wir werden zwei Methoden behandeln und Ihnen zeigen, wie Sie Ihre Twitter Cards testen und validieren:

1. Twitter-Karten mit dem AIOSEO-Plugin hinzufügen (empfohlen)
2. Twitter-Karten in WordPress hinzufügen (Code-Methode)
3. Testen und validieren Sie Ihre Twitter-Karten
4. Häufig gestellte Fragen
5. Expertenanleitungen zur Verwendung von Twitter mit WordPress

Methode 1: Twitter-Karten mit dem AIOSEO-Plugin hinzufügen (empfohlen)

Der einfachste Weg, Twitter-Karten zu Ihrer Website hinzuzufügen, ist die Verwendung des All in One SEO (AIOSEO)-Plugins für WordPress. Es ist das beste WordPress-SEO-Plugin und wird von über 3 Millionen Websites verwendet.

Zuerst müssen Sie das AIOSEO-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung, wie Sie ein WordPress-Plugin installieren.

Sie können die kostenlose Version von AIOSEO verwenden, da sie eine Funktion zum Einrichten von Twitter Cards auf Ihrer WordPress-Website bietet.

Nachdem das Plugin aktiv ist, gehen Sie zu Ihrem WordPress-Adminbereich und navigieren Sie zu All in One SEO » Soziale Netzwerke. Klicken Sie dann auf den Tab 'X (Twitter)' und stellen Sie sicher, dass die Option 'X-Karte aktivieren' aktiviert ist.

Sobald Sie Twitter Cards aktiviert haben, können Sie deren Aussehen mit verschiedenen Einstellungen ändern.

AIOSEO ermöglicht es Ihnen, den Standard-Kartentyp für Ihre Inhalte auszuwählen. Das Plugin setzt „Zusammenfassung“ als Standard-Kartentyp, der Titel, Zusammenfassung und Vorschaubild für Ihre Inhalte anzeigt.

Sie können es jedoch im Dropdown-Menü in 'Zusammenfassung mit großem Bild' ändern, und Twitter zeigt Ihren Tweet mit einem großen Bild an.

Danach müssen Sie die Standard-Beitragsbildquelle auswählen. Dies ist das Bild, das Sie auf Ihren Twitter-Karten anzeigen möchten.

Es gibt verschiedene Optionen, aus denen Sie über das Dropdown-Menü wählen können. Sie können beispielsweise ein Standardbild hochladen oder auswählen, das in der X (Twitter) Card angezeigt wird, oder das Beitragsbild, das angehängte Bild, das erste Bild im Inhalt und mehr auswählen.

Fügen Sie als Nächstes ein Standard-Beitrags-X-Bild hinzu, das als Backup verwendet wird, falls Ihr Inhalt kein Bild hat.

Wenn beispielsweise die Bildquelle Ihres Beitrags ein Beitragsbild ist, aber dem Beitrag ein Beitragsbild fehlt, verwendet X stattdessen das Standardbild.

Abgesehen davon bietet AIOSEO weitere Optionen, um zusätzliche Daten wie den Beitragsautor und die Lesezeit eines Artikels anzuzeigen.

Es gibt auch eine Option, die Standard-Term-Bildquelle festzulegen, aber Sie benötigen AIOSEO Pro oder eine höhere Lizenz, um diese Funktion nutzen zu können.

Wenn Sie nun nach unten scrollen, sehen Sie die Einstellungen für die Startseite für Twitter. Das Plugin zeigt eine Vorschau, wie Ihre Startseite auf einer Twitter-Karte aussehen wird.

Unter diesem Abschnitt können Sie den Kartentyp ändern und ein Startseitenbild hinzufügen.

Dies ähnelt den Schritten, die wir zuvor gezeigt haben, aber der Unterschied besteht darin, dass diese Einstellungen für Ihre Homepage gelten.

Geben Sie als Nächstes einen Seitentitel und eine Beschreibung für die Startseite ein, die auf der Twitter-Karte angezeigt werden.

Sobald dies geschehen ist, klicken Sie auf die Schaltfläche „Änderungen speichern“.

Abgesehen davon lässt AIOSEO auch die X (Twitter) Karten-Einstellungen für einzelne Beiträge und Seiten ändern.

Bearbeiten Sie dazu einen beliebigen Blogbeitrag oder eine Seite und scrollen Sie dann zu den AIOSEO-Einstellungen im Content-Editor. Klicken Sie nun auf die Registerkarte „Soziales“ und wählen Sie „X (Twitter)“.

Das Plugin zeigt eine Vorschau der X-Karte Ihres Beitrags an und gibt Ihnen die Möglichkeit, Daten aus dem Facebook-Tab zu verwenden. Es ermöglicht Ihnen auch, den X-Titel und die Beschreibung zu bearbeiten.

Sie können einen neuen Titel und eine neue Beschreibung schreiben oder Smart-Tags verwenden. Wenn Sie beispielsweise den Tag „+ Post Title“ über dem Feld „Twitter Title“ verwenden, verwendet AIOSEO automatisch den Titel Ihres Beitrags in der Twitter-Karte.

Scrollen Sie danach nach unten und wählen Sie die Bildquelle für Ihre Twitter-Karte. Verwenden Sie das Dropdown-Menü, um das Bild auszuwählen, das Sie für Ihren Beitrag anzeigen möchten, z. B. ein Beitragsbild, ein angehängtes Bild, das erste Bild im Inhalt usw.

Schließlich können Sie den Twitter-Kartentyp aus dem Dropdown-Menü auswählen. Standardmäßig setzt AIOSEO ihn auf 'Zusammenfassung', aber Sie können ihn in 'Zusammenfassung mit großem Bild' ändern.

Aktualisieren oder veröffentlichen Sie als Nächstes Ihren Blogbeitrag. Sie haben nun erfolgreich Twitter Cards zu Ihrer WordPress-Website hinzugefügt.

Methode 2: Twitter Cards in WordPress hinzufügen (Code-Methode)

Diese Methode erfordert das Hinzufügen von Code zu Ihren Theme- oder Child-Theme-Dateien. Öffnen Sie einfach die Datei header.php oder verwenden Sie das kostenlose WPCode-Plugin, um diesen benutzerdefinierten Code direkt vor dem </head>-Tag einzufügen:

<?php
#twitter cards hack
if(is_single() || is_page()) {
  $twitter_url    = get_permalink();
 $twitter_title  = get_the_title();
 $twitter_desc   = get_the_excerpt();
   $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
    $twitter_thumb  = $twitter_thumbs[0];
      if(!$twitter_thumb) {
      $twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
    }
  $twitter_name   = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@libdemvoice" />
<?
  if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
  }
}
?>

Du kannst den Wert von  ‘twitter:card’ in Zeile 14 auf ‘summary_large_image’ ändern, wenn du eine Zusammenfassungskarte mit einem großen Bild anzeigen möchtest.

Wenn Sie nicht wissen, wie Sie mit PHP arbeiten, oder Probleme mit Methode 2 haben, verwenden Sie bitte Methode 1.

Testen und validieren Sie Ihre Twitter-Karten

Bevor Links von Ihrer WordPress-Website Twitter Cards anzeigen, müssen Sie sie zuerst im Twitter Card Validator überprüfen.

Gehen Sie einfach zur Seite Card Validator auf der Website für Twitter-Entwickler. Geben Sie die URL eines beliebigen Beitrags von Ihrer WordPress-Website ein und klicken Sie auf die Schaltfläche „Vorschau der Karte anzeigen“.

Der Karten-Validator zeigt keine Vorschau des Tweets mehr an, aber er zeigt ein Protokoll darüber an, ob die Twitter-Karte erfolgreich geladen wurde oder nicht.

Häufig gestellte Fragen

Wir haben die Grundlagen für das Hinzufügen von Twitter Cards zu Ihrer WordPress-Website behandelt, aber Sie haben vielleicht trotzdem noch einige Fragen. Nachfolgend finden Sie die häufigsten Fragen, die wir zu Twitter Cards und deren Implementierung erhalten.

1. Funktionieren Twitter-Karten automatisch, sobald ich sie zu meiner WordPress-Website hinzufüge?

Twitter Cards sollten automatisch funktionieren, sobald Sie die Meta-Tags korrekt auf Ihrer Website implementiert haben. Es kann jedoch einige Zeit dauern, bis Twitter Ihre Karten erkennt und anzeigt. Sie können den Prozess beschleunigen, indem Sie das Card Validator-Tool von Twitter verwenden, um Ihre URLs zu testen und Twitter aufzufordern, Ihre Website zu crawlen.

2. Was ist der Unterschied zwischen Summary und Summary with Large Image Twitter Cards?

Der Hauptunterschied liegt in der Bildgröße und im Layout. Summary Cards zeigen ein kleines Vorschaubild auf der linken Seite des Tweets, während Summary with Large Image Cards ein großes, auffälliges Bild über dem Text anzeigen. Large Image Cards erzielen tendenziell mehr Interaktion, nehmen aber mehr Platz in der Timeline ein.

3. Kann ich für verschiedene Seiten meiner Website unterschiedliche Twitter-Kartentypen verwenden?

Ja, Sie können absolut verschiedene Twitter Card-Typen für verschiedene Seiten verwenden. Die meisten SEO-Plugins wie All in One SEO (AIOSEO) ermöglichen es Ihnen, spezifische Twitter Card-Einstellungen für einzelne Beiträge und Seiten festzulegen. Dies gibt Ihnen die Flexibilität, den besten Kartentyp für jedes Inhaltselement zu wählen.

4. Warum werden meine Twitter-Karten nicht angezeigt, wenn ich meine Inhalte teile?

Es gibt mehrere Gründe, warum Twitter Cards möglicherweise nicht angezeigt werden: Die Meta-Tags sind nicht richtig implementiert, Twitter hat Ihre Website noch nicht gecrawlt, es gibt Fehler in Ihrem Karten-Markup oder Ihre Bilder erfüllen nicht die Anforderungen von Twitter. Verwenden Sie den Card Validator von Twitter, um Probleme zu beheben und zu identifizieren.

5. Muss ich meine Twitter Cards bei Twitter genehmigen lassen, bevor ich sie verwende?

Nein, Twitter verlangt keine Genehmigung mehr für Twitter Cards. Solange Ihre Karten ordnungsgemäß implementiert sind und den Twitter-Richtlinien folgen, sollten sie automatisch angezeigt werden, wenn Ihre Inhalte geteilt werden.

6. Welche Bildgrößen eignen sich am besten für Twitter Cards?

Für Summary-Karten verwenden Sie Bilder, die mindestens 144 × 144 Pixel groß sind (quadratisches Format funktioniert gut). Für Summary-Karten mit großem Bild verwenden Sie Bilder, die mindestens 300 × 157 Pixel mit einem Seitenverhältnis von 1,91:1 groß sind. Die maximale Dateigröße für Bilder beträgt 5 MB, und Twitter unterstützt die Formate JPG, PNG, WebP und GIF.

Expertenanleitungen zur Verwendung von Twitter mit WordPress

Wir hoffen, dieser Artikel hat Ihnen geholfen, Twitter-Karten zu WordPress hinzuzufügen. Möglicherweise möchten Sie auch einige andere Anleitungen zum Thema X (Twitter) mit WordPress lesen.

• Wie Sie automatisch twittern, wenn Sie einen neuen Beitrag in WordPress veröffentlichen
• So fügen Sie Twitter-Share- und Retweet-Buttons in WordPress hinzu
• Tatsächliche Tweets in WordPress-Blogbeiträge einbetten
• So beheben Sie defekte Twitter-Kartenbilder in WordPress
• So zeigen Sie den Twitter- und Facebook-Account des Autors auf der Profilseite an
• Die besten Twitter-Plugins für WordPress (im Vergleich)
• So zeigen Sie aktuelle Tweets in WordPress an (Schritt für Schritt)
• So fügen Sie Ihre Social-Media-Feeds zu WordPress hinzu (Schritt für Schritt)

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.