Web Sitenize Twitter Kartları Yüklemenin 5 Kolay Yolu

Twitter'da, birisi web sitesine bir bağlantı gönderdiğinde, Twitter'ın küçük resim, başlık, açıklama ve hedef sayfa için bir URL içeren bir kutu oluşturmasını nasıl biliyorsunuz? Gerçekten çok yaygın. Standart bağlantı gönderilerini zaman çizelgelerinde çok daha görünür kılar, bağlantının hedefi hakkında biraz bilgi verir ve daha fazla kullanıcı etkileşimini teşvik eder.

Bu bir Twitter Kartı. Spesifik olarak, bir web sitesine entegre edilebilen çeşitli Twitter kartı türlerinden biri olan web sitesi özet kartıdır. Başka ne türler var?

• Özet kartı, belirtildiği gibi, bir web sitesinin önizlemesidir. Bu, bir kullanıcının bağlantınızı tıkladığında ne göreceğinin iyi bir önizlemesini sağlayan, meta bilgilerden alınan özel bir resim ve metindir.
• Özet kartı (büyük resimli) bir özet kartıyla aynıdır. Açıkçası neden bir fark olduğunu bilmiyorum. Bağlantıların her birine tıklayın ve ön izlemeli tweetleri görüntüleyin ve ne demek istediğimi görün. Sanırım Twitter'ın en son yeniden tasarımından önce farklı görünebilirlerdi, ancak bugün her şey büyük bir resim kartı gibi görünüyor.
• Oyuncu kartı, beyzbol veya diğer spor kartlarıyla karıştırılmamalıdır. Görüntünün bir tür hareketli medya olması dışında, esasen büyük görüntü kartlarıdır. Nasıl görüntülendiklerine bağlı olarak, medyaya genişleyen küçük önizleme ve açıklama kutuları veya yalnızca medyanın kendisi oynatılmaya hazır olabilir. Webm'ler giderek daha popüler olsa da, bunlar genellikle YouTube videoları gibi gömülü videolardır.
• Uygulama kartı, özelleştirilmiş bir uygulama tanıtım penceresi oluşturmak için bir uygulama mağazası sayfasından veri çeken bir kutudur. Kullanıcıların uygulamayı hemen yüklemelerini sağlamak için bir CTA düğmesiyle birlikte tweet'e bağlanan uygulamanın göze çarpan ayrıntılarını gösterir.

Twitter kartları eskiden çok daha karmaşıktı. Eskiden resim galerileri, ürünler ve diğer bazı seçenekler için belirli kart türleri vardı, ancak Twitter o zamandan beri bunları kaldırdı. Biraz nostalji istiyorsanız, burada nasıl göründüklerini görebilirsiniz, fazla takılmayın; onları bugün yapamazsın.

Twitter Kartlarının Temelleri

Her sayfa için ayrı kod belirtmek istiyorsanız, web sitesi başına veya en azından web sayfası başına yalnızca bir tür Twitter kartınız olabilir. Çoğu kişi basit bir büyük resim özet kartı seçer ve kodu site şablonunun başlığına koyar, böylece her sayfada görünür. YouTube gibi bazı siteler oyuncu kartını başlıklarına yerleştirir. Buradaki ana paket, belirli bir sayfada başlık meta verilerinizde yalnızca bir dizi kart bilgisine sahip olabileceğinizdir.

Kartlar, iletebilecekleri verilerde oldukça sağlamdır. Kartın, içeriği kimin oluşturduğunu ve sayfanın sahibini kim olduğunu otomatik olarak bilmesini sağlayabilirsiniz, ikisi de farklı olsalar bile aynı anda. Yüklenecek medyayı belirtebilir, adları ve izleme kodunu ve daha fazlasını belirtebilirsiniz. Aslında, özellikle kartlar için kullanabileceğiniz özellikler hakkında bir fikir edinmek için bu sayfayı okuyabilirsiniz. Daha sağlam veriler için Açık Grafik özniteliklerini de bağlayabilirsiniz.

Bugün burada yapacağım şey , sitenize Twitter kartlarını nasıl ekleyeceğinizi anlatmak. Her bir özelliğin üzerinden geçmeyeceğim – Twitter belgeleri yeterince iyi – size sadece çeşitli CMS'ler için nasıl yapılacağının özetini vereceğim.

Başlamadan Önce; her yükleme yöntemi için doğrulamaya ihtiyacınız vardır. Doğru yaptığınızdan emin olmak için bir kartı etkinleştirdikten sonra URL'yi bu doğrulayıcıya kopyalayın. Bu size kartın gerçekten çalışıp çalışmadığını söyleyecektir.

1: WordPress

WordPress, Twitter kartlarını uygulamak için belki de en kolay platformdur, çünkü neredeyse yerleşik olanlar da dahil olmak üzere bunu yapmanın pek çok farklı yolu vardır.

Twitter kartlarını uygulamanın önerilen yolu , resmi Twitter eklentisini kullanmaktır . Diğer eklentiler gibi yükleyebilir ve oradan Twitter kartlarınızı otomatik olarak oluşturabilirsiniz. Ayrıca paylaşım ve tweet/takip düğmeleri, gömülü tweet işleme ve analitik izleme için kısa kodlar sağlar. Belgeleri buradan okuyabilir ve eklentinin kendisini buradan indirebilirsiniz.

Resmi Twitter eklentisini kullanmak istemiyorsanız veya barındırılan WordPress.com'daysanız Jetpack'i kullanabilirsiniz. Jetpack'te Paylaşım bölümünü bulup yapılandırmak istiyorsunuz. Twitter hesabınızı web sitenize yetkilendirdiğiniz bir Twitter bölümü olacaktır.

Üçüncü bir seçenek de JM Twitter Cards eklentisini kullanmaktır. Julien Maury tarafından hazırlanan bu eklenti, bazı temel ayarlarla Twitter kartı uyumluluğu ekler. Öne çıkan bir resim yerine sayfanızdaki ilk resmi kullanmasını seçebilir, Twitter kartı oluşturma işleminizi önizleyebilirsiniz ve gönderiyi oluşturduğunuzda kartı her gönderi için özelleştirebilirsiniz. Eklentiyi yapılandırmak için kenar çubuğuna gidin ve yönetici kontrol panelinizdeki eklenti paneline tıklayın. Kart türünü seçin ve Twitter hesabınız, sitenizin hesabı, açıklama uzunluğu ve eklemek istediğiniz diğer her şeyle birlikte kalan kutuları doldurun.

Bunların hiçbiri ihtiyaçlarınıza uymuyorsa veya zaten sahipseniz, Yoast tarafından WordPress SEO da Twitter kartlarını yönetir. Yönetici panelinizde SEO'ya gidin ve Sosyal bölümünü tıklayın. Orada Twitter kullanıcı adınızı kutuya ekleyebileceğiniz bir Twitter sekmesi var. Ne yazık ki, son okuduğumda Yoast yalnızca özet kartları destekliyor; diğer kart türlerini istiyorsanız daha gelişmiş eklentilere ihtiyacınız var.

2: Tumblr

Tumblr, birçok insanın sahip olduğu kadar üretken hale geldiğinin farkında olmadığı şaşırtıcı derecede popüler bir blog platformudur. Tumblr ağı, yalnızca .tumblr.com ile işaretlenmiş blogların ötesine geçer; Aslında, bazı büyük isim siteleri Tumblr'ı temel mimari olarak kullanıyor. Üzerinde özel bir alan adınız olduğunda, tıpkı diğer herhangi bir arka uç mimarisi gibidir. Yoksa öyle mi?

Gerçek şu ki, Tumblr'ın mimarisi WordPress gibi geniş kapsamlı veya özelleştirilebilir değil. Blogunuza özel, özelleştirilmiş Twitter kartlarını uygulamak için bazı özel kodlar kullanmanız gerekecek . Kodu ve arkasındaki açıklamayı burada, Dan Leveille tarafından Quora'da verilen cevapta okuyabilirsiniz.

Burada, kartlarınızı manuel olarak özelleştirmek için bu kodun gerekli olduğunu belirtmekte fayda var; sadece özet kartlarına sahip olmak gerekli değildir. Twitter, bağlantı yayınında otomatik kart oluşturma için Tumblr.com'u zaten beyaz listeye aldı, bu nedenle belirli veriler içeren belirli bir kart istemiyorsanız veya özel bir alan adı kullanmıyorsanız, varsayılan olarak uygulananları kullanabilirsiniz. Sadece Tumblr siteniz için özel bir alan adınız varsa veya Twitter'ın doğal olarak almadığı verileri istiyorsanız, onun koduna başvururdum.

3: Blogcu

Bir Blogger bloguna Twitter kartları yüklemek, şablonunuza bağlıdır. Size genel talimatlar vereceğim, ancak site şablonunuz normdan çok farklıysa, size verdiğim ipuçlarına göre bunu kendiniz çözmeniz gerekecek.

Her ihtimale karşı, üzerinde değişiklik yapmadan önce şablonunuzu yedeklemeniz her zaman önerilir. Kontrol panelinize gidin, şablona tıklayın ve daha sonra geri yükleme amacıyla bir kopyasını kaydetmek için yedek düğmesine tıklayın.

Ardından, blog şablonunuzun canlı önizlemesinin altındaki "HTML'yi düzenle" düğmesini tıklayın. Bu kodun içinde “<b:includable id='post' var='post'>” için bir arama yapın. Bu satırı olduğu yerde tutun, ancak aşağıdakini doğrudan altına yapıştırın:


<meta content='summary' name='twitter:card'/>
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>


Açıkçası, yukarıdaki verileri kendiniz düzenlemeniz gerekecek. @yourname'yi Twitter kullanıcı adınızla değiştirin, www.yoursite.com'u site URL'nizle değiştirin ve doğru olduğundan emin olun.

Elbette bu kodu ihtiyaçlarınıza göre özelleştirebilirsiniz. Farklı türde bir kart tercih ederseniz, üst satırı "özet" dışında bir şeyle değiştirin ve kodun geri kalanını ihtiyacınız olan verilere uyarlayın.

Yukarıya yapıştırdığım kod çalışmazsa, aldığım sayfa bu. Doğru şekilde kopyaladığımdan veya yaptığınızdan emin olmak için iki kez kontrol edebilir ve güncellenmiş olup olmadığını ve gönderimin güncellemeyi yansıtmadığını kontrol edebilirsiniz. Demişken, işe yaramazsa bana haber ver. Düzeltmek için elimden geleni yapacağım.

4: Joomla

Joomla'nın, Tumblr veya Blogger gibi kozmetik geliştirmelere sahip sınırlı bir platformdan ziyade uzantılar aracılığıyla özelleştirmeye vurgu yapan bir CMS olması kadar WordPress ile pek çok ortak noktası vardır. Bu nedenle, farklı Joomla uzantılarını kullanarak Twitter kartlarını uygulamanın birkaç farklı yolu vardır.

Tweet Kartları, çoğu kişinin tercih ettiği bir uzantıdır. İndirmesi ve kullanması ücretsizdir ve Joomla tabanlı web sitenize Twitter kartları ekler. Bu kadar; konfigürasyonda süslü bir şey yok, işlevselliği veya uygulaması ile istisnai bir şey yok, sadece teneke ne diyorsa onu yapıyor.

İkinci bir seçenek, profesyonel uzantı Açık Grafik ve Twitter Kart Etiketleridir. Hem Twitter hem de Facebook için etiketler ekleyen daha sağlam bir uzantıdır. Gönderileriniz için istediğiniz belirli resimleri ve verileri seçmek için birçok özelleştirme seçeneğine sahiptir. Open Graph'ın Facebook entegrasyonu harika, ayrıca hem Twitter hem de Google için geldiklerinde ekstra meta veriler ekler. Tek dezavantajı, profesyonel bir uzantı olarak bu size pahalıya mal olacak. Yine de ucuz; lisans için sadece 7 Euro. İsterseniz ekstra destek satın alabilirsiniz ama dürüst olalım; bu sadece meta veridir, koddan korkan insanlar için yüceltilmiş bir kopyala ve yapıştır işidir. Desteğe ihtiyacınız yok.

Sizin için sahip olduğum üçüncü seçenek, makalelerinizi bir Joomla sitesinde oluşturmak ve yayınlamak için bir ön uç yayın düzenleyicisi olan TEXTman'ı kullanmaktır. Twitter kartlarının çalışması için herhangi bir şey yapılandırmanız gerekmez; editörünüz olarak sadece TEXTman'i kullanın ve özelliği otomatik olarak getirir. Buradaki dezavantaj, aynı zamanda profesyonel bir araç olması ve çok daha pahalı olmasıdır. Tam bir metin editörü ve ilgili araçlar olduğu için, birkaç uzantı eklenmiş büyük bir lisanstır. Her şeyi içeren bir abonelik için 99$'a veya sadece TEXTman'in kendisi ve sınırlı bir destek ve güncelleme lisansı için 40$'a mal olacak. Tüm istediğiniz Twitter kartları ise çok pahalı.

Son olarak, elbette, bunları manuel olarak uygulamak için aşağıdaki veya bu gönderide açıklanan yöntemi kullanabilirsiniz.

5: Özel İçerik Yönetim Sistemleri

Yukarıdaki kodda meta verilerin bir örneğini zaten yayınladım. Hangi mimariyi kullanırsanız kullanın, temelde sitenizin başlığına yapıştırdığınız kodun aynısıdır. Sitenizin ihtiyaçlarına göre bir şeyler düzenleyin ve kodu site başlığınıza kopyalayın. Sitenin üst kısmındaki <head> ve </head> etiketleri arasında olduğu sürece özellikle nerede olduğu önemli değildir.

Etiketleri özelleştirmeyi unutmayın. Dikkat etmeniz gereken ana unsurlar kart, site, yaratıcı ve alan etiketleridir. Bunlar, istediğiniz kart türü, sitenizin ve içerik oluşturucunun Twitter tanıtıcısı ve etki alanınızın URL'si ile doldurulmalıdır. Ardından, değişiklikleri uyguladıktan sonra kartı doğrulayın.

Doğrulamadan sonra kartınız hala çalışmıyorsa, Twitter'ın sorun giderme kılavuzunu okumalısınız. Muhtemelen birkaç saniye içinde düzeltebileceğiniz bir yerde basit bir hata vardır.