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

WordPress’te Twitter Kartları Ekleme Hakkında Yeni Başlayanlar İçin Rehber

Editoryal Not: WPBeginner üzerindeki ortak bağlantılardan komisyon kazanıyoruz. Komisyonlar, editörlerimizin görüşlerini veya değerlendirmelerini etkilemez. Editoryal Süreç hakkında daha fazla bilgi edinin.

WordPress sitenizi Twitter Kartları ile geliştirmek, sosyal medya varlığınızı ve kullanıcı etkileşimini önemli ölçüde artırabilir. Twitter Kartları, bir kişi içeriğinizi paylaştığında X’te (eski adıyla Twitter) görünen görüntüler ve açıklamalar sağlar.

WPBeginner’da bu özelliği tweetlerimizin görünümünü kontrol etmek ve kullanıcı etkileşimini artırmak için kullanıyoruz. Twitter Kartlarını (veya X Kartlarını) kullanmak, içeriğimiz için kredi almamızı da sağlar.

Bu makalede, tweetlerinizin öne çıkabilmesi için WordPress’e Twitter Kartlarını nasıl ekleyeceğinizi göstereceğiz.

Beginners Guide on How to Add Twitter Cards in WordPress

WordPress’te Neden Twitter Kartları Kullanılmalı?

Twitter Kartları, tweetinize başlık, özet, resim ve video veya ses dosyası eklemenize olanak tanır. Bu şekilde daha fazla tıklanma ve retweet alma olasılığınız artar.

X üzerindeki WPBeginner sayfamıza giderek canlı bir örnek görebilirsiniz.

twitter card example

Twitter Kartlarına sahip olmanın en büyük avantajı, içerik ilişkilendirme yoluyla X hesaplarınızı takip eden kişi sayısını artırmasıdır. Çoğu zaman insanlar bağlantılarınızı size uygun şekilde atıfta bulunmadan tweetliyor.

Örneğin, @syedbalkhi’nin @wpbeginner’ın bir gönderisini atıfta bulunmadan retweetlediğini ve diğer kişilerin de @syedbalkhi’yi retweetlediğini varsayalım. O zaman bu retweetleri görüntüleyen kullanıcıların @syedbalkhi’yi takip etme olasılığı @wpbeginner’ı takip etme olasılığından daha yüksektir.

Genellikle içerik küratörleri bunu tweet uzunluklarını kısa tutmak ve kendi tweetlerinin retweet edilmesini sağlamak için yapar.

Twitter Kartları ile bu sorun çözülür, çünkü makalenizden bahseden her tweet’ten WordPress web sitenize kredi alırsınız.

Artık Twitter Kartlarının faydalarını bildiğinize göre, bunları WordPress’te nasıl uygulayacağınıza bir göz atalım. İki yöntemi ele alacağız ve Twitter Kartlarınızı nasıl test edip doğrulayacağınızı göstereceğiz:

Yöntem 1: Twitter Kartları Eklemek için AIOSEO Eklentisini Kullanma (Önerilen)

Web sitenize Twitter Kartları eklemenin en kolay yolu WordPress için All in One SEO (AIOSEO) eklentisini kullanmaktır. En iyi WordPress SEO ek lentisidir ve 3 milyondan fazla web sitesi tarafından kullanılmaktadır.

Öncelikle AIOSEO eklentisini yüklemeniz ve etkinleştirmeniz gerekecek. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki adım adım eğitimimizi izleyin.

WordPress web sitenizde Twitter Kartları kurma özelliği sunduğu için AIOSEO’nun ücretsiz sürümünü kullanabilirsiniz.

Eklenti etkin olduktan sonra WordPress yönetici alanınıza gidin ve All in One SEO ” Sosyal Ağlar bölümüne gidin. Ardından ‘X (Twitter)’ sekmesine tıklayın ve ‘X Kartını Etkinleştir’ seçeneğinin etkinleştirildiğinden emin olun.

AIOSEO Enable X Card Option

Twitter Kartlarını etkinleştirdikten sonra, farklı ayarları kullanarak görünümlerini değiştirebilirsiniz.

AIOSEO, içeriğiniz için Varsayılan Kart Türünü seçmenize olanak tanır. Eklenti, içeriğiniz için başlığı, özeti ve küçük resmi gösteren varsayılan kart türü olarak ‘Özet’i ayarlayacaktır.

Ancak, açılır menüden ‘Büyük Görselli Özet’ olarak değiştirebilirsiniz ve Twitter tweetinizi büyük bir görselle gösterecektir.

AIOSEO Default X Card Type

Bundan sonra, Varsayılan Gönderi Görsel Kaynağını seçmeniz gerekir. Bu, Twitter Kartlarınızda görüntülemek istediğiniz görseldir.

Açılır menüyü kullanarak seçim yapabileceğiniz farklı seçenekler vardır. Örneğin, X (Twitter) Kartında görünecek varsayılan bir görsel yükleyebilir veya seçebilir ya da öne çıkan görseli, ekli görseli, içerikteki ilk görseli ve daha fazlasını seçebilirsiniz.

select default post image source

Ardından, içeriğinizde görsel olmaması durumunda yedek olarak kullanılacak bir Varsayılan Yazı X Görseli ekleyin.

Örneğin, gönderi görsel kaynağınız öne çıkan bir görselse ancak gönderide öne çıkan bir görsel yoksa X bunun yerine varsayılan görseli kullanır.

upload default post twitter image

Bunun yanı sıra AIOSEO, gönderi yazarı ve bir makaleyi okumak için gereken süre gibi ek verileri göstermek için daha fazla seçenek sunuyor.

Varsayılan Terim Görüntü Kaynağını ayarlama seçeneği de vardır, ancak bu özelliği kullanmak için AIOSEO Pro veya daha yüksek bir lisansa ihtiyacınız olacaktır.

Şimdi, aşağı kaydırırsanız, Twitter için ana sayfa ayarlarını göreceksiniz. Eklenti, ana sayfanızın bir Twitter Kartında nasıl görüneceğinin bir önizlemesini gösterecektir.

home page settings

Bu bölüm altında, Kart Türünü değiştirebilir ve bir Ana Sayfa Görüntüsü ekleyebilirsiniz.

Bu, daha önce gösterdiğimiz adımlara benzer, ancak aradaki fark bu ayarların ana sayfanız için olmasıdır.

home page card type and image

Ardından, Twitter Kartında görünecek bir Ana Sayfa Başlığı ve Açıklaması girin.

Bu işlem tamamlandıktan sonra, ‘Değişiklikleri Kaydet’ düğmesine tıklayın.

home page title and description

Bunun yanı sıra AIOSEO, tek tek gönderiler ve sayfalar için X (Twitter) Kartı ayarlarını değiştirmenize de olanak tanır.

Bunu yapmak için, herhangi bir blog gönderisini veya sayfasını düzenleyin ve ardından içerik düzenleyicide AIOSEO Ayarlarına gidin. Şimdi ‘Sosyal’ sekmesine tıklayın ve ‘X (Twitter)’ı seçin.

AIOSEO X (Twitter) Settings for a Post

Eklenti, yazınızın X Kartının bir önizlemesini gösterecek ve size Facebook sekmesindeki verileri kullanma seçeneği sunacaktır. Ayrıca X başlığını ve açıklamasını düzenlemenize de olanak tanır.

Yeni bir başlık ve açıklama yazabilir veya akıllı etiketler kullanabilirsiniz. Örneğin, Twitter Başlık alanının üzerinde ‘+ Yazı Başlığı’ etiketini kullanırsanız, AIOSEO otomatik olarak Twitter Kartında gönderinizin başlığını kullanacaktır.

twitter card settings for posts and pages

Bundan sonra, aşağı kaydırın ve Twitter Kartınız için Görsel Kaynağını seçin. Öne çıkan görsel, ekli görsel, içerikteki ilk görsel vb. gibi gönderiniz için görüntülemek istediğiniz görseli seçmek için açılır menüyü kullanın.

Son olarak, açılır menüden Twitter Kart Türünü seçebilirsiniz. Varsayılan olarak AIOSEO bunu ‘Özet’ olarak ayarlayacaktır, ancak siz bunu ‘Büyük Görselli Özet’ olarak değiştirebilirsiniz.

image source and card type

Ardından, blog gönderinizi güncelleyin veya yayınlayın. Artık WordPress web sitenize Twitter Kartlarını başarıyla eklediniz.

Yöntem 2: WordPress’te Twitter Kartları Ekleme (Kod Yöntemi)

Bu yöntem, temanıza veya alt tema dosyalarınıza kod eklemeyi gerektirir. Bu özel kodu </head> etiketinden hemen önce eklemek için header.php dosyasını açmanız veya WPCode ücretsiz eklentisini kullanmanız yeterlidir:

<?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; ?>" />
<?
  }
}
?>

Büyük resimli bir özet kartı görüntülemek istiyorsanız 14. Satırdaki ‘twitter:card’ değerini ‘summary_large_image’ olarak değiştirebilirsiniz.

PHP ile nasıl çalışacağınızı bilmiyorsanız veya Yöntem 2 ile sorun yaşıyorsanız, lütfen Yöntem 1’i kullanın.

Twitter Kartlarınızı Test Edin ve Doğrulayın

WordPress sitenizdeki bağlantılar Twitter Kartlarını göstermeye başlamadan önce, ilk olarak Twitter kart doğrulayıcısında kontrol etmeniz gerekir.

Twitter geliştiricilerinin web sitesindeki Kart Doğrulayıcı sayfasına gitmeniz yeterlidir. WordPress sitenizden herhangi bir gönderinin URL’sini girin ve ‘Kartı önizle’ düğmesine tıklayın.

Twitter Card Validator

Kart doğrulayıcı artık tweet’in önizlemesini göstermiyor, ancak Twitter kartının başarıyla yüklenip yüklenmediğine dair bir günlük gösteriyor.

Güncelleme: Önceden, Twitter Kartlarına katılmak için başvuruda bulunmanız gerekiyordu. Ancak Twitter, doğrulayıcı ile test ettiğinizde veya Twitter’da bir URL paylaştığınızda alan adlarını otomatik olarak beyaz listeye alan bir sistem uygulamaya başladı.

WordPress ile Twitter Kullanımı Hakkında Uzman Kılavuzları

Artık WordPress’e Twitter kartlarını nasıl ekleyeceğinizi bildiğinize göre, Twitter’ı WordPress ile kullanmakla ilgili diğer bazı kılavuzları görmek isteyebilirsiniz.

Umarız bu makale WordPress’e Twitter kartları eklemenize yardımcı olmuştur. Ayrıca WordPress ile açılış sayfası oluşturma kılavuzumuzu ve web sitenizi büyütmek için olmazsa olmaz WordPress eklentileri uzman seçimimizi görmek isteyebilirsiniz.

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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

88 yorumBir Cevap Bırakın

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Aramide says

    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.

  3. Dee says

    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

  4. MStokely says

    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.

  5. Pierre says

    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?

    • WPBeginner Support says

      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.

      Yönetici

  6. MIke says

    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

  7. Mark Larson says

    I’m getting this error:

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

    Not sure how to get rid of it.

  8. Ted Bergman says

    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!

  9. Sarah Bridge says

    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?

  10. Daniela says

    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.

  11. Nick Farrell says

    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.

  12. Laurel says

    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:

  13. Prabs says

    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?

  14. Sarah says

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

  15. Jahmya says

    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?

  16. Tyler says

    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!

  17. Michael says

    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.

  18. Azita says

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

  19. Adrian Robertson says

    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)

  20. shamsher says

    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.

    • Adrian Robertson says

      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

  21. Roger Dunkelbarger says

    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?

  22. Amanda says

    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

  23. Graham says

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

  24. Jas says

    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!

    • jas says

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

  25. Edna says

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

  26. Maha says

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

  27. riad says

    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

  28. samiOOTB says

    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?

  29. Megan Kubasch says

    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.

  30. Lauren Riley says

    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?

  31. Ruth says

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

  32. Karan Singh says

    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.

  33. Kevin says

    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.

  34. Gareth says

    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

  35. Jason Acidre says

    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.

  36. Julien Maury says

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

  37. Manuel Garcia says

    When I preview my twitter card, the error says:
    “Internal Error. Most likely an fetcher error.”
    What to do?

  38. Sai Liou says

    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.

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.