Sitenizi Twitter Cards ile tweet arkadaşı yapın

Web sayfanızı SEO taranabilirliği için meta ve belki facebook için de düzenlediniz diyelim. Amacınız sayfanızı tarayan google ve benzeri örümcekler/tarayıcıların sayfanız hakkında topladığı özet bilgisi tanımlamak. Çünkü google ve facebook sayfanızda ne çözebildiğini değil, sizin onlar için, sayfanızın ne anlama geldiğini söylemenizi istiyorlar. Bunun için de standart sayfa tanımlaması meta etiketlerine ek olarak facebook opengraph meta etiketlerini kullanarak, facebook örümceklerinin, özel olarak sayfa içeriğiniz hakkında daha detaylı bilgi almasını sağlayabiliyorsunuz. Facebook opengraph içerik (nesne) tanımlamalarını yıllar önce kullanıma sundu ve şu an bir çok popüler web sayfası bu meta etiketleri ekleyerek sayfalarının facebook’da nasıl göründüğünü bir nebze de olsa kontrol edebiliyorlar.

Twitter da birkaç ay önce “Twitter Cards” adında bir grup meta tanımlaması kullanmaya başladığını yayınladı. Bunun asıl amacı, tweet’lerdeki linklerin ne anlama geldiklerini daha iyi çözebilmekti. Eğer twitter card meta etiketleriyle sayfa kimliği belirlenmiş bir sayfa url’i tweet ederseniz, o tweet genişletilebilir (expand) hale geliyor ve web sitesinde ve twitter’ın mobil uygulamalarında görüntülendiğinde tweet metni içindeki url’e ait sayfa detaylarını twitter card meta etiketleri aracılığıyla gösteriyor.

Yani insanlar sayfanızı tweetlediklerinde siz twitter’a sayfanız hakkında daha detaylı bilgi sunabiliyorsunuz ve twitter bunu daha zengin içerik olarak kullanıcılarına sunuyor.

Twitter card adını verdikleri bu link açıklayıcı meta etiketleri, opengraph’e benzer şekilde başlık, açıklama ve açıklayıcı görsel ile bir linki özetleyen bir bilgi sunuyor. Aşağıda twitter card destekleyen bir link paylaşılmış bir tweet’in web’de nasıl göründüğünü görebilirsiniz.

Twitter card detayları tabi ki varsayılan biçimde görüntülenmiyorlar ancak kullanıcı, mobilde tweet’e dokunursa veya web’de expand butonuna basarsa twitter card detayları görüntüleniyor.

Sitenizin tüm sayfalarını twitter card ile desteklemek zorunda değilsiniz. Ancak blog yazısı gibi çoğunlukla metin ağırlıklı bir içerik, video veya fotoğraf gibi bir içeriğiniz var ise bu içeriğin paylaşılma ihtimali daha yüksek olacağından bu sayfalara twitter card metaları eklemek daha anlamlı olacaktır. Zaten twitter içerikleri bu üç kategoride grupluyor ve bunu da twitter card türü olarak tanımlamanızı istiyor.

Twitter Card’ınızı hazırlamak için önce içeriğinizi özetleyecek 3 elementi tanımlamanız gerekiyor.

  • İçerik tam adresi (url)
  • İçerik başlığı
  • İçerik özeti – kısa metin
  • İçerik görseli (görselin tam url’i)

Bu öğeleri hazırladıktan sonra bu sayfalarda aşağıdaki meta etiketi grubunu head etiketi içine eklemeniz, sayfanızın twitter card’a sahip olmasına yetecektir.

Yukarıdaki kod genel bir metin ağırlıklı içeriğe sahip sayfayı özetleyen twitter card kodu. Dökümantasyonda fotoğraf yani tekil görsel ağırlıklı bir sayfa veya video tipi medya sunumu yapan bir sayfanın nasıl bir twitter card’a sahip olması gerektiğini ve bu türlere özel etiketlerin açıklamalarını ve örneklerini görebilirsiniz. https://dev.twitter.com/docs/cards adresinden erişebileceğiniz twitter card dökümantasyonu ayrıca twitter card meta etiketlerinin tüm listesini ve gerekli detaylı açıklamalarını veriyor.

https://cards-dev.twitter.com/validator adresinden de hazırladığınız twitter card’i sayfanızın url’ini girerek önizlemesini görüntüleyebilirsiniz. Bu araç aynı zamanda hataları görmenizi ve sayfanızın twitter card’ında bir sorun olup olmadığınızı anlamanıza yardımcı olacaktır.

Facebook paylaşım detaylarını kişiselleştirme

Biliyorsunuz Dünya’da Facebook kullanımında üçüncüyüz (2010 2. Çeyreğinde). Facebook kullanımı ve Türk milletinin facebook’da geçirdikleri vakit çok ve paylaşmayı seven bir millet olduğumuzdan her şeyi, sayfaları, etkinlikleri vs sürekli paylaşıyoruz. Link veriyor, video paylaşıyor, yorumlar yazıyoruz.

Şu an birçok kampanya şekillendirilirken sosyal medya entegrasyonu, sosyal medya yayılımı/dağıtımı düşünülerek tasarlanıyor. Hatta birçok kampanya sadece sosyal medya ile işler halde kurgulanıyor.

Neyse, bir web geliştiricisi olarak bir çok sayfa üretiyorsunuz, bunların paylaşılırken nasıl göründükleri, arama motoru, paylaşım botlarının sayfanızı otomatik olarak tanıdığını fakat nasıl tanıdığına belki dikkat etmiyorsunuz.

Facebook dışında metalardan görsel, video alan sosyal medya araçları var. Bu servisler aslında basit meta etiketlerindeki title, description, keywords bilgilerini kullanıyor fakat biliyorsunuz ki görsel ile desteklemek her zaman içeriğinizi daha zengin ve doğru gösterecektir. Aşağıda geniş bir örnek ile birkaç ek meta etiketi ile içeriğinizi botlara nasıl anlatacağınızı göstereceğim.

 

Yukarıda gördüğünüz önizleme, sayfanız paylaşıldığı zaman çıkan görsel ve metinlerdir. Facebook paylaşımları 3 parçadan oluşmaktadır. Sayfa görseli, başlığı ve açıklaması.

Görsel belirleme

Facebook sayfasında çıkan görsel eğer siz meta tagler ile belirlemediyseniz, sayfa içinde bulunan imajlardan otomatik olarak seçilir. Ama genellikle anlamsız imajlar ortaya çıkmaktadır. Bunu belirlemek için az sonra bir meta etiketi ile bir imaj göstereceğiz. Her sayfanız için özel bir görsel belirleyebileceğiniz gibi tüm siteyi anlatan tek bir görsel kullanarak da bu imajı belirleyebilirsiniz. Burada dikkat edeceğiniz nokta, kullanacağınız görselin boyutları arasındaki orandır. Facebook zaten sizin görselinizi resize edecektir fakat eğer belirttiğiniz görsel genişliği ile yüksekliği arasında katlarca fark varsa, yani fazla geniş veya fazla uzun görseller ise facebook bu görselleri görmezden gelecek ve resimsiz çıkacaktır. Genel bir görünüm oranı olan 4:3 veya 16:9 gibi resim formatlarını kullanabilirsiniz. Yani eni boyundan biraz daha uzun olan imajlardan bahsediyorum. Ayrıca bu imajın boyutunu kocaman bir wallpaper olarak koymayın. Zaten maksimum 100px genişlikte görüntülenecektir. Yani siz burada 200px genişlik 150px yükseklikte bir imaj hazırlayarak iyi bir oran yakalayabilirsiniz.

İkinci konu da görselinizin içeriği. Bu görselde çok fazla metin de kullanmayın, çok fazla resimsel format da. Yani burada kullanacağınız şeyin basit bir banner olduğunu düşünerek bir slogan ve bir ikon veya bir artalan fotografı üzerine bir logo da olabilir. Aşağıda örnek olarak hazırladığım bir imajı görebilirsiniz.

Eklenmesi gereken Meta etiketler

Aşağıda örnek bir kullanım göreceksiniz :

title ve description’da sayfa başlığı ve sayfa özeti yer alacak, image_src’de de yaptığınız görselin adresi yer alacaktır. Bu meta etiketlere sahip bir sayfayı facebook’da paylaşmak isterseniz yukarıda verdiğim önizlemedeki gibi bir sonuç elde edersiniz.

Sadece imaj değil, sayfa içerisindeki video ve ses dosyalarını da paylaşırken belirterek friendfeed gibi servislerde taranabilmesini sağlayabilirsiniz fakat yukarıdaki kullanım genel olarak tüm sayfalarda kullanılan çözümdür.

Eğer bu konuda bilgi edinmek isterseniz veya bu konuyu daha detaylı incelemek isterseniz Facebook Dökümantasyonundan bilgi alabilirsiniz.

Paylaşım

Sayfanızın paylaşılması için facebook share butonları ekleyebilir (http://www.facebook.com/facebook-widgets/share.php) veya doğrudan kendiniz link ile http://www.facebook.com/sharer.php?u=YOUR_URL şeklinde get methodu ile sayfa adresinizi bu adresin sonuna urlencode eidp eklerseniz facebook botu sayfanızı anlık tarayabilecektir.

Ya da normal şekilde insanlar sayfa adresinizi kopyala yapıştır yaparak facebook mesajlarına, news feedlerine ekleyeceklerdir.

SEO Optimizasyonu

SEO Nedir?

SEO’nun açılımı “Search Engine Optimization” yani Arama Motoru En iyileme’dir. İnternette insanlar veri aramaya ihtiyaç duyduğundan beri (90’ların sonuna doğru) arama motorlarının ihtiyaçları, popülerliği arttı. Özellikle google, yahoo gibi arama motorları daha çok kullanılır oldu. Hatta o kadar kullanılmaya başladı ki artık insanlar internet adresi yazmak yerine google’a yazıp sitelere öyle erişir oldu. Daha da abartılmışı olarak hesap makinesi, “profesör” muamelesi bile gördü bu arama motorları. Örneğin “Bu akşam tv’de ne var?”, “necip hablemitoğlu kimdir?” fln gibi soru işaretli arama sorguları yapanlar da olmadı değil 🙂

Çoğu site için “gelen ziyaretçi kaynağı” eskiden doğrudan trafikken 90’larda bağlantı olmaya başladı ve 2000’den sonra büyük bir yüzde farklı ile arama motorları olmaya başladı. Hatta site yöneticileri sitelerinde “arama motorlarından gelen anahtar sözcükler”e göre içeriklerini değiştirmeye başladı. Buraya kadar biraz tarih işledik, sadede geleyim :

Artık bir site için arama motorlarındaki sırası bile bir değerlendirme kriteri. Daha doğrusu “ziyaretçi sayısını artırmak” veya “doğru arama sonuçlarında çıkmak” için insanlar daha fazla çaba göstermeye başladı. Bu amaca göre değişik teknikler kullanılmaya başlandı. Eskiden html meta etiketleri, sayfa başlığı ve içerikteki sadeliğe gösterilmeyen önem arttı. URL’lerin şekilleri değişti. Bağlantı şekilleri değişmeye başladı 🙂

Bu dökümanda sitenizi optimize ederek arama motorlarında doğru aramalarda çıkmak için yapmanız gereken birkaç anahtar noktayı anlatacağım. Önce sosyal noktalara değinelim, yani işin tekniğinden çok mantalitenizi belirleyen kriterleri gözden geçirelim.

Sade html yazın, css kullanın

Sayfa arayüzlerini oluştururken veya daha güzel arayüzler çizmek için çok fazla etiket, tablo vs kullanırdık. Kullanıyoruz da bazen. Ancak arama motorları her ne kadar etiketleri algılayıp işlem yapsa da en sade olanı en iyi indexleyecektir. Onun için arayüz çizdirirken css kullanın. Okumaya devam et “SEO Optimizasyonu”

HTML Dersleri (1) : Yapı ve sayfa üstbilgi etiketleri

Doctype (Döküman kodlama türü)

Döküman türü, tarayıcıların, kodladığınız sayfanın ne olduğunu anlamasına yardımcı olur. Doctype, web standartlarına göre (w3c) zorunludur. Yani bir sayfanın türü belirtilmek zorundadır. Bu derslerde HTML kodlama üzerine yoğunlaştığımızdan “Geleneksel html türü” bizim işimizi görecektir. İleride doctype hakkında başka bir makalede bahsedeceğim.

html etiketi

Tüm html kodlarının bulunması gereken blok bu bloktur.

head etiketi

HTML açılış etiketinden sonra sayfa bilgi etiketlerinin bulunması gereken bloktur. title, meta, style etiketlerini bu blok içerisinde yazmalıyız.

title etiketi (Başlık)

Tarayıcı penceresinin başlığında görüntülenen sayfa başlığını belirlemenizi sağlar.

meta etiketi

Sayfa bilgi değişkenlerini belirler. Sayfa hakkında birçok bilgiyi bu etiketle ayarlarız. Sayfa oluşturan programın adı, sitenin yazarı, sayfa hakkında anahtar kelimeler, sayfanın kısa tanımı, tarayıcı için özel ayarlar (sayfanın son kullanım tarihi vs) gibi çok fazla özellik ayarlanabilir. Bu ayarlamalardan bazıları;

Sayfanın karakter kodlamasını Türkçe olarak ayarlamamızı sağlar. UTF-8 kullanmanızı öneririm, tüm yazı karakteri ailelerini içerir.

Bulunulan sayfayı yönlendirir. Eğer URL=”…” kısmı girilmezse bulunduğu sayfayı, yüklendikten X saniye sonra yeniden yükler. Eğer girilirse sayfa yüklendikten X saniye sonra belirtilen adrese yönlenir.

Sayfanın içeriğine ait anahtar kelimeleri belirler. Arama motorlarında bu anahtr kelimelere göre sayfa incelenir.

body etiketi (Sayfa kodları)

Bütün sayfa içeriğini bu blok içerisine yazın. Sayfa hakkında bazı görünüm ayarlarını da bu etiketin özniteliklerini ayarlayarak belirleyebiliriz. Bunlar;

bgcolor=”RENK_KODU” : Sayfanın artalan rengini belirler.
background=”RESIM_DOSYASI_ADRESI” : Artalan resmini belirler.
text=”RENK_KODU” : Geçerli metin rengini belirler.
link=”RENK_KODU” : Geçerli link rengini belirler.
(NOT : alink, aktif linkler. vlink, ziyaret edilmiş linkler)
topmargin=”X” : Üstten kaç piksel boşluk bırakılıp sayfa içeriğinin başlayacağını belirler.
(NOT : left, right, bottom ile diğerleri de belirlenebilir.)

Bunların hepsi sayfanın stilleri ile ilgili özelliklerdir. Onun için bu öznitelikleri CSS ile ayarlamaya çalışın/alışın.

base etiketi

Sayfadaki linklerle ilgili geçerli çalışma tabanını belirler.
href=”http://” parametresi eklenerek sayfadaki bütün linklerin o site üzerinde çalıştığını belirleyebilirsiniz.
target=”main” parametresi ile sayfadaki bütün linklerin “main” çerçevesi içerisinde açılmasını sağlayabilirsiniz.

link etiketi

Dış bir dosya ile ilişki yaratır. Genel 2 özellik için kullanılır. Bunlar;

şeklinde kullanıldığında stil.css stil dosyası ile sayfayı ilişkilendirir. Yani stil.css’deki stilleri sayfaya uygular.

Favori (bookmark) listenizde, masaüstü kısayolları gibi dosyalanmış sayfa kısayollarında sayfa hakkında simge belirlemenizi sağlar.

style, script ve noscript etiketleri

Sayfa için javascript kodu çalıştırabilmemizi sağlar. Günümzde javascript desteklemeyen browser programı neredeyse bulunmuyor. Ancak desteklemeyen veya desteği kapalı olan programlar için noscript etiketi kullanarak anlanılmayan kısımları geçmiş olursunuz.

Bu sayfanın kodlarını incelemenizi öneririm. Kaynak kodu açıp sayfa yapısı etiketlerinde verdiğim değerleri gözden geçirin, Stil ve javascript tanımlarıma bakmaya çalışın. Çok daha fazla fikir verecektir.