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

Przewodnik dla początkujących na temat dodawania kart Twittera w WordPressie

By Editorial Staff | | Reader Disclosure

ChatGPT Perplexity X LinkedIn WhatsApp

W WPBeginner szukamy nowych sposobów na maksymalizację naszego zasięgu i wpływu. Zaczęliśmy używać Twitter Cards, aby dokładnie kontrolować wygląd naszych tweetów i zwiększyć zaangażowanie.

Jak pomagają Twitter Cards? Za każdym razem, gdy ktoś udostępnia odnośnik do twojej treści na X (dawniej Twitter), automatycznie udostępnia obrazek i opis.

Może to znacznie poprawić twoją obecność w mediach społecznościowych i zaangażowanie użytkowników. Ponadto, Twitter Cards zapewniają również, że otrzymasz autorzy za twoje treści.

W tym artykule pokażemy ci, jak łatwo dodać Twitter Cards do twojej witryny WordPress. Przygotuj się, aby Twoje tweety błyszczały i przyciągały więcej uwagi w mediach społecznościowych,

Beginners Guide on How to Add Twitter Cards in WordPress

Dlaczego warto używać Twitter Cards w WordPress?

Twitter Cards umożliwiają dodanie tytułu, podsumowania, obrazka i filmu lub pliku audio do twojego tweeta. W ten sposób zwiększa się prawdopodobieństwo uzyskania większej liczby kliknięć i podawania dalej.

Możesz zobaczyć przykład na żywo, przechodząc do naszej strony WPBeginner na X.

twitter card example

Największą zaletą posiadania Twitter Cards jest to, że zwiększają one liczbę osób śledzących twoje konta X poprzez przypisywanie treści. Często zdarza się, że ludzie tweetują twoje odnośniki bez odpowiedniego uznania.

Na przykład, powiedzmy, że @syedbalkhi retweetuje wpis od @wpBeginner bez przypisania, a inne osoby retweetują @syedbalkhi. Wtedy użytkownicy widzący te retweety są bardziej skłonni śledzić @syedbalkhi niż @wpbeginner.

Często kuratorzy treści robią to, aby zachować krótką długość tweetów i zapewnić podawanie dalej własnych tweetów.

Dzięki Twitter Cards ten problem jest rozwiązany, ponieważ otrzymujesz autorzy do twojej witryny internetowej WordPress z każdego tweeta, który wspomina o twoim artykule.

Teraz, gdy znasz już zalety Twitter Cards, przyjrzyjmy się, jak zaimplementować je w WordPress. Omówimy dwie metody i pokażemy, jak przetestować i zweryfikować twoje Twitter Cards:

  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

Metoda 1: Używanie wtyczki AIOSEO do dodawania kart Twittera (zalecane)

Najprostszym sposobem na dodanie Twitter Cards do twojej witryny internetowej jest użycie wtyczki All in One SEO (AIOSEO) dla WordPress. Jest to najlepsza wtyczka WordPress SEO i jest używana przez ponad 3 miliony witryn internetowych.

Najpierw należy zainstalować i włączyć wtyczkę AIOSEO. Aby uzyskać więcej informacji, postępuj zgodnie z naszym poradnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Możesz skorzystać z darmowej wersji AIOSEO, ponieważ oferuje ona funkcję konfigurowania Twitter Cards na twojej witrynie internetowej WordPress.

Po włączeniu wtyczki przejdź do obszaru administracyjnego WordPress i przejdź do All in One SEO ” Media społecznościowe. Następnie kliknij kartę “X (Twitter)” i upewnij się, że opcja “Włącz kartę X” jest włączona.

AIOSEO Enable X Card Option

Po włączeniu Twitter Cards można zmienić ich wygląd za pomocą różnych ustawień.

AIOSEO pozwala wybrać domyślny rodzaj karty dla twojej treści. Wtyczka ustawi “Podsumowanie” jako domyślny rodzaj karty, który pokazuje tytuł, podsumowanie i miniaturkę obrazka dla twojej treści.

Możesz jednak zmienić go na “Podsumowanie z dużym obrazkiem” z menu rozwijanego, a Twitter pokaże twój tweet z dużym obrazkiem.

AIOSEO Default X Card Type

Następnie należy wybrać opcję Default Post Image Source. Jest to obrazek, który chcesz wyświetlać na swoich kartach na Twitterze.

Istnieją różne opcje do wyboru za pomocą menu rozwijanego. Można na przykład przesłać lub wybrać domyślny obrazek, który pojawi się w karcie X (Twitter) lub wybrać obrazek wyróżniający, załączony obrazek, pierwszy obrazek w treści i inne.

select default post image source

Następnie dodaj obrazek Default Post X, który będzie używany jako kopia zapasowa na wypadek, gdyby twoja treść nie miała obrazka.

Na przykład, jeśli źródłem obrazu twojego wpisu jest wyróżniający się obrazek, ale we wpisie brakuje wyróżniającego się obrazka, to X użyje zamiast niego domyślnego obrazka.

upload default post twitter image

Poza tym AIOSEO oferuje więcej opcji wyświetlania dodatkowych danych, takich jak autor wpisu i czas potrzebny na przeczytanie artykułu.

Istnieje również opcja ustawienia domyślnego źródła obrazków, ale do korzystania z tej funkcji wymagana jest licencja AIOSEO Pro lub wyższa.

Teraz, jeśli przewiniesz w dół, zobaczysz ustawienia strony głównej dla Twittera. Wtyczka wyświetli podgląd tego, jak twoja strona główna będzie wyglądać na karcie Twittera.

home page settings

W tej sekcji można zmienić rodzaj karty i dodać obrazek strony głównej.

Jest to podobne do kroków, które pokazaliśmy wcześniej, ale różnica polega na tym, że te ustawienia dotyczą twojej strony głównej.

home page card type and image

Następnie wpisz Tytuł i Opis strony głównej, które pojawią się na karcie Twittera.

Po zakończeniu kliknij przycisk “Zapisz zmiany”.

home page title and description

Oprócz tego, AIOSEO pozwala również na zmianę ustawień kart X (Twitter) dla poszczególnych wpisów i stron.

Aby to zrobić, edytuj dowolny wpis na blogu lub stronę, a następnie przewiń w dół do Ustawień AIOSEO w edytorze treści. Teraz kliknij kartę “Społecznościowe” i wybierz “X (Twitter)”.

AIOSEO X (Twitter) Settings for a Post

Wtyczka wyświetli podgląd karty X twojego wpisu i da ci możliwość korzystania z danych z karty Facebooka. Pozwala również edytować tytuł i opis X.

Możesz napisać nowy tytuł i opis lub użyć inteligentnych tagów. Na przykład, jeśli użyjesz tagu “+ Post Title” nad polem Twitter Title, AIOSEO automatycznie użyje tytułu Twojego wpisu w karcie Twitter.

twitter card settings for posts and pages

Następnie przewiń w dół i wybierz Źródło obrazka dla twojej karty na Twitterze. Skorzystaj z rozwijanego menu, aby wybrać obrazek, który chcesz wyświetlić dla twojego wpisu, np. wyróżniający się obrazek, załączony obrazek, pierwszy obrazek w treści itd.

Na koniec można wybrać rodzaj karty Twittera z menu rozwijanego. Domyślnie AIOSEO ustawi go na “Podsumowanie”, ale można go zmienić na “Podsumowanie z dużym obrazkiem”.

image source and card type

Następnie zaktualizuj lub opublikuj twój wpis na blogu. Pomyślnie dodałeś Twitter Cards do twojej witryny internetowej WordPress.

Metoda 2: Dodawanie kart Twittera w WordPress (metoda kodu)

Ta metoda wymaga dodania kodu do twojego motywu lub plików potomnych motywu. Wystarczy otworzyć plik header.php lub użyć darmowej wtyczki WPCode, aby dodać ten własny konfigurator tuż przed tagiem </head>: 

<?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

Możesz zmienić wartość “twitter:card” w linii 14 na “summary_large_image”, jeśli chcesz wyświetlić kartę podsumowania z dużym obrazkiem.

Jeśli nie wiesz, jak pracować z PHP lub napotykasz problemy z metodą 2, skorzystaj z metody 1.

Przetestuj i zweryfikuj swoje karty na Twitterze

Zanim odnośniki z twojej witryny WordPress zaczną wyświetlać Twitter Cards, musisz najpierw sprawdzić je w walidatorze kart Twittera.

Wystarczy udać się na stronę Card Validator w witrynie internetowej twórców Twittera. Wpisz adres URL dowolnego wpisu z twojej witryny WordPress i kliknij przycisk “Podgląd karty”.

Twitter Card Validator

Walidator kart nie wyświetla już podglądu tweeta, ale pokazuje logowanie, czy karta Twittera wczytywała się pomyślnie, czy nie.

Aktualizacja: Wcześniej trzeba było ubiegać się o udział w programie Twitter Cards. Twitter wdrożył jednak system, który automatycznie umieszcza domeny na białej liście po przetestowaniu ich za pomocą walidatora lub po prostu udostępnieniu adresu URL na Twitterze.

Przewodniki ekspertów dotyczące korzystania z Twittera z WordPressem

Mamy nadzieję, że ten artykuł pomógł ci dodać karty Twittera do WordPressa. Możesz również zobaczyć inne przewodniki związane z używaniem X (Twitter) z WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

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 komentarzyLeave a Reply

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

    Odpowiedz

  2. 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:

    Odpowiedz

  3. 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?

    Odpowiedz

  4. 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 … ;-)

    Odpowiedz

  5. 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?

    Odpowiedz

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

    Odpowiedz

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

    Odpowiedz

  9. 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="” />

    Odpowiedz

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

    Odpowiedz

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

    Odpowiedz

    • 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

      Odpowiedz

  14. 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?

    Odpowiedz

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

    Odpowiedz

  16. 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 !!

    Odpowiedz

  18. 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!

    Odpowiedz

    • 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="@” />

      Odpowiedz

  19. 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):

    Odpowiedz

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

    Odpowiedz

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

    Odpowiedz

  23. 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?

    Odpowiedz

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

    Odpowiedz

  26. 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?

    Odpowiedz

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

    Odpowiedz

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

    Odpowiedz

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

    Odpowiedz

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

    Odpowiedz

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

    Odpowiedz

  36. 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. :)

    Odpowiedz

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

    Odpowiedz

  39. Good article. I activated the summary card…

    Anyway: how do you change the anchor text name of the website in the attribution below?
    For instance yours is “Wordpress Beginner”, other sites use “example.com”. In my case it uses my name. How do you manage it? I’d like to show a piede of my URL like “example.com”

    Odpowiedz

  40. Just wanted to let you know that this post saved me HEAPS of time trying to get this to work. Clear, clean and to the point walkthrough. It’s very much appreciated.

    A followup question. I added all the steps to my blog, TheSocialChic.com, but I’m curious as to how much time it usually takes for them to turnaround an approval process. Will I get an email or anything when I (or if) I am approved for Twitter cards? No worries if you don’t know, but I greatly appreciate any guidance on this topic.

    Thanks again for such a helpful post. Keep up the good work and I will be definitely staying tuned to all future posts.

    Odpowiedz

  41. I now have this on my site, and very exciting as the first blog post I tried worked – fantastic!

    But I’ve tried it with a few others and it’s not showing the summary… any ideas?

    Odpowiedz

  44. I got “Summary Card” working for me by following method 2 for my website which is built usng wordpress. I inserted the code to generate meta data in the single-page wordpress template.

    I want to know “how” and “when” to use “Photo Card”

    Odpowiedz

  48. Thanks for the tutorial.. I was wondering what that twitter card on yoast’s plugin was.
    But now I know, I hope I get accepted.

    Odpowiedz

  49. Hello, thanks for article, we’ll try this code to implement Twitter Cards.
    I’ve one more question (I know this question is not related to this article): How to get such effects like in your post, when we hover mouse over twitter handle it shows popup with follow button, please tell us how to implement that? Thanks in advance.

    Odpowiedz

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