Anleitung für Anfänger zum Hinzufügen von Twitter-Karten in WordPress

Wenn Sie Ihre WordPress Website mit Twitter Cards erweitern, können Sie Ihre Präsenz in den sozialen Medien und das Engagement der Benutzer erheblich verbessern. Twitter Cards liefern Bilder und Beschreibungen, die auf X (früher Twitter) erscheinen, wenn jemand Ihre Inhalte teilt.

Auf WPBeginner nutzen wir diese Funktion, um das Design unserer Tweets zu steuern und die Interaktion der Benutzer zu fördern. Die Verwendung von Twitter Cards (oder X Cards) stellt auch sicher, dass wir für unsere Inhalte Anerkennung erhalten.

In diesem Artikel zeigen wir Ihnen, wie Sie Twitter Cards in WordPress hinzufügen können, damit Ihre Tweets hervorstechen.

Warum Twitter-Karten in WordPress verwenden?

Mit Twitter Cards können Sie einen Titel, eine Zusammenfassung, ein Bild und eine Video- oder Audiodatei zu Ihrem Tweet hinzufügen. Auf diese Weise ist die Wahrscheinlichkeit größer, dass Sie mehr Klicks und Retweets erhalten.

Ein Live-Beispiel können Sie auf unserer WPBeginner Seite auf X sehen.

Der größte Vorteil von Twitter Cards besteht darin, dass sie die Anzahl der Follower Ihrer X Konten durch Content Attribution erhöhen. Oft werden Ihre Links getwittert, ohne dass Sie angemessen gewürdigt werden.

Angenommen, @syedbalkhi retweetet einen Beitrag von @wpbeginner ohne Namensnennung, und andere Personen retweeten @syedbalkhi. Dann ist es wahrscheinlicher, dass Nutzer, die diese Retweets sehen, @syedbalkhi folgen als @wpbeginner.

Oft tun dies Kuratoren von Inhalten, um die Länge der Tweets kurz zu halten und Retweets ihrer eigenen Tweets sicherzustellen.

Mit Twitter Cards ist dieses Problem gelöst, da Sie für jeden Tweet, in dem Ihr Artikel erwähnt wird, eine Gutschrift für Ihre WordPress-Website erhalten.

Jetzt, da Sie die Vorteile von Twitter Cards kennen, wollen wir uns ansehen, wie man sie in WordPress implementiert. Wir werden zwei Methoden behandeln und Ihnen zeigen, wie Sie Ihre Twitter Cards testen und validieren können:

Methode 1: Verwenden des AIOSEO Plugins zum Hinzufügen von Twitter Cards (empfohlen)

Der einfachste Weg, Twitter Cards 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.

Zunächst müssen Sie das AIOSEO-Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

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

Nachdem das Plugin aktiviert ist, gehen Sie in Ihren WordPress-Administrationsbereich 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 „Enable X Card“ aktiviert ist.

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

Mit AIOSEO können Sie den Standard-Kartentyp für Ihre Inhalte auswählen. Das Plugin legt „Zusammenfassung“ als Standardkartentyp fest, der den Titel, die Zusammenfassung und das Vorschaubild für Ihren Inhalt anzeigt.

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

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

Über das Dropdown-Menü können Sie aus verschiedenen Optionen wählen. Sie können zum Beispiel ein Standard-Bild hochladen oder auswählen, das in der X (Twitter)-Karte erscheint, oder das Hervorgehobene Bild, das Bild im Anhang, das erste Bild im Inhalt und mehr auswählen.

Als Nächstes fügen Sie ein Standard Post X Image hinzu, das als Backup verwendet wird, falls Ihr Beitrag kein Bild hat.

Wenn die Bildquelle Ihres Beitrags beispielsweise ein Hervorgehobenes Bild ist, der Beitrag aber kein Beitragsbild enthält, verwendet X stattdessen das Standardbild.

Darüber hinaus bietet AIOSEO weitere Optionen, um zusätzliche Daten wie den Autor des Beitrags und die Zeit, die für das Lesen eines Artikels benötigt wird, anzuzeigen.

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

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

In diesem Abschnitt können Sie den Kartentyp ändern und ein Bild für die Startseite hinzufügen.

Dies ähnelt den zuvor gezeigten Schritten, mit dem Unterschied, dass diese Einstellungen für Ihre Homepage gelten.

Geben Sie als Nächstes einen Homepage-Titel und eine Beschreibung ein, die auf der Twitter-Karte erscheinen sollen.

Klicken Sie anschließend auf die Schaltfläche „Änderungen speichern“.

Kurzmitteilung, AIOSEO lässt Sie auch die X (Twitter) Card Einstellungen für einzelne Beiträge und Seiten ändern.

Bearbeiten Sie dazu einen beliebigen Blog-Beitrag oder eine Seite und scrollen Sie dann im Content Editor nach unten zu den AIOSEO-Einstellungen. Klicken Sie nun auf den Tab „Social“ und wählen Sie „X (Twitter)“.

Das Plugin zeigt eine Vorschau der X-Karte Ihres Beitrags an und gibt Ihnen die Option, Daten aus dem Tab von Facebook zu verwenden. Außerdem können Sie den X-Titel und die Beschreibung bearbeiten.

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

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

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

Aktualisieren oder veröffentlichen Sie anschließend Ihren Blogbeitrag. Sie haben nun erfolgreich Twitter Cards zu Ihrer WordPress-Website hinzugefügt.

Methode 2: Hinzufügen von Twitter-Karten in WordPress (Code-Methode)

Diese Methode erfordert das Hinzufügen von Code zu Ihrem Theme oder Ihren Child-Theme-Dateien. Öffnen Sie einfach die Datei header.php oder verwenden Sie das kostenlose Plugin WPCode, um diesen benutzerdefinierten Code kurz vor dem </head>-Tag hinzuzufü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; ?>" />
<?
  }
}
?>

Sie können den Wert „twitter:card“ in Zeile 14 in „summary_large_image“ ändern, wenn Sie eine Übersichtskarte mit einem großen Bild anzeigen möchten.

Wenn Sie nicht wissen, wie man mit PHP arbeitet 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 zunächst mit dem Twitter Card Validator überprüfen.

Rufen Sie einfach die Card Validator-Seite auf der Twitter-Entwickler-Website auf. Geben Sie die URL eines beliebigen Beitrags von Ihrer WordPress-Website ein und klicken Sie auf die Schaltfläche „Kartenvorschau“.

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

Expertenanleitungen zur Verwendung von Twitter mit WordPress

Da Sie nun wissen, wie man Twitter-Karten zu WordPress hinzufügt, möchten Sie vielleicht einige andere Anleitungen zur Verwendung von Twitter mit WordPress sehen.

• Wie man automatisch tweetet, wenn man einen neuen Beitrag in WordPress veröffentlicht
• Hinzufügen von Twitter Share und Retweet Button in WordPress
• Wie man aktuelle Tweets in WordPress-Blogbeiträge einbettet
• Wie man kaputte Twitter-Kartenbilder in WordPress repariert
• So zeigen Sie Twitter und Facebook des Autors auf der Profilseite an
• Die besten Twitter-Plugins für WordPress (im Vergleich)
• Wie man die letzten Tweets in WordPress anzeigt (Schritt für Schritt)
• Wie Sie Ihre Social Media Feeds zu WordPress hinzufügen (Schritt für Schritt)

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, Twitter-Karten zu WordPress hinzuzufügen. Vielleicht interessieren Sie sich auch für unseren Leitfaden zur Erstellung einer Landing Page mit WordPress und unsere Expertenauswahl der wichtigsten WordPress-Plugins für das Wachstum Ihrer Website.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.