AngularJS ile web uygulaması geliştirip yayına aldıktan sonra, Google da indexlenme problemi yaşadığını göreceksiniz. Hatta sanırım şuan sen bunu okuyorsan, bu sorunu fark ettin demektir 🙂 Yada daha önceden AngularJS, Backbone Js veya başka bir framework ile, ajax request ler sayesinde, datanın getirildiği ve sonrasında map edilip, içeriğe dönüştüğü uygulamalar yapmış biriysen, zaten bu probleme çözüm aramaktasındır. Öyleyse bu konuya bir açıklık getirelim.

Sene 2009, Single Page Application lar hafiften rağbet görmeye başlamıştı. Çünkü gelecekte kullanılması gereken teknoloji buydu. Tıpkı http://angulartr.com/angularjs-ve-yeni-duzen-web-uygulamalari/ konusunda anlattığım gibi. Fakat bir sorun vardı. Google ve diğer botlar bu uygulamaları İNDEXLEYEMİYORDUUUUUU.

Sebebi ÇOK BASİT.

Google ve diğer botlar web sayfalarının HTML’ ini okuyabilir, Render edilmiş DOM’ u okuyamaz.

Ahanda bu şekilde.

angularjs template code

Yukarıdaki resim, bir AngularJS Template idir. $scope taki pek çok değer bind edilmiş, diziler ng-repeat e sokulmuş, ng-if ile var olma, olmama kararı veriliyor, falan falan. Google BOT sayfanıza geldiğinde gördüğü budur. Yani siz kodunuzu IDE’ de yazarkenki haliyle birebir aynı.

Neden ?

Çünkü Botlar JAVASCRIPT YORUMLAYAMAZ

Ama yukarıdaki template’ de kullanılan tüm modeller, XHR Request ile elde ediliyor. AngularJS’ te kullanılan $http servisinin kendi içinde kullandığı kodlarda http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp adresindeki kodlardır VE JAVASCRIPT kodlarıdır. Zaten tarayıcılarda çalışan başka bir dil yok 🙂

KEZA, veriyi elde ettikten sonraki Render işlemide javascript ile yapılır. AngularJS innerHTML metodunu kullanmıyor ama benzer bir işlem uygulanıyor.http://www.w3schools.com/jsref/prop_html_innerhtml.asp . innerHTML metodu da doğal olarak javascript metodudur.

Şimdi anladık mı Google’ ın neden Single Page Application ları indexleyemediğini ?

Geliştiriciler çok üzgün ve dertliydi, geleceğin teknolojisi ile işler yapıyorlar ama indexlenme problemleri çekiyorlardı. İsyan ediyorlardı. Google bu isyana cevapsız kalamadı ve resmi bloğunda şu yazıyı yazdı http://googlewebmastercentral.blogspot.bg/2009/10/proposal-for-making-ajax-crawlable.html

Geliştiricileri headless browser kullanarak, botlara snapshot sunmaya davet ediyordu. Elden başka bir şey gelmiyordu.

Nedir bu Snapshot olayı ?

Öncelikle headless browser‘ ın ne olduğunu bilmeniz gerekiyor. Hemen size bir tane örnek vereyim; http://phantomjs.org/ headless browser nedir diye bir araştırmanızı öneririm. Çünkü kullanacaksınız. Ama özet geç derseniz; asıl amacı, web uygulamalarını test edebilmek için geliştirilmiş bir araçtır. Javascript yorumlar ve ortaya çıkan kodu sunar. Gerçek kullanıcılar gibi etkileşim gerçekleştirebilir. Pardon pardon ne yapabilir ? Tekrar okuyalım, JAVASCRIPT YORUMLARRRR. İşte aradığımız kan.

Olay şöyle gerçekleşiyor;

Sayfanıza bir istek geldiğinde, isteğin başlığına yani request header’ a bakıyorsunuz, burada User Agent yazar. Yani tarayıcı ismi, versiyonu ve benzeri bilgiler barındırır. Google ve benzeri botlar sayfanıza istek yaptığında ise bu kısımda Googlebot yada diğer botların ismi yazar. İşte backend’inize bir metod ekleyip, sayfalarınıza gelen isteklerin bot mu yoksa gerçek kullanıcımı olduğunu ayırt ediyorsunuz, eğer bot ise, sayfanızı, serverınıza kurduğunuz phantomjs’ e gönderiyorsunuz. PhantomJS Javascript’ i yorumluyor ve sayfanın yorumlanmış halini size veriyor, sizde Bot’ a cevap olarak dönüyorsunuz. Yani snapshot bu döndüğümüz cevap.

Bu sayede ne oluyor????? Google sitenizi indexleyebilmiş oluyor. https://developers.google.com/webmasters/ajax-crawling/docs/getting-started adresinde de Google tarafından anlatıldığı gibi.

Tekrar ediyorum;

  • Server’ a bir headless browser kurulacak
  • İsteklerin bot mu yoksa normal kullanıcımı olduğunu ayırt edebilmemizi sağlayan kod yazılacak
  • Bot ise, istenen sayfa headless browser ile yorumlanıp, Bot’ a cevap dönülecek.

Ya öyle diyorsunda KOD LAZIMMMM BANA Hani Nerde ???

Hiç merak etme, işlerin nasıl yürüdüğünü anlattığım bu konu bitsin. Teknik kısmı en ince detayları ile anlatan konuyu da paylaşıcam. Sen angulartr yi takip etmeye devam et.

Dur dur Google bir açıklama yaptı, Artık snapshot olayına girme diyor.

Google 2015 ekim ayında, yani ben bu yazıyı yazdığım ay, http://googlewebmastercentral.blogspot.bg/2015/10/deprecating-our-ajax-crawling-scheme.html adresinde bir yazı yazdı ve artık ben senin javascript kodlarını yorumlayabiliyorum. snapshot kullanmana gerek yok dedi. İlla kullanacaksanda, bunu performans için yap dedi.

LE LE LE SAKİNE, Niye gittin dügüne? Gel beraber coşalım, bak gidiyor makine 😀

Kazın ayağı öyle değil dostlar. Google her ne kadar, bu iş bende, artık indexleyebiliyorum desedeeee, güvenmeyin. Çünkü şuan çalıştığım projede (full angularjs ile yazılmış bir e-ticaret sitesi) hiçbir önlem anlamadan herşeyi Google’ a bıraktık. Hiç hoş olmadı. Sitenin %90′ ını yorumlayamadı. Yorumladığı kısımlarda, arama sonuçlarında hep farklı çıktı. İşten Google’ a girip arama yapınca yorumlamış sonuç çıkıyor, evden yorumlamamış sonuç. Datacenter’ dan bir diğerine değişiklik gösterdi. Çok tatsız bir olaydı ve headless browser kullandık, tüm sayfaları indexlettik.

 

AngularJS Seo hakkındaki Teknik konumuzda, snapshot olayı nasıl yapılır? göstereceğim. Hemde alternatifleri ile. Takipte kalın.

9 Comments AngularJS ve SEO | Google’ ın AngularJS uygulamasını indexlemesi

  1. Hakan Balcı

    Üstad Selâmlar,

    Konudan çok uzak olmama ragmen, zevkle okuduğum bir anlatimdi. Güzel yorumunla yazilarinin devamini diliyorum.

    İyi çalismalar dileğimle,
    Hakan

    Reply
  2. Johnf737

    I was looking through some of your blog posts on this internet site and I conceive this web site is rattling informative ! Keep on posting

    Reply

Leave A Comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir