javascript web uygulamalari ile arama motorlarinin arasindaki husumeti gidermek

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

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