AJAX ile oluşturulan içeriği Google Bot tarafından okunabilir hale getirmek | Yunus Yurttürk
Ben bu yazıyı yazdığımda, ilgili Google sayfasında konu ile alakalı 'Umarız diğer arama motorları da bu metodu destekler' gibi bir söylem vardı. Diğer arama motorları da bu şekilde destekliyor mu bilemiyorum. İyi haber ise, test yaparken güzel url (ne olduğu aşağıda yazıyor) içeren bir URL'yi Facebook'tan paylaştığımda, ilgili kısmı _escaped_fragment_ olarak değiştirmesiydi(bu kavramın ne olduğunu anlamak için yazıyı okumanız lazım) paylaştığım sayfanın URL'sini. Demek ki bu metodu Facebook da destekliyor ve standart haline gelmesi için çok büyük bir etken.
Ekleme: Evet, Facebook da bu yazıda yazılanları aynen destekliyor ve çok güzel bir araç sunmuş. Bu araca https://developers.facebook.com/tools/debug buradan ulaşabilirsiniz. Ne yaptığınızı görselleştirdiği için çok faydalı olabiliyor
Bilmemiz gereken birkaç kavram.
Güzel URL: İçerisinde #! İçeren url.
HTML anlık görüntüsü : İngilizcesi HTML Snapshot, bir nevi ajax sorgusu işlendikten sonraki tüm sayfanın HTML kodu. Örnek olarak, bir div'in içeriğini dinamik olarak değiştirdiyseniz, HTML anlık görüntüsü içeriği değişmiş şekilde tüm sayfanın HTML kodlarıdır. Bu kavramı iyice anladığınıza emin olun
Google Crawler’ı, sayfada bir güzel url bulduğu zaman, bu sayfanın içeriğini farklı bir şekilde ister. Web serverınız, istenen içeriği bir HTML anlık görüntüsü olarak döndürür, ardından Crawler tarafından işlenir.
Adım Adım başlıyoruz
1. Crawler’a, sitenizin Google Ajax şemasını desteklediğini bildirin
Ajax kullanılan siteleri indexlemenin ilk adımı, crawlera sitenizin Ajax şemasına uyduğunu belirtmektir. Bunu yapmanın yolu ise, URL’nin Hash kısmında özel bir işaret kullanmaktır. Bu özel işaret ise “#!” dir . Örneğin, Ajax içeriğinizi şu şekilde ayarladığınızı düşünelim.
Eğer üstteki gibi bir kullanımınız varsa, alttaki gibi olacak şekilde değiştirmelisiniz.
2. Serverınızı _escaped_fragment_ içeren URL içeriğini kontrol edebilecek şekilde ayarlayın
Diyelim ki www.example.com/index.html#!key=value adresini indexletmeye çalışıyoruz. Bunu yapmak için üzerinize düşen görev, Crawler’a bu URL’nin bir HTML anlık görüntüsünü sağlamanız olacaktır. Böylece Crawler içeriğinizi görebilir. Peki siteniz ne zaman HTML anlık görüntüsü yollayacağını nereden bilecek? Bunun cevabı ise Crawler tarafından istenen URL’de saklı. Şöyle ki, Crawler her AJAX URL’sini şu şekilde modifiye eder(güzel gördüklerini):
Aşağıdaki gibi bir url ile karşılaştığında
aşağıdaki gibi bir url’ye göz atar
Bunun neden gerekli olduğunu düşünebilirsiniz? 2 önemli sebebi vardır
_ Hash kullanılan URL’ler asla(aksi belirtilmediği sürece) servera HTTP isteğinin bir bölümü olarak iletilmez. Diğer bir deyişle, Crawler bir şekilde server’a www.example.com/ajax.html içeriği yerine www.example.com/ajax.html#!key=value adresindeki içeriği istediğini bildirmelidir. (Bu cümleyi tekrar okuyun)
Uyarı: Crawler bazı karakterleri, dönüştürme işlemi sırasında escape eder. Orijinal kısımı geri almak için, bütün parçalı kısımdaki bütün %XXleri unescape ettiğinizden emin olun. %26 => &, %20 => ‘ ‘(boşluk), %23 => # ve %25 =>% vb. gibi
Artık elinizde orijinal URL’niz var ve Crawler’ın hangi içeriği istediğini de biliyorsunuz. Şimdiki aşama ise bir HTML anlık görünütüsü üretmek. Bunu nasıl mı yapacaksınız? Bazı yöntemleri inceleyelim.
_ Sitenizin statik bir offline versiyonunu oluşturabilirsiniz. Örneğin, birçok uygulama bir veritabanından içeriği alır ve içerik tarayıcı tarafından işlenir. Bunun yerine her bir AJAX URL’si için ayrı bir HTML sayfası oluşturabilirsiniz.
Kendi oluşturduğunuz HTML anlık görüntüleme sistemini denemeniz kesinlikle gereklidir.
Headless tarayıcının aslında uygulamanızın durumunu doğru şekilde işlediğinden emin olmanız önemlidir. Şimdi kesinlikle Crawler’ın sayfanızı nasıl görüntüyor olduğunu merak ediyorsunuz değil mi 🙂 Bunu yapmak için, minik bir test uygulaması yazıp sonucu görebilirsiniz, yada Fetch as Googlebot adındaki aracı kullanabilirsiniz.
Özetlemek gerekirse, sitenizde şunları yaptığınızdan emin olmalısınız..
_ www.example.com/ajax.html?_escaped_fragment_=key=value şeklindeki bir URL aslında
www.example.com/ajax.html#!key=value URL’sine denk geldiğine
_ Kullandığınız özel işaret URL unescaped olmalıdır. Bunu yapmanın en kolay yolu standart URL decoding fonksiyonlarını kullanmaktır. Örneğin Java’da bu işlemi
şeklinde yapabilirsiniz. Yada PHP kullanarak url_decode($url); şeklinde yapabilirsiniz.
_ İdeal olarak bir HTML anlık görüntüsü, sayfanın en üstünde, kullanıcılara _escaped_fragment_ kullanılmış kısma geldiklerini (yanlışlıkla geldiklerini) belirten bir önemli bir uyarı URL’si ile oluşturulur. ( _escaped_fragment_ şeklindeki URL’leri sadece Crawler’lar tarafından kullanılması için oluşturduğumuzu hatırlayınız). Diğer bütün istekler için server içeriği normalde yaptığı gibi döndürmelidir.
3. Hash kısmı olmayan sayfaları kontrol etmek
Sitenizdeki bütün sayfalar bir hash’e sahip olacak diye bir kural yok. Bir örnek vermek gerekirse ana sayfanızın www.example.com#! Mu olmasını istersiniz yoksa www.example.com mu? (tabiî ki 2.si!) İşte bu yüzden, Google bize özel bir önlem sağlıyor: Hash kısmı içermeyen sayfalarınızın da Crawlerlar tarafından taranabilmesi için, özel bir meta etiketi
Bu etiket Crawler’a Çirkin URL’yi incelemesi gerektiğini belirtiyor. Üstte anlatıldığı gibi, Crawler geçici olarak Çirkin URL yerine Güzel URL’yi inceleyecek. Diğer bir ifade ile, eğer
etiketini www.example.com gibi bir sayfada kullanırsanız, Crawler geçici olarak bu URL’yi
www.example.com?_escaped_fragment_= şeklinde serverdan isteyecektir. Serverınız da, www.example.com sayfasına karşılık gelen HTML anlık görüntüsünü döndürmelidir. Burada bilmemiz gereken önemli bir kısıtlama var. Bu meta etiketi içerisinde content olarak sadece “!” kullanabiliriz. Diğer bir ifade ile meta etiketiniz her zaman yukarıda belirttiğimiz formda kullanmalıyız.Bu da, hash içermeyen fakat Ajax içeriği içeren bir sayfada kullanılmış olmalıdır.
4.Sitemap ‘ınızın yeni hazırladığımız AJAX URL’leri içeren şekliyle güncelleyin
Crawlerlar, site haritalarını keşiflerini tamamlamak için kullanırlar. Site haritanız, arama sonuçlarında görmek istediğiniz URLleri içeriyor olmalıdır. Çoğu durumda bu http://example.com/ajax.html#!key=value şeklinde olacaktır. Dikkat! http://example.com/ajax.html?_escaped_fragment_=key=value şeklinde URLlerinizi site haritanız içerisine yerleştirmeyin. Google Botları _escaped_fragment_ içeren linkleri takip etmezler! Eğer siteniz herhangi bir Giriş sayfasına sahipse (yani ana sayfaya) ve bu sayfanın arama sonuçlarında “#!” özel işareti ile görüntülenmesini istemiyorsanız, ana sayfanızın URL’sini olduğu gibi site haritanıza ekleyiniz. Örneğin ana sayfanızın arama sonuçlarında aşağıdaki gibi görüntülenmesini istiyorsanız
site haritanıza http://example.com/ eklediğinize emin olun ve bu sayfada meta etiketi olarak <meta name="fragment" content=”!”> kullandığınıza emin olun .
5.Eğer isterseniz, uygulamanızın Crawlerlar tarafından taranabilir olduğunu test etmek için “Fetch as Googlebot” uygulamasını kullanabilirsiniz.
Google bizlere crawlerların sitemizden ne gördüğünü gösteren Fetch as Googlebot adlı aracı sunuyor. Bu aracı, uygulamanızın doğru çalışıp çalışmadığını test etmek ve botların, diğer tüm kullanıcıların gördüğü içerikleri görüp göremediğini test etmek için kullanabilirsiniz.
Yazının başında da belirttiğim gibi test edemeden gönderiyorum bu yazıyı. Eğer eskimiş yada yanlış bilgiler varsa affola 🙂
← Arduino ile Bilgisayar Arasında USB Yoluyla İletişim Kurmak ve Bilgisayar ile Motor Hızı Kontrol Uygulaması Bir diyot devrenizi nasıl koruyabilir? →
“AJAX ile oluşturulan içeriği Google Bot tarafından okunabilir hale getirmek” hakkında 2 yorum
Hasan yüksektepe 21 Eylül 2012, 23:08
Şimdi benim bi sitem var
Şarkı aratıp şarkıları tıklayınca sayfa yenilenmeden url değişiyor. Jquery sayesinde de keywordler ve title filan değişiyor.
Bu etiketi koydum ama google gibi getir dediğimde title gene aynı galiba okuduklarımdan birşey anlamadım bana yardımcı olabilir misiniz? 😀
Hüseyin 12 Nisan 2013, 22:55
Dostum ben de aynı seyi arıyorum
gibi linkleri ajaxla tanımlıyoruz tıklama olayı gerçekleşince sayfayı duraklatıp a etiketinin değerini alıp ajax ile sayfayı çekiyor
Sanırım böyle bişi olması lazım :S