Your SlideShare is downloading. ×
Javascript web uygulamalari ile arama motorlarinin arasindaki husumeti gidermek
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript web uygulamalari ile arama motorlarinin arasindaki husumeti gidermek

1,029
views

Published on

Published in: Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,029
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript Web Uygulamaları ileArama Motorlarının Arasındaki Husumeti Gidermek Osman Yüksel Chief Technology Janissary @ sonsuzdöngü
  • 2. Günümüz Web Uygulamaları● AJAX
  • 3. Günümüz Web Uygulamaları● AJAX● HTML5 (APIlar)
  • 4. Günümüz Web Uygulamaları● AJAX● HTML5 (APIlar)● Single Page Web Applications
  • 5. Günümüz Web Uygulamaları● AJAX● HTML5 (APIlar)● Single Page Web Applications● Push State / History
  • 6. Günümüz Web Uygulamaları● AJAX● HTML5 (APIlar)● Single Page Web Applications● Push State / History● Stateful web
  • 7. Günümüz Web Uygulamalarıccc JavaScript ccc
  • 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 Disqusyorumları 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 Disqusyorumları 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 markupyazmak zorunda miyiz?
  • 16. DOM vs Markup
  • 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
  • 21. Çözüm ne?ccc JavaScript ccc
  • 22. Gerçekten çözüm mü?Bazi insanlar, bir problemle karsilastiginda “Regular Expressions biliyorum, benbunu çö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, benbunu çözebilirim” diye düsünür. Artık iki problemleri var. Jamie ZawinskiBazi insanlar, bir problemle karsilastiginda “JavaScript biliyorum, benbunu çözebilirim” diye düsünür. Artık iki problemleri var. Arama Motorlari
  • 24. Sayfaya bakalımhttp://test.kavuq.com/tr/#!/foo/bar
  • 25. Sorun ne?● Arama motoru hala bizim gördüğümüz içerigi göremiyor
  • 26. Çözüm● Google, 2009da bir “proposal” ortaya attiA proposal for making AJAX crawlablehttp://bit.ly/google-ajax-crawling-proposal
  • 27. Çözüm● Google, 2009da bir “proposal” ortaya attiA proposal for making AJAX crawlablehttp://bit.ly/google-ajax-crawling-proposal● “Sen her şeyini DOMda hazırlayabilirsin, amabana bir şekilde bunun markupını sun”
  • 28. Çözüm● Google, 2009da bir “proposal” ortaya attiA proposal for making AJAX crawlablehttp://bit.ly/google-ajax-crawling-proposal● “Sen her şeyini DOMda hazırlayabilirsin, amabana bir şekilde bunun markupını sun”● “Markupını sunarken de hashbang kullan, ben hashbanggordüğüm her sayfaya_escaped_fragment_=HASHBANGDEN_SONRASI şeklindegider senin markupını okurum”
  • 29. Çözüm● Google, 2009da bir “proposal” ortaya attiA proposal for making AJAX crawlablehttp://bit.ly/google-ajax-crawling-proposal● “Sen her şeyini DOMda hazırlayabilirsin, amabana bir şekilde bunun markupını sun”● “Markupını sunarken de hashbang kullan, ben hashbanggordüğüm her sayfaya_escaped_fragment_=HASHBANGDEN_SONRASI şeklindegider senin markupını okurum”● “Ya da bunu <meta> ile belirt“
  • 30. Çözüm● Google, 2009da bir “proposal” ortaya attiA proposal for making AJAX crawlablehttp://bit.ly/google-ajax-crawling-proposal● “Sen her şeyini DOMda hazırlayabilirsin, amabana bir şekilde bunun markupını sun”● “Markupını sunarken de hashbang kullan, ben hashbanggordüğüm her sayfaya_escaped_fragment_=HASHBANGDEN_SONRASI şeklindegider senin markupını okurum”● “Ya da bunu <meta> ile belirt“● “O zaman ben seni indekslerim”
  • 31. Kimler destekliyor?
  • 32. Kimler destekliyor?
  • 33. Kimler destekliyor?
  • 34. Kimler destekliyor?
  • 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 JavaScriptle sun
  • 38. İçerigi sunmak – HTML Snapshot● Tarayıcıda oluşan DOMu markupa çevir, öyle sun
  • 39. Selenium - Webdriver
  • 40. PhantomJS
  • 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/
  • 45. Sorular?
  • 46. Teşekkürler● github.com/yuxel● twitter.com/yuxel● yuxel.net