WPBeginner - WordPress Tutorials for Beginners

Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

By Editorial Staff | | Reader Disclosure

ChatGPT Perplexity X LinkedIn WhatsApp

Hier bei WPBeginner haben wir nach neuen Wegen gesucht, um unsere Reichweite und Wirkung zu maximieren. Wir haben begonnen, Twitter Cards zu verwenden, um genau zu kontrollieren, wie unsere Tweets aussehen und um das Engagement zu steigern.

Wie helfen Twitter Cards? Immer wenn jemand einen Link zu Ihrem Inhalt auf X (früher Twitter) teilt, stellt er automatisch ein Bild und eine Beschreibung bereit.

Dies kann Ihre Präsenz in den sozialen Medien und die Beteiligung der Benutzer erheblich verbessern. Außerdem sorgen Twitter Cards dafür, dass Sie für Ihre Inhalte Anerkennung erhalten.

In diesem Artikel zeigen wir Ihnen, wie Sie Ihrer WordPress Website ganz einfach Twitter Cards hinzufügen können. Machen Sie sich bereit, Ihre Tweets zum Strahlen zu bringen und mehr Aufmerksamkeit in den sozialen Medien zu erhalten,

Beginners Guide on How to Add Twitter Cards in WordPress

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.

twitter card example

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:

  1. Using AIOSEO Plugin to Add Twitter Cards (Recommended)
  2. Adding Twitter Cards in WordPress (Code Method)
  3. Test and Validate Your Twitter Cards
  4. Expert Guides on Using Twitter With WordPress

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.

AIOSEO Enable X Card Option

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.

AIOSEO Default X Card Type

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.

select default post image source

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.

upload default post twitter image

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.

home page settings

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.

home page card type and image

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”.

home page title and description

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)”.

AIOSEO X (Twitter) Settings for a Post

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.

twitter card settings for posts and pages

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.

image source and card type

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; ?>" />
<?
  }
}
?>
Hosted with ❤️ by WPCode
1-click Use in WordPress

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”.

Twitter Card Validator

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

Update: Früher musste man sich für die Teilnahme an den Twitter Cards bewerben. Twitter hat jedoch ein System eingeführt, das Domains automatisch in die Whitelist aufnimmt, wenn Sie sie mit dem Validator testen oder einfach eine URL auf Twitter teilen.

Expertenanleitungen zur Verwendung von Twitter mit WordPress

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, Twitter-Karten zu WordPress hinzuzufügen. Vielleicht interessieren Sie sich auch für einige andere Anleitungen zur Verwendung von X (Twitter) mit WordPress.

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.

Popular on WPBeginner Right Now!

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Download Now

Reader Interactions

87 KommentareLeave a Reply

  1. You’ve been so awesome in passing great information on WordPress. Your tutorials are so great and are wonderful learning materials. Thanks for always being there for us.

    Antworten

  2. Hi! I have a free wordpress.com blog, and I’m not sure how to add twitter cards to that. I don’t know if I can edit the html of my theme without a plugin (if I can, I don’t know how to find the html code) (super new to WP) is there any way to add twitter cards for free

    Antworten

  3. Thank you! It took awhile for this to work I guess because cache needed to be cleared but this is the ONLY solution I found that worked.

    Antworten

  4. Question about this, when I am posting a link from my site on Twitter, the preview image is only showing the WordPress W logo instead of what I set in Yoast. Is it just a matter of waiting it out or a, I doing something wrong?

    Antworten

    • You may want to ensure you’ve cleared any caching on your site for twitter to get the correct image and after that, you would need to wait for Twitter’s cache to clear.

      Antworten

      Admin

  6. Hey there, very late to this article but am wondering how to amend the php code to produce the large image with summary card.

    I’ve given it a shot but not managed it yet. Ideas and advice appreciated.

    cheers

    Antworten

  7. I’m getting this error:

    “Notice: Use of undefined constant full – assumed ‘full’ in”

    Not sure how to get rid of it.

    Antworten

  8. Thanks for this post. When I need to know how to do something on WordPress I come here first. Your easy to understand instructions are priceless!

    Antworten

  9. I’ve done all the steps using Yoast and validated my url – but there is still no image coming up when I post my URL on Twitter? It said this:

    Sarah Bridge
    The card for your website will look a little something like this!

    and underneath on the right hand side it has the correct words but on the left hand side where an image should be there’s nothing but a grey box with what looks like a grey scroll in it. You can click on it to get to my website but I’d like a image there rather than a grey box. Any thoughts?

    Antworten

  10. Have successfully done this in the past. However, it was always when using summary card with large image (which is set as the default in my Yoast settings). Now trying to post summary card (regular, not large image), but Yoast is overriding it to summary card large image. How do I prevent this?

    As a note, I’m doing both methods: adding info to Yoast plug in and writing metadata tags in a plug in.

    Antworten

  13. You can also just throw your meta tags right into the body of your post. Not the ideal way, since this creates empty white space where your tags are, but it’s a good workaround for those having trouble.

    Antworten

  14. If the php code above seems to break your site, it could be that your server doesn’t use php short tags (using “<?" as an opening tag instead of "<?php"). Try this version instead:

    Antworten

  15. Hi thanks for the informative post. However I did all this and when testing my site through the card validator, was told it was unable to generate image because my site isn’t whitelisted! Any idea what I can do?

    Antworten

  16. Hi,

    I realise this is an old post,

    IF you HARDCODE into your header.php; make sure you change the values line 10 and 19 as these point to the contributors account so be sure to change them to yours.

    just sayin … ;-)

    Antworten

  17. Hi,
    I have done all the steps when I try to validate with twitter it tells me my text description meta tag is missing. I don’t know anything about code so I used the first method. Any help?

    Antworten

  19. Finally a helpful tutorial! You would think that Twitter would make it a little simpler to do this. Thank you so much for your help on this!

    Antworten

  20. Is there a way to automatically notify the twitter validator when a post/page is updated?

    I have a site that gets content published automatically from a source without a featured image so once I manually add the image I also have to manually validate the post/page again to get the cards to show on twitter.

    Was hoping there could be some way to automatically ping the twitter validator when a page/post is updated.

    Antworten

  21. I don’t know why the code above cut off.
    Here is the code am using:
    ID), full );
    $twitter_thumb = $twitter_thumbs[0];
    if(!$twitter_thumb) {
    $twitter_thumb = ‘url of imag’;
    }
    $twitter_name = str_replace(‘@’, ”, get_the_author_meta(‘twitter’));
    ?>
    <meta name="twitter:title" content="” />
    <meta name="twitter:description" contente="” />
    <meta name="twitter:image" content="” />

    Antworten

  22. Another awesome post … great stuff!

    For anyone having issues with the image being display (I have Summary selected as my Twitter Card option) just make sure you are using a featured image, as this is where it pulls from.

    Without this specified, what I saw was my site logo (which was way too big for the Summary image)

    Antworten

  25. i have a question that when where to upload it on all pages and post or on home page only.

    bcoz when i share any link of my blog on twitter after adding this in header every time same image appears.

    Antworten

    • Is it your site logo that appears?
      Just check that you have a feature image set against your post, and it should pull from there

      Antworten

  26. Found this article and followed the steps to set up Twitter Cards since we already had Yoast. We want to use the video Player Card but that doesn’t appear to be an option. Do we need to use a different plug in, or is that option available?

    Antworten

  27. I”m using twitter cards through my Yoast SEO, however when I post I have a link and a view summary button that people have to click to see my pictures. I want the pictures to be auto populated without the need for a click. How do I make that happen?

    Here is my twitter account so you can see my tweets for an example

    Antworten

  28. All going well with the inclusion of twitter cards. I would like to make the image that displays on twitter link able or to a link underneath to take it to a third part site any ideas?
    Oh and by the way I would like to thank you guys for realizing that not everyone degree is in computer science and won at MIT !!

    Antworten

  30. Hi,

    Thanks for your tutorial. I have tried with above code. But can you please explain how to make Twitter card working for multiple accounts.

    I have ten different twitter pages where same post will go out as Twitter card.

    So do I need to repeat this below line 10 times with different names:

    …..

    …

    ….
    ….

    Please suggest?

    Thanks!

    Antworten

    • code doesn’t shows in my previous comment I mean to say meta tag with Twitter site name need to get repeated with different names?

      <meta name="twitter:creator" value="@” />

      Antworten

  31. This was super helpful, thanks!

    One quick thing, I noticed the validation link is no longer working. I think this is the Card Validator link now (got it from the twitter blog, seemed to work fine for me):

    Antworten

  32. How to request to twitter for approvel my site ..please help me i tried twitter card ,the preview tool say your card is whitelisted ..

    Antworten

  33. hi i love your site very nice i want to asking you how to change the language of wordpress from franch to english or arabic

    Antworten

  35. I had done this and Twitter cards were working perfectly for months. Suddenly the past few days they’ve stopped working. What can I do?

    Antworten

  36. So I have installed WP SEO by Yoast, and I have followed all of the instructions up to the point where I insert the Card URL on the Preview page for the Card Validator on Twitter. What URL am I supposed to Insert? I have used my URL for my blog, but it comes up with an error, saying No Card Found (Card Error). Any help you can provide would be greatly appreciated.

    Antworten

  38. This is really useful thank you.

    One thing, we have enabled this using the WordPress Yoast SEO Plug-in and set up a Twitter card manually entering all of the information on the card validator for one blog post.

    This worked, however when I tweet a link to my other blog posts it doesn’t pull through the Twitter card. Do you have to set up the Twitter cards for each blog post or should it do it automatically for each blog post?

    Antworten

  40. Oh, and ps
    Do we have to approve each post, or will that be automatic after our first post was approved… Again, thank you

    Antworten

  42. when i install this plugin then it is asking for “You’ve just installed WordPress SEO by Yoast. Please helps us improve it by allowing us to gather anonymous usage stats so we know which configurations, plugins and themes to test with” Allow Tracking or not, what should i do,
    Allow tracking or not.

    Antworten

  44. Hello there. Great guide, thanks!

    I’m currently stuck trying to validate twitter:creator. When I look at the source for one of my posts, I don’t see the twitter:creator meta tag at all. Would you mind, pointing me in the right direction? I’m hard-coding it.

    Antworten

  45. Great post – i was struggling to set up twitter cards using a wordpress plug in without realising that Yoast had it in-built!

    All set up and awaiting approval – thanks guys

    Antworten

  46. Useful post! Been planning to add Twitter cards on my blog for ages now, and just had the time to tweak it earlier, found this guide very helpful, so thanks.

    Antworten

  48. Hi,

    It’s great but because we call the excerpt outside the loop (header), people could get bad surprises for their description.

    So here is a good snippet from uplifted.net that fixes the problem :

    function get_excerpt_by_id($post_id){
    $the_post = get_post($post_id); //Gets post ID
    $the_excerpt = $the_post->post_content; //Gets post_content to be used as a basis for the excerpt
    $excerpt_length = 35; //Sets excerpt length by word count
    $the_excerpt = strip_tags(strip_shortcodes($the_excerpt)); //Strips tags and images
    $words = explode(‘ ‘, $the_excerpt, $excerpt_length + 1);
    if(count($words) > $excerpt_length) :
    array_pop($words);
    array_push($words, ‘…’);
    $the_excerpt = implode(‘ ‘, $words);
    endif;
    $the_excerpt = ” . $the_excerpt . ”;
    return $the_excerpt;
    }

    Then you might replace get_the_excerpt() with this :
    get_excerpt_by_id($post_id)

    Thanks. :)

    Antworten

  50. Thank you for the article! I went with method #1. In the twitter preview, I’m only seeing the summary of the post and not the image. I’ve updated the robot.txt file to allow twitterbot. However, it’s still not showing any image in the preview. Any thoughts on this? Thank you in advance.

    Antworten

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Copyright © 2009 - 2025 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround

The WordPress® trademark is the intellectual property of the WordPress Foundation. Uses of the WordPress®, names in this website are for identification purposes only and do not imply an endorsement by WordPress Foundation. WPBeginner is not endorsed or owned by, or affiliated with, the WordPress Foundation.

I need help with…

Popular searches:

Starting a Blog WordPress SEO WordPress Performance WordPress Errors WordPress Security Building an Online Store