javascript web uygulamalari ile arama motorlarinin arasindaki husumeti gidermek
TRANSCRIPT
JavaScript Web Uygulamaları ile Arama Motorlarının Arasındaki Husumeti Gidermek
Osman YükselChief 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, benbunu çözebilirim” diye düsünür. Artık iki problemleri var.
Arama Motorlari
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