SlideShare une entreprise Scribd logo
1  sur  46
Télécharger pour lire hors ligne
JavaScript Web Uygulamaları ile
Arama Motorlarının Arasındaki Husumeti Gidermek




                Osman Yüksel
                Chief Technology Janissary @ sonsuzdöngü
Günümüz Web Uygulamaları

●   AJAX
Günümüz Web Uygulamaları

●   AJAX

●   HTML5 (API'lar)
Günümüz Web Uygulamaları

●   AJAX

●   HTML5 (API'lar)

●   Single Page Web Applications
Günümüz Web Uygulamaları

●   AJAX

●   HTML5 (API'lar)

●   Single Page Web Applications

●   Push State / History
Günümüz Web Uygulamaları

●   AJAX

●   HTML5 (API'lar)

●   Single Page Web Applications

●   Push State / History

●   Stateful web
Günümüz Web Uygulamaları




ccc JavaScript ccc
Günümüz Arama Motorları ve Optimizasyon Teknikleri

●   Hala yeterince akıllı degil
Günümüz Arama Motorları ve Optimizasyon Teknikleri

●   Hala yeterince akıllı degil

●   Hala “onun anlayabilecegi” içerik sunmak zorundayız
Günümüz Arama Motorları ve Optimizasyon Teknikleri

●   Hala yeterince akıllı degil

●   Hala “onun anlayabilecegi” içerik sunmak zorundayız

● SEO: Metinler girip sytle=”color:white” yapmaktan
çok da ilerde degil
Günümüz Arama Motorları ve Optimizasyon Teknikleri

●   Hala yeterince akıllı degil

●   Hala “onun anlayabilecegi” içerik sunmak zorundayız

● SEO: Metinler girip sytle=”color:white” yapmaktan
çok da ilerde degil

● Hala DOM okuyamıyor (Facebook ve Disqus
yorumları hariç)
Günümüz Arama Motorları ve Optimizasyon Teknikleri

●   Hala yeterince akıllı degil

●   Hala “onun anlayabilecegi” içerik sunmak zorundayız

● SEO: Metinler girip sytle=”color:white” yapmaktan
çok da ilerde degil

● Hala DOM okuyamıyor (Facebook ve Disqus
yorumları hariç)

●   Markup üretmek zorundayız
DOM vs Markup

●   Sayfada gördügünüz her şey bir DOM nesnesi
DOM vs Markup

●   Sayfada gördügünüz her şey bir DOM nesnesi

●   Markup → DOM
DOM vs Markup

●   Sayfada gördügünüz her şey bir DOM nesnesi

●   Markup → DOM

● Sayfada bir seyler görmek için markup
yazmak zorunda miyiz?
DOM vs Markup
Sorun ne?

●   Çok fazla tekrar eden “nesne”
Sorun ne?

●   Çok fazla tekrar eden “nesne”

●   Çok fazla tekrar eden “markup”
Sorun ne?

●   Çok fazla tekrar eden “nesne”

●   Çok fazla tekrar eden “markup”

●   Çok fazla byte transferi
Sorun ne?

●   Çok fazla tekrar eden “nesne”

●   Çok fazla tekrar eden “markup”

●   Çok fazla byte transferi

●   Yavas yüklenen sayfalar
Çözüm ne?




ccc JavaScript ccc
Gerçekten çözüm mü?

Bazi insanlar, bir problemle karsilastiginda “Regular Expressions biliyorum, ben
bunu çözebilirim” diye düsünür. Artık iki problemleri var.
                                                                 Jamie Zawinski
Gerçekten çözüm mü?

Bazi insanlar, bir problemle karsilastiginda “Regular Expressions biliyorum, ben
bunu çözebilirim” diye düsünür. Artık iki problemleri var.
                                                                  Jamie Zawinski




Bazi insanlar, bir problemle karsilastiginda “JavaScript biliyorum, ben
bunu çözebilirim” diye düsünür. Artık iki problemleri var.
                                                                 Arama Motorlari
Sayfaya bakalım




http://test.kavuq.com/tr/#!/foo/bar
Sorun ne?

●   Arama motoru hala 'bizim gördüğümüz içerigi göremiyor'
Çözüm

● Google, 2009'da bir “proposal” ortaya atti
A proposal for making AJAX crawlable
http://bit.ly/google-ajax-crawling-proposal
Çözüm

● Google, 2009'da bir “proposal” ortaya atti
A proposal for making AJAX crawlable
http://bit.ly/google-ajax-crawling-proposal

● “Sen her şeyini DOM'da hazırlayabilirsin, ama
bana bir şekilde bunun markup'ını sun”
Çözüm

● Google, 2009'da bir “proposal” ortaya atti
A proposal for making AJAX crawlable
http://bit.ly/google-ajax-crawling-proposal

● “Sen her şeyini DOM'da hazırlayabilirsin, ama
bana bir şekilde bunun markup'ını sun”

● “Markup'ını sunarken de hashbang kullan, ben hashbang
gordüğüm her sayfaya
_escaped_fragment_=HASHBANGDEN_SONRASI şeklinde
gider senin markup'ını okurum”
Çözüm

● Google, 2009'da bir “proposal” ortaya atti
A proposal for making AJAX crawlable
http://bit.ly/google-ajax-crawling-proposal

● “Sen her şeyini DOM'da hazırlayabilirsin, ama
bana bir şekilde bunun markup'ını sun”

● “Markup'ını sunarken de hashbang kullan, ben hashbang
gordüğüm her sayfaya
_escaped_fragment_=HASHBANGDEN_SONRASI şeklinde
gider senin markup'ını okurum”

●   “Ya da bunu <meta> ile belirt“
Çözüm

● Google, 2009'da bir “proposal” ortaya atti
A proposal for making AJAX crawlable
http://bit.ly/google-ajax-crawling-proposal

● “Sen her şeyini DOM'da hazırlayabilirsin, ama
bana bir şekilde bunun markup'ını sun”

● “Markup'ını sunarken de hashbang kullan, ben hashbang
gordüğüm her sayfaya
_escaped_fragment_=HASHBANGDEN_SONRASI şeklinde
gider senin markup'ını okurum”

●   “Ya da bunu <meta> ile belirt“

●   “O zaman ben seni indekslerim”
Kimler destekliyor?
Kimler destekliyor?
Kimler destekliyor?
Kimler destekliyor?
İçerigi sunmak

●   Bir şekilde markup'ı arama motoruna sunmak gerekiyor
İçerigi sunmak

●   Bir şekilde markup'ı arama motoruna sunmak gerekiyor

●   İçerigin bir de “markup”lı halini oluşturmak
İçerigi sunmak

●    Bir şekilde markup'ı arama motoruna sunmak gerekiyor

●   vİçerigin bir de “markup”lı halini oluşturmak

●    :if GET['_escaped_fragment_']
         markup icerik sun
     :else
         JavaScript'le sun
İçerigi sunmak – HTML Snapshot

●   Tarayıcıda oluşan DOM'u markup'a çevir, öyle sun
Selenium - Webdriver
PhantomJS
Kavuq
Diger Araçlar




  ●   HTMLUnit

  ●   Crawljax
Başarı öyküleri




●   http://turkcellmuzik.turkcell.com.tr

●   http://www.playstore.com/

●   http://www.thebullittagency.com
Kaynaklar




●   http://bit.ly/yunus-yurtturk-ajax-crawling

●   https://developers.google.com/webmasters/ajax-crawling/
Sorular?
Teşekkürler
●   github.com/yuxel
●   twitter.com/yuxel
●   yuxel.net

Contenu connexe

Plus de Osman Yuksel

Plus de Osman Yuksel (7)

Varnish
VarnishVarnish
Varnish
 
Muhafiz
MuhafizMuhafiz
Muhafiz
 
Selenium
SeleniumSelenium
Selenium
 
Jasminebdd
JasminebddJasminebdd
Jasminebdd
 
Web Onyuzu Nasil Olmali
Web Onyuzu Nasil OlmaliWeb Onyuzu Nasil Olmali
Web Onyuzu Nasil Olmali
 
Tornadoweb
TornadowebTornadoweb
Tornadoweb
 
JavaScript sunumu
JavaScript sunumuJavaScript sunumu
JavaScript sunumu
 

Javascript web uygulamalari ile arama motorlarinin arasindaki husumeti gidermek

  • 1. JavaScript Web Uygulamaları ile Arama Motorlarının Arasındaki Husumeti Gidermek Osman Yüksel Chief Technology Janissary @ sonsuzdöngü
  • 3. Günümüz Web Uygulamaları ● AJAX ● HTML5 (API'lar)
  • 4. Günümüz Web Uygulamaları ● AJAX ● HTML5 (API'lar) ● Single Page Web Applications
  • 5. Günümüz Web Uygulamaları ● AJAX ● HTML5 (API'lar) ● Single Page Web Applications ● Push State / History
  • 6. Günümüz Web Uygulamaları ● AJAX ● HTML5 (API'lar) ● Single Page Web Applications ● Push State / History ● Stateful web
  • 8. Günümüz Arama Motorları ve Optimizasyon Teknikleri ● Hala yeterince akıllı degil
  • 9. Günümüz Arama Motorları ve Optimizasyon Teknikleri ● Hala yeterince akıllı degil ● Hala “onun anlayabilecegi” içerik sunmak zorundayız
  • 10. Günümüz Arama Motorları ve Optimizasyon Teknikleri ● Hala yeterince akıllı degil ● Hala “onun anlayabilecegi” içerik sunmak zorundayız ● SEO: Metinler girip sytle=”color:white” yapmaktan çok da ilerde degil
  • 11. Günümüz Arama Motorları ve Optimizasyon Teknikleri ● Hala yeterince akıllı degil ● Hala “onun anlayabilecegi” içerik sunmak zorundayız ● SEO: Metinler girip sytle=”color:white” yapmaktan çok da ilerde degil ● Hala DOM okuyamıyor (Facebook ve Disqus yorumları hariç)
  • 12. Günümüz Arama Motorları ve Optimizasyon Teknikleri ● Hala yeterince akıllı degil ● Hala “onun anlayabilecegi” içerik sunmak zorundayız ● SEO: Metinler girip sytle=”color:white” yapmaktan çok da ilerde degil ● Hala DOM okuyamıyor (Facebook ve Disqus yorumları hariç) ● Markup üretmek zorundayız
  • 13. DOM vs Markup ● Sayfada gördügünüz her şey bir DOM nesnesi
  • 14. DOM vs Markup ● Sayfada gördügünüz her şey bir DOM nesnesi ● Markup → DOM
  • 15. DOM vs Markup ● Sayfada gördügünüz her şey bir DOM nesnesi ● Markup → DOM ● Sayfada bir seyler görmek için markup yazmak zorunda miyiz?
  • 17. Sorun ne? ● Çok fazla tekrar eden “nesne”
  • 18. Sorun ne? ● Çok fazla tekrar eden “nesne” ● Çok fazla tekrar eden “markup”
  • 19. Sorun ne? ● Çok fazla tekrar eden “nesne” ● Çok fazla tekrar eden “markup” ● Çok fazla byte transferi
  • 20. Sorun ne? ● Çok fazla tekrar eden “nesne” ● Çok fazla tekrar eden “markup” ● Çok fazla byte transferi ● Yavas yüklenen sayfalar
  • 22. Gerçekten çözüm mü? Bazi insanlar, bir problemle karsilastiginda “Regular Expressions biliyorum, ben bunu çözebilirim” diye düsünür. Artık iki problemleri var. Jamie Zawinski
  • 23. Gerçekten çözüm mü? Bazi insanlar, bir problemle karsilastiginda “Regular Expressions biliyorum, ben bunu çözebilirim” diye düsünür. Artık iki problemleri var. Jamie Zawinski Bazi insanlar, bir problemle karsilastiginda “JavaScript biliyorum, ben bunu çözebilirim” diye düsünür. Artık iki problemleri var. Arama Motorlari
  • 25. Sorun ne? ● Arama motoru hala 'bizim gördüğümüz içerigi göremiyor'
  • 26. Çözüm ● Google, 2009'da bir “proposal” ortaya atti A proposal for making AJAX crawlable http://bit.ly/google-ajax-crawling-proposal
  • 27. Çözüm ● Google, 2009'da bir “proposal” ortaya atti A proposal for making AJAX crawlable http://bit.ly/google-ajax-crawling-proposal ● “Sen her şeyini DOM'da hazırlayabilirsin, ama bana bir şekilde bunun markup'ını sun”
  • 28. Çözüm ● Google, 2009'da bir “proposal” ortaya atti A proposal for making AJAX crawlable http://bit.ly/google-ajax-crawling-proposal ● “Sen her şeyini DOM'da hazırlayabilirsin, ama bana bir şekilde bunun markup'ını sun” ● “Markup'ını sunarken de hashbang kullan, ben hashbang gordüğüm her sayfaya _escaped_fragment_=HASHBANGDEN_SONRASI şeklinde gider senin markup'ını okurum”
  • 29. Çözüm ● Google, 2009'da bir “proposal” ortaya atti A proposal for making AJAX crawlable http://bit.ly/google-ajax-crawling-proposal ● “Sen her şeyini DOM'da hazırlayabilirsin, ama bana bir şekilde bunun markup'ını sun” ● “Markup'ını sunarken de hashbang kullan, ben hashbang gordüğüm her sayfaya _escaped_fragment_=HASHBANGDEN_SONRASI şeklinde gider senin markup'ını okurum” ● “Ya da bunu <meta> ile belirt“
  • 30. Çözüm ● Google, 2009'da bir “proposal” ortaya atti A proposal for making AJAX crawlable http://bit.ly/google-ajax-crawling-proposal ● “Sen her şeyini DOM'da hazırlayabilirsin, ama bana bir şekilde bunun markup'ını sun” ● “Markup'ını sunarken de hashbang kullan, ben hashbang gordüğüm her sayfaya _escaped_fragment_=HASHBANGDEN_SONRASI şeklinde gider senin markup'ını okurum” ● “Ya da bunu <meta> ile belirt“ ● “O zaman ben seni indekslerim”
  • 35. İçerigi sunmak ● Bir şekilde markup'ı arama motoruna sunmak gerekiyor
  • 36. İçerigi sunmak ● Bir şekilde markup'ı arama motoruna sunmak gerekiyor ● İçerigin bir de “markup”lı halini oluşturmak
  • 37. İçerigi sunmak ● Bir şekilde markup'ı arama motoruna sunmak gerekiyor ● vİçerigin bir de “markup”lı halini oluşturmak ● :if GET['_escaped_fragment_'] markup icerik sun :else JavaScript'le sun
  • 38. İçerigi sunmak – HTML Snapshot ● Tarayıcıda oluşan DOM'u markup'a çevir, öyle sun
  • 41. Kavuq
  • 42. Diger Araçlar ● HTMLUnit ● Crawljax
  • 43. Başarı öyküleri ● http://turkcellmuzik.turkcell.com.tr ● http://www.playstore.com/ ● http://www.thebullittagency.com
  • 44. Kaynaklar ● http://bit.ly/yunus-yurtturk-ajax-crawling ● https://developers.google.com/webmasters/ajax-crawling/
  • 46. Teşekkürler ● github.com/yuxel ● twitter.com/yuxel ● yuxel.net