Sosyal Medya

Twitter Cards Hakkında Bilmeniz Gereken Her Şey

Twitter’dan bizi takip eden okuyucularımızın farkedeceği üzere, sosyalmedya.co dünya çapında birkaç yüz geliştiriciye sunulmuş Twitter Cards sistemine ilk geçen medyalardan biri oldu ve bu konuda Türkiye’de de öncü. Bunu kutlamak için, kapsamlı bir yazıda size Twitter Cards sisteminin nasıl ortaya çıktığını ve ne ifade ettiğini anlatacağız. Sonrasında kendi sitenizi nasıl Twitter Cards’a uyumlu hale getireceğinizi detaylı biçimde göstereceğiz ve bu yeni kart sistemine geçmek için nasıl bir başvuru süreci izleyebileceğiniz konusunda tavsiyeler vereceğiz. Böylece Twitter Cards’ı @sosyalmedyaco hesabında deneyimlemenin yanıda, kendi sitesinizde de kart içeriği üretmenize yardımcı olmaya çalışacağız.

Twitter Cards’ı uygulamaya başlamadan önce, Twitter’ın bu yeni sisteme geçerken aklında neler olduğunu anlamak çok önemli. Çünkü Twitter Cards, aslında Twitter’ın geleceği.

Twitter’ın Geleceği ve Twitter Cards

Yaz başında logosunu değiştirerek yenilik sinyali veren Twitter, API v1.1’e hazırlanırken gözümüzün önünde yıllardır değişmediği kadar değişiveriyor. Bunlardan günlük kullanıcının ilk gözüne çarpacak olanı, Twitter’ın Haziran ayında üzerine basıldığında genişleyen tweet’ler aracılığıyla 140 karakterden çok öte bilgi sunmaya başlamış olması. Twitter’ın bütün yenilikler arasında en büyük kozu olarak öne sürdüğü Twitter Cards adlı bu hizmet sayesinde, bir tweet içinden linklenen sayfanın özeti, sayfadan bir görsel ve sayfanın içeriğini yazan kişinin Twitter hesabı gibi detaylı bilgilere ulaşılabiliyor.

Uzun süreden beri bildiğimiz ve alıştığımız tweet içinden resim ve video görmeyi (ve çok büyük ihtimalle yakında lokasyonu) kapsayan ve ilerleten bir servis bu. Birçok kişi Twitter Cards’a, Twitter’ın Open Graph’i diyecek kadar önem veriyor. Kısa geçmişinde 3 CEO gören sosyal ağ, özellikle son 2 yılda, topladığı verileri nasıl paraya dönüştüreceğine dair çok tereddüt yaşadı. Reklamların ve markaların hedef verimliliğini ve gelirini artırmak işin bariz yanı. Şirket esasında, Twitter Cards ile aslında bize daha kapsamlı olarak ne yapmak istediğini gayet güzel özetliyor.

Twitter’ın yakın geçmişine baktığımızda, yıllardır LinkedIn ile sürdürdüğü ortaklığı bitirdi ve LinkedIn sitesinde tweet akışı yayınlamayı bıraktı. Sosyal ağ reklamlarındaki en büyük rakibi Facebook’un satın aldığı Instagram’a kullanıcıları ile ilgili bilgi kırgınlık yaratarak vermeyi kesti. Twitter’a içerik girmek için kullanılan üçüncü parti yazılımlara dair bilgileri tweet’lerin içinden kaldırdı. API v1.1 ile Görsel Öneriler’inin Görsel Şartlar’a dönüşeceğini söyledi. Sertifikalı Ürünler programı ile özel izin vererek tepeye taşıyacağı programları çok daha sıkı yönetebilecek bir konuma geldi. Twitter özelliklerini taklit eden ve ağda sunulan hizmetleri değiştirilmiş ve geliştirilmiş şekilde sunmaya çalışan, Twitter’dan kendini tanıtmadan bilgi çeken, sisteme çok fazla istek gönderen uygulamaları giderek daha az destekleyeceğini belirtti.

Bütün bunlara baktığımızda Twitter için öne çıkan trendlerden biri, Facebook’un da yıllar önce reklama önem vermeye başladığında seçtiği içine kapanma trendi. Ötekisi ise içine kapanıp sunduğu hizmeti sunarken, bunu imzası haline gelecek bir görsel bütünlük içerisinde yapması. İşte size Twitter Cards: İçerik üreticilerin, içine kapanan Twitter’a daha kapsamlı, daha tutarlı ve daha güzel bilgi girmelerini sağlayan kapı.

Twitter Cards şu an sadece Twitter ürünlerinde destekleniyor ve bunun değişmesi beklenmiyor (Twitter’ın satın aldığı TweetDeck bile istisna değil). Yani zengin Twitter içeriğine ulaşmanın çok yakında tek yolu, Twitter’ın resmi ürünleri olacak. Şu an Twitter Cards’ı ana Twitter sitesinde deneyimleyebilirsiniz, ama vurgulanan tutarlılık henüz oturmuş değil. Mesela Twitter iPhone’da, ana sitedeki Cards özelliklerini birebir bulurken, zaten tweet’lerin içindeki her türlü linki tweet’in altında mini-tarayıcı gibi açan iPad uygulamasında Cards formatı bulunamıyor. Yine aynı ikiliden gidersek, mobile.twitter.com sitesini bilgisayarınızdan veya iPhone’nunuzdan açtığınızda Twitter Cards formatı aktifken, iPad’den açılan mobil sitede bu özellik bulunmuyor.

Şu an, aralarında sosyalmedya.co’nun da yer aldığı sayılı öncü kurumun Twitter’ın izniyle kullandığı Twitter Cards’ın geleceği çok parlak. Konuyu dikkatli takip edenler farkedecektir ki, halihazırda sunulan Özet, Foto ve Oynatıcı kartları sadece bir başlangıç. CEO Dick Costolo’nun belirttiği üzere Twitter’ın nihai amacı, geliştiricilerin yazılımlarını doğrudan “Twitter’ın içine kurmaları” ve Twitter’ı da haberciliğin Facebook’u olarak özetlenebilecek bir multimedya yayım ve tüketim platformuna çevirmek.

Peki yeni Twitter platformunda nasıl daha zengin içerik sunarsınız? Sitenizi Twitter Cards’a açmak ve Twitter hesabınızı onaylanmış Twitter Cards içerik sağlayıcılarından biri haline getirmek için ne yapmanız gerekiyor?

Sitenize Twitter Cards Entegrasyonu Nasıl Yapılır?

Twitter Cards’a boşuna Twitter’ın Open Graph’i denmiyor. Eğer siteniz halihazırda Open Graph destekliyorsa, kart tipini ve siteyle yazarın Twitter adlarını belirten hepi topu 3 satır meta tag’i  sayfanızda <HEAD> altına eklemeniz yeterli olacaktır. Open Graph ile uyumlu tag listesi için yazının sonuna bakabilirsiniz.

Twitter ilk etapta 3 tip kart destekliyor: zaten alıştığımız Photo (resim), nispeten daha yeni Player (şimdilik sadece video için oynatıcı) ve en yeni özellik olan Summary (diğer sosyal ağlardan alıştığımız link özeti). Bu yazıda en yeni ve kapsamlı kart olan ve hiçbir kart tipi belirtilmediğinde otomatik olarak seçilen Summary’i inceleyeceğiz. Örnek olarak aşağıdaki @sosyalmedyaco tweet’i ile başlayalım:

Farkedeceğiniz üzere, tweet’in açılan özetinde bir çok yenilik var. Bunlar sırayla Başlık, Yazar, Tanım, Resim, Kaynak olarak listelenebilir. Her özelliğin kısıtlamaları ve kullanımına teker teker bakalım.

Öncelikle bu tweet’in genişlemiş görüntüsünü Twitter’a tanıtmak için iki tag kilit rol oynuyor. Ama ikisi de girilmese olur! Kart tipi girilmezse otomatik özet çıkar. URL Twitter’a özel belirtilmemişse Open Graph’den çekilir.

[table id=5 /]

Yukarıdaki tweet için, orijinal içeriğin sayfasındaki HTML kod şöyle düzenlenmelidir:

<meta name=”twitter:card” value=”summary” />
<meta name=”twitter:url” value=”https://sosyalmedya.co/twitter-nikah/” />

Medya platformu olmayı hedefleyen Twitter’ın içeriği hazırlayan kişilere atıfta bulunma özelliğini öne çıkarması kaçınılmazdı. Kullanıcılar artık Cards ile kaynak site ve içerik yazarın adları ayrı ayrı tanımlanabiliyor. Bunun için yazarın ve sitenin Twitter hesapları olması yeterli. İsterseniz değiştirilebilir veya devredilebilir Twitter adı, isterseniz hep aynı kalan tekil Twitter ID’nizi kullanabilirsiniz (Twitter ID bulmak için bu siteyi kullanın). Yukarıdaki örnekteki atıf için gerekli tagler aşağıdaki gibidir:

[table id=6 /]

Yukarıdaki tweet için, orijinal içeriğin sayfasındaki HTML kod şöyle düzenlenmelidir:

<meta name=”twitter:site” value=”@sosyalmedyaco” />
<meta name=”twitter:site:id” value=”232696650″ />
<meta name=”twitter:creator” value=”@irmaksahinoglu” />
<meta name=”twitter:creator:id” value=”179050561″ />

Eğer WordPress kullanıyorsanız, Twitter Cards’ı WordPress blogunuza entegre etmek için gerekli olan kod da aşağıdaki gibi, tabi yazar kaydı yaparken, Twitter alanını başında @ olmadan yazarınızın Twitter hesap ismi ile eklemeyi unutmayın.

<meta name=”twitter:site” value=”@sitenizintwitteradresi” />
<meta name=”twitter:creator” value=”@<?php the_author_meta(‘twitter’); ?>” />

Özetin içerik kısmı, Başlık, Tanım ve Resim’den oluşacaktır. Bu veriler Twitter’a özel girilmezse Open Graph’den de çekilebilir.

[table id=7 /]

Yukarıdaki tweet için, orijinal içeriğin sayfasındaki HTML kod şöyle düzenlenmelidir:

<meta name=”twitter:title” value=”Twitter Üzerinden Kıyılan İlk Nikah” />
<meta name=”twitter:description” value=”Üsküdar’da bir restoranda düzenlenen, Üsküdar Belediye Başkanı Mustafa Kara’nın kıydığı nikah töreni Twitter’dan yapıldı. Detaylar için tıklayınız.” />
<meta name=”twitter:image” value=”https://sosyalmedya.co/wp-content/uploads/2012/09/Twitter1.jpg” />

WordPress için:

<meta name=”twitter:title” value=”<?php the_title() ?>” />
<meta name=”twitter:description” value=”<?php echo $description; ?>” />
<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), false, ” ); ?>
<meta name=”twitter:image” value=”<?php echo $src[0]; ?>” />

İşte artık bu haber sayfası bir Özet Kartı gösterimi için tamamen hazır. Ama unutulmaması gereken bir konu, Twitter’ın Cards desteğini her siteye sunmaması. Bu ayrıcalığı kazanmak için, Twitter’a başvurmanız ve onay almanız gerekiyor. Başvurunun kabul edilmesi için öne sürülen şartlar, sitenizin “harika bir içeriği olması” ve Twitter’da “aktif tartışma” ortamı yaratması lazım.

Başvuru formu için Twitter Developers sayfasına gidebilirsiniz. Bizim tavsiyemiz, ilk etapta sitenize şart olan olmayan bütün “twitter:” meta datalarını girmeniz ve işi Open Graph’e bırakmamanız. Ama yine de, özellikle her firmanın kendi tag’ini eklemesinden hoşlanmayanlardansanız, Open Graph ile paylaşılan Twitter Cards meta datası şöyledir:

[table id=8 /]

Daha fazla zengin içerik üretmek için, her zaman Twitter’ın sürekli güncellenen Twitter Cards sayfasına başvurabilirsiniz. Biranevvel Twitter Cards’a geçip, zengin içerikli paylaşımlar yapmanız dileğiyle!