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.



Devamını Oku →
21 Temmuz Cumartesi ´12   —   2 Yorum

OpenGraph nedir?

OpenGraph Facebook'un APIsi için oluşturduğu yeni bir API (Application Programming Interface: Uygulama geliştirme arayüzü) yapısıdır. Proje, genel bir yapıda hazırlandığı için belki standartlaşma ihtimali de var fakat şu an için sadece Facebook kullanıyor.

Neden OpenGraph?

Şu an için zaten sadece Facebook ile kullanabileceğiniz opengraph yapısı, aslında bir uygulama ortamı için özelleştirilebilir esnek bir api yapısı. Yani Facebook'un klasik RESTful API'sinde Facebook'daki bilgiye ulaşabiliyor ve yönetbiliyordunuz. Bunlar hala mevcut ama Facebook'un veri yapısı için tasarlanmış methodlar olduğu için facebook ortamındaki bir facebook uygulaması bu api kanalını kullanamıyordu. Yani Facebook veri yapısına bağımlıydı.

OpenGraph'ın çıkış noktası, internetteki herşeyi içerik olarak özetlemek. Yani adresi belli olan herşey bir içerik olarak kabul ediliyor. Bunu ise linkler ile adresliyor Facebook; mantıklı bir yaklaşım aynı zamanda. Yani her url'in bir içeriği sunduğu düşünülüyor, daha spesifik olarak bu içerikleri istediğiniz kadar parametre ile detaylandırabiliyorsunuz. Bu tanımlamaları yapaken html/xhtml içeriğinizde opengraph ön ekli parametreler kullanarak yapabiliyorsunuz. Facebook'un genel opengraph parametreleri sayfa yani içerik hakkında genel bir bilgi içeriyor.

Bunlardan birkaçı;
og:title         sayfa başlığı
og:description   sayfa tanımı
og:image         sayfayı temsil eden görsel
og:media         sayfa, bir medya sunuyorsa onun doğrudan adresi (video, ses vb)
Bu etiketleri sayfanıza eklediğinizde, biri sayfanızın adresini facebook'da paylaştığı zaman o sayfaya ait içeriği temsil edecek görsel, medya içeriği, içerik tanımı gibi detayları facebook yakalayabiliyor.



Opengraph'ın asıl esnekliğini görebileceğiniz şey, içeriğinizi gerçekten tanımlayacak özel değerleri kendi oluşturacağınız etiketlerle belirleyebilmeniz. Bu yapı aslında sadece facebook için değil genel bir web yaklaşımı için tasarlanmış bir şey. Yani google da opengraph etiketlerini tarayarak sayfanız hakkında özel bir indeks oluşturabilir.

Örnegin bir araba modelinin detay sayfasını tanımlarken, sadece sayfa başlığı, açıklaması veya arabanın görseli o sayfadaki içerik hakkında yeterli bilgi vermeyebilir. Özel olarak arabanın üretim yılı, markası, yolcu kapasitesi, rengi gibi değerleri de belirleyebilirsiniz.

OpenGraph'ın çıkış amacı, Facebook kullanıcılarının aktivitelerini daha detaylı ve özel bir şekilde göstermek istemesi. Facebook ilk "like" butonunu genelleştirdi ve şu anda web'de bir çok sayfada like butonunu kullanıyor herkes. Eğer bir sayfayı beğenirseniz kullanıcı profilinizde "Mehmet, XYZ sayfasını beğendi" şeklinde görünüyor. Ama OpenGraph ile hedeflenen şey, bu kullanıcı aktivitelerini uygulama geliştiricilerine iyi bir yapı ile sunmak. Şu an bir uygulamayı kullandığınızda o uygulama, uygulama içinde yaptığınız aktiviteyi daha detaylı şekilde "Mehmet Ortakoy'de fotoğraf çekti" veya "Mehmet BMW M3 ve 4 diğer araba modeliyle test sürüşü yaptı" gibi çok daha detaylı bir kullanıcı aktivitesi yayınlayabiliyorsunuz.



Bunun için Facebook geliştirici arayüzlerinde önce OpenGraph nesnenizi tanımlamanız gerekiyor. OpenGraph'da her nesne bir web adresi demek ve bu web adreslerini o içeriği sağlayan sayfalar olarak düşünün. Bir diğer parça da "aktivite" tanımı. Yukarıdaki araba örneğinde, "araba" bir nesne, ve sayfamız bir araba detay sayfası, kullanıcı aktivitesi de "test sürüşü yapmak". OpenGraph ile aktivite, nesne tanımı yapıp kullanıcı aktivitesi yayınlamakla ilgili başka bir yazı hazırlayacağım fakat burada açıklayabilmek için daha detaylı bir örnek vermem gerekiyordu.

Neden Facebook uygulamanızı OpenGraph'a geçirmelisiniz?

Şu an halihazırda bir Facebook uygulamanız var olabilir. Uygulamada yapılan aktiviteye ilgili bir içeriği veya aktiviteyi kullanıcının profilinde paylaşıyor olabilirsiniz. Muhtemelen paylaşımda bulunduğunuz içerik genel bir durum güncellemesi gibi görünüyor, genel bir link ile başlık, açıklama ve görsel içeriyor.

Facebook kullanıcı adına paylaştığınız bu içerikleri kısa, uzun, gruplanmış veya topluluğu özetleyecek şekilde şekillendiremez çünkü her girdiyi gruplayacak veya birbiriyle ilişkisini ortaya koyacak bir bağ yok. OpenGraph burada devreye giriyor ve Facebook, nesneler, aktiviteler veya aynı aktiviteyi yapan birden fazla arkadaşınızı tek haber olarak gösterebiliyor.

Yukarıdaki örneği devam ettirsem, benim dışımda 2 arkadaşınız daha "test sürüsü" yapmışsa facebook benim aktivitemi ve değer 2 arkadaşınızın aktivitesini size "Mehmet ve 2 arkadaşınız daha test sürüsü yaptı" olarak gösterebiliyor. Hatta eğer aktiviteniz anlık değil zaman alan bir aktivite ise bunu daha önceden tanımlanmış olan bir OpenGraph özelliği olan eylem uzunluğu ile belirtebiliyorsunuz. Örnegin Facebook, şu an halen devam eden ve aynı nesneyi (yani içeriği) kullanarak aynı eylemde buluan arkadaşlarınızı tek hikayede gösterebiliyor "Mehmet ve Betül şu an Indiana Jones izliyor" (eylem: izlemek, icerik/nesne: Indiana Jones). Gurplama, sadece birden fazla arkadaşınızın aynı eylemı yapması şeklinde olmak zorunda değil. Bir arkadaşınızın aynı türde eylemi farklı nesneler (içerikler) ile yapması da düşünülebilir. Bir önceki ekran görüntüsündeki gruplanmış hikaye, benim Songza uygulamasını kullanarak Johannes Brahms playlistini dinlememi gösteriyor. Fakat songza bu haberi bu şekilde kendisi gruplamıyor. Songza'da her dinlediğim şarkı için Songza OpenGraph ile hangi şarkıyı dinlediğimi facebook'a gönderiyor. Bu içerikler aynı türde içerikler olduğu için bu şekilde tek hikaye olarak görünmeye başlıyor. Bu içerikleri tek seferde dinlemiş olmak zorunda da değilim. Gerekli gruplamayı facebook yapıyor. Biz sadece içeriklerin türleri, birbirleri ile ilişkilerini bildiriyoruz facebook'a. Ekran görüntüsünde görebileceğiniz gibi bu playlist'i tek seferde dinlememe göre değil aynı zamanda bir tarih aralığındaki (ekran görüntüsündeki hikayenin alt kısmında Jul 10 - July 16 şeklinde 6 günlük bir zaman dilimi için) benzer aktivitemi gruplayarak göstreiyor Facebook.

Yukarıdaki faydalar Facebook ortamı için olan faydalar olarak görünebilir fakat, bu hikayelerin göründükleri yerler farkettiğinizden çok daha fazla. Normalde klasik paylaşımda bulunan uygulamanız, kullanıcının profilinde bir içerik paylaştığında o hikaye sadece o kullanıcının profilinde ve o kullanıcının arkadaşlarının ana haber akışında görünüyor. Çoğu zaman ana haber akışı sayfasında (news feed) görünemiyor çünkü yorum yapılan, otomatik olmayan gönderilmiş güncellemeler sizin hikayenizi önem sırasında gerilere itiyor ve çoğu zaman görünmez hale getiriyor.

Eğer OpenGraph'de bir hikaye yayınlarsanız hikayeniz, kullanıcı profilinde gruplanıyor, eğer 5 hikayeden fazla gönderim yapmışsanız bir kutu ile uygulama adınız ve kullanıcı aktivitesi görünümü değiştirilebilir bir şekilde kullanıcı profilinde görüntüleniyor.



Yukarıda, foursquare'de son 1 ayda kazandığım rozetleri gruplanmış bir şekilde görebiliyoruz. Bu gruplamayı yine facebook yapıyor. Facebook'un geliştirici panelinde, uygulama ayarlarında OpenGraph sekmesinde bu kutuları yani gruplanacak içerik/hikaye türlerini, gruplandıkları zaman ne şekilde gösterileceğini detaylı bir şekilde ayarlayabiliyorsunuz.

Bunun dışında facebook'a bildirilen her hikaye ayrı bir şekilde anlık olarak facebook anasayfasında (news feed) sağ tarafta olan "Ticker" alanında anlık olarak görünüyor ve arkadaşınız haber akışını okuyor olmak durumunda da değil. Bunun dışında eğer birden fazla arkadaşınız aynı aktiviteyi yapıyorsa o hikaye daha üst önem sıralarına çıkıyor. Yani içeriğiniz veya aksiyonunuz birden fazla kişinin yapmasıyla daha önemli hale geliyor.


OpenGraph'ın hikayelere tıklanarak içeriklere (yani sayfanıza) ziyareti arttırdığı bir gerçek. Bu konuda TechCrunch'da veya diğer teknoloji bloglarında spotify'ın ve pinterest'in OpenGraph ile ziyaret ve etkileşim oranlarını katladığını okuyabilirsiniz. Bu iki örnek şu an iki OpenGraph başarı hikayesi olarak verilebilir.


Hazırlayan: Mehmet Fatih YILDIZ


Özellikle 2000’den sonra akıllı cihazların (taşınabilir bilgisayarlar, mobil telefonlar, tabletler, medya oynatıcıları hatta televizyonlar) hayatımızdaki yeri ve sayısı çoğalıyor. Artık büyük şehirlerdeki tüm evlerde sayısız akıllı cihaz var. Birçok taşınabilir teknoloji, kablosuz yayın ve iletişimi destekleyecek şekilde donanımlandırılmışlar. Bunlara artık klasik beyaz eşyalar bile girmeye başladı. Bunun dışında zaten ufalan mobil cihazlarımızın sayısı da her geçen gün artıyor. Akıllı cep telefonları, tablet oyuncaklar, medya oynatıcılar.

Şu an her saniye dijital içerik üretiyoruz. Telefonumuzla fotograf çekiyor, veya profesyonel kameramızla büyük boyutlarda ve yüksek çözünürlükte fotograflar çekiyor, HD filmler kaydediyor, film kiralama servisleri ile bir tıkla kiraladığımız dizi veya filmi bilgisayarımıza indirebiliyor, müziğimizi mp3e çevirip taşınabilir müzik çalarımıza atıyoruz. Farkettiyseniz bireysel olarak bile birçok dijital verimiz oluyor. Bunları saklamak için çoğu zaman bilgisayarımızı kullanıyoruz fakat eğer bu veri yığınımız büyük ise genelde harici diskleri tercih ediyoruz. Şimdi gelelim bu kadar çok sayıda sahip olduğumuz akıllı cihaza. Birçok cihaz kendi kendine birçok şeyi yapabiliyor. Mesela iphone’unuz film oynatıyor, fotograf slideshow olarak oynatıyor hatta müziklerimizi de oldukça yüksek kalitede oynatabiliyor. Aynı şeyleri televizyonumuz da yapıyor, hatta internete giren bir televizyomunuz var. Hatta aynı şeyleri başka bir taşınabilir bilgisayarımızda da yapmak istiyoruz. Problem, bu veri yığınını ortak yönetebileceğimiz veya birbiriyle haberleştirebileceğimiz bir şeye sahip olmamamız. Bu konuda birkaç şirket birşeyler yapıyor. Samsung, Sony gibi şirketler DLNA adı altında medya sunucu ve istemcileri tasarlıyorlar, Apple AirPlay ile müziğimizi, videolarinızı diğer bir Apple cihazına yayın yapmamızı sağlıyor.


Ancak en etkileyici örnek, herhalde seneler önce düşünülmüş ama örneklerini evlerimize kadar girebilecek bir şekilde göremediğimiz, Microsoft’un Surface’inde görebilirsiniz. Surface aslında bir masa. Görüntü panelinden oluşmuş bir masa, ve çoklu dokunmatik etkileşimi ile çalışan bir akıllı cihaz. Buradaki örnek, Surface ile başka bir cihazı sadece üstüne koyarak başlattığı bir etkileşimde gödük. Mesela telefonunuzu masanın üstüne koyduğunuzda, masada telefonun altında çıkan bazı seçenekler ile, az önce çektiğiniz bir fotografa ulaşabiliyor veya adres defterinizdeki bir kişiye bir iletiyi kısa mesaj olarak masanızdaki klavyeden iletebiliyordunuz.

Temassız etkileşimi düşünürseniz şu an en iyi uygulamayı Apple, AirPlay ile sağlıyor. iPhone, iPad veya bilgisayarınızdan AppleTV bağli olan bir televizyona HD yayını iletip, filminizi bilgisayarınızdan yönetip televizyonunuzda izleyebiliyorsunuz.

Facebook Paylaşımı

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.

Facebook paylaşımı



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 :
<meta name="title" content="Caretta Caretta'ları koruyalım" />
<meta name="description" content="Yaklaşık 106 milyon yıldır yeryüzünde olduklarını düşünülmektedir. İnsanoğlunun yerleşme ve çoğalma kapasitesi sayesinde bugün sayıları giderek azalmaktadır. Nesli tükenme tehlikesi altında olduğu için koruma altındadır." />
<link rel="image_src" href="shareimg.jpg" />
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 ilehttp://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.


Hazırlayan: Mehmet Fatih YILDIZ

Popüler Etiketler

less css css3 social integration api service network blog javascript ipucu js sosyal medya istatistik media statistics graph web app php open source workspace google chart osx applications free iOS webkit app music apple macosx mysql date diff zaman tarih startups kontrol yapıları if while mail signature imza html license twitter widget assets framework linux wanda digital url rss ui ux login form www subdomain redirect crossdomain oyun compile nedir örnek kod compiler windows on-the-fly mfyz mobile table iphone calendar tool spam ingilizce firefox facebook editor coding xml newsletter subscription ubuntu cache pharma hack wordpress seo doritos kampanya tytz jquery plugin optimization screen xhtml job laptop notebook htaccess apache route router mod_rewrite insanlar lisans icon ikon grafik download radio button switch mootools session developer input textarea select ie browser cms auth portfolio search konsol terminal ruffles internet sitemap generator mssql ios ipad app store store in-app purchase purchase verification storekit itunes connect itunes development sql optimizasyon analyse procedure fstab ntfs connect meta language link icons share gimp howto nasıl cookie opengraph fql svn subversion git version control deployment pear mdb2 prepare execute pgsql tebrik lifestream parse server db code regex bootstrap ajax http phpstorm jetbrains ide box kurulum object database query injection player browsers support banner style html5 proje logo design dokuman wireless internet explorer xmlhttprequest export kitap