Angular Seo için Prerender.io kullanırken linkler nasıl olmalı



  • Merhaba angularjs ile basit bir web uygulamam var. Angularjs kendi router yapısını kullanıyorum. apache sunucu ile prerender io vasıtası ile arama motorubotları gelince render edeceğiz. Ancak anlamadığım ufak detaylar var.
    <meta name="fragment" content="!">
    ekleyeceğiz tmm. ancak angularjs tarafında baska ne değişiklik yapmam gerekli anlayamadım.
    misal artık tagları #!/url1
    gibi mi yapmalıyım?


  • administrators

    Merhaba @mgundogdu, öncelikle forumumuza hoşgeldin.

    <meta name="fragment" content="!"> tagini de eklediysen artık Angular tarafında hiçbir şey yapman gerekmiyor. Böyle bir gereksinim yok.

    Artık asıl yapman gereken iş backend tarafında.

    Çünkü işin çalışma prensibi şu şekilde; GoogleBot Angularla yazılmış sitemizi render edemediği için, sitemizle GoogleBot arasına prerender servisini koyacağız. Bu yüzden GoogleBot hiçbir zaman sitemizin orjinal halini görmeyecek. GoogleBot sitemize geldiğinde, bunu farkedip, isteği prerender servisine paslayacağız, prerender servisi zaten javascript yorumlayabildiği için, hiçbir sıkıntı yaşamadan Angular uygulamamızı render edecek ve render edilmiş HTML' i GoogleBot' a cevap olarak dönecek.

    Bu sebeple Angular tarafında yapman gereken artık hiçbir değişiklik yok.

    Dediklerimi hemen deneyebiliriz. Prerender' ın test servisi var. Şu şekilde test ediliyor;

    http://service.prerender.io/http://angulartr.com

    angulartr.com yerine kendi websitenin adresini yazıp, açmayı dene. Prerender servisi siteni yorumlayacaktır. Bu sayede ortaya çıkacak sonucu görebilirsin.

    Sunucuna prerender kurmadıysan, kurmalısın.

    Kurduktan sonra, çalışıp çalışmadığnı http://serverIp:3000/https://www.google.com/ şeklinde deneyebilirsin.

    Herşey OK ise, https://gist.github.com/thoop/8072354 adresinde Apache için verilen konfigürasyonda;
    http://service.prerender.io/http://example.com/$2 kısmını kendine göre düzenleyerek ekleyebilirsin.



  • Yani $locationProvider.hashPrefix('!'); Falan ekleyip
    #!/link1
    #!/link2

    falan diye adlandirmama gerek yok mu?


  • administrators

    @mgundogdu , Hayır, hiçbirşey yapmana gerek yok. Zaten prerender' ı kullanmamızın olayı bu.

    Şöyle düşün;

    Şuan uygulaman gayet sağlıklı şekilde çalışıyormu? evet. Şuanki halini prerender servisi render edebilecek ve bunu da GoogleBot' a dönecek.

    Uygulaman internete açık ise, http://service.prerender.io/ adresinden, ilk mesajımda belirttiğim gibi test et.
    Uygulaman internete açık değil ise, prerender' ı bilgisayarına kur ve http://localhost:3000/websiteninBilgisayarindakiAdresi şeklinde test et.

    Sayfa kaynağını görüntüle, data-bind olmuş mu? ng-href içinde yazdıkların render edilip, linke dönüşmüş mü?

    Bunları test et.

    Keza, AngularJS uygulamanı Google' a indeksletmek için tek çözümün prerender' da değil. PhantomJS' te kullanabilirsin. Prerender herşeyi otomatik yapıyor, lakin senin uygulamanda egde case var ise, prerender bunu atlayabilir. O zaman backend' te PhantomJS kullanıp, Angular tarafında da şu https://github.com/steeve/angular-seo modülü kullanacaksın.

    Ben dahil olduğum projelerde bu şekilde kullandım ve sıfır hata ile tüm sayfaları indekslettim.



  • Çok aşırı teşekkür ederim. Evet Phantomjs de var. prerender su acıkdan mantıklı geldi. Bu projedeki kullanılacak sunucu apache calistırıyor . nodejs kullanamıyorum. prerender bu konuda güzel çözüm sundu. ancak dediğinz edge case nedir onu bilemedim. Herşey için tekrar tekrar teşekkürler.


  • administrators

    @mgundogdu, Angular ile uygulama yapacak herkesin başına gelecek bu sorunu sorup, inceleme fırsatı verdiğin için ben teşekkür ederim.

    Edge case şöyle;

    Prerender servisi Angular' ın data-bind yapısını bildiği için, Angular' ın gerekli eventleri dinleyip, veri gerçekten render edildikten sonra, cevabı dönüyor. FAKAT, uygulamanı yazarken bazı yerlerde, veriyi çekerken ve basarken Angular yapısına aykırı bir iş yapabilirsin. Bu noktada prerender çaresiz kalacaktır. İşte bu yüzden phantomjs kullanılıyor ve https://github.com/steeve/angular-seo/blob/master/angular-seo.js adresinden inceleyebileceğin gibi htmlReady metodu kullanılıyor.

    Diyelimki, servis üzerinden veri geldi, ve bir model' e set edildi. Fakat üzerine ekstra bir işlem daha yapılması gerekiyor. Örneğin bir e-ticaret sitesinde, fiyatın çarpılması ve bölünmesi gibi. İşte bu durumda, prerender model set edildiği gibi, herşey ready sanacak. Ama işler öyle değil. Sen fiyatı çarptıktan sonra htmlReady metodunu çağırmalısın.

    Bu verdiğim çok basit bir örnek. Prerender genel itibari ile çok güzel çalışmaktadır.

    Kolay gelsin, görüşmek üzere :)



  • Büyük mesaj .. Web tasarım çin taban sitemde buna ihtiyacım var.
    https://seirim.com/blog/seo-and-sem/using-prerenderio-for-seo


Cevaplamak için giriş yapın