PushState ve Precomposition kullanın
Bunu yapmanın şu anki (2015) yolu JavaScript pushState yöntemini kullanmaktır.
PushState, sayfayı yeniden yüklemeden üst tarayıcı çubuğundaki URL'yi değiştirir. Sekmeler içeren bir sayfanız olduğunu varsayalım. Sekmeler içeriği gizler ve gösterir ve içerik AJAX kullanılarak veya yalnızca display: none ve display: block öğelerini doğru sekme içeriğini gizlemek ve göstermek için dinamik olarak eklenir.
Sekmeler tıklandığında, adres çubuğundaki URL'yi güncellemek için pushState'i kullanın. Sayfa oluşturulduğunda, hangi sekmenin gösterileceğini belirlemek için adres çubuğundaki değeri kullanın. Açısal yönlendirme bunu sizin için otomatik olarak yapacaktır.
önceden oluşturma
PushState Tek Sayfalı Uygulamayı (SPA) vurmanın iki yolu vardır
- Kullanıcının bir PushState bağlantısını tıkladığı ve içeriğin AJAXed olduğu PushState aracılığıyla.
- Doğrudan URL'ye basarak.
Siteye yapılan ilk isabet URL’ye doğrudan vurulmasını içerir. Sonraki isabetler, PushState URL'yi güncellediğinden içerik olarak AJAX olacaktır.
Tarayıcılar bir sayfadaki bağlantıları toplar ve daha sonra bunları işlemek için bir kuyruğa ekler. Bu, bir tarayıcı için sunucudaki her isabetin doğrudan bir isabet olduğu anlamına gelir, Pushstate üzerinden gezinmezler.
Precomposition, başlangıç yükünü, muhtemelen JSON nesnesi olarak sunucudan gelen ilk yanıtla birleştirir. Bu, Arama Motorunun AJAX çağrısı yapmadan sayfayı oluşturmasına izin verir.
Google'ın AJAX isteklerini yerine getiremeyebileceğini gösteren bazı kanıtlar var. Burada daha fazlası:
https://web.archive.org/web/20160318211223/http://www.analog-ni.co/precomposing-a-spa-may-become-the-holy-grail-to-seo
Arama Motorları JavaScript'i okuyabilir ve yürütebilir
Google bir süredir JavaScript'i ayrıştırabildi, bu yüzden başlangıçta Chrome'u geliştirdiler ve Google örümcek için tam özellikli bir başsız tarayıcı olarak hareket ettiler. Bir bağlantının geçerli bir href özelliği varsa, yeni URL dizine eklenebilir. Yapacak başka bir şey yok.
Ek olarak bir bağlantıyı tıklamak bir pushState aramasını tetiklerse, sitede kullanıcı tarafından PushState aracılığıyla gezinebilirsiniz.
PushState URL'leri için Arama Motoru Desteği
PushState şu anda Google ve Bing tarafından desteklenmektedir.
Google
Matt Cutts, Paul Irish'ın SEO için PushState hakkındaki sorusuna yanıt veriyor:
http://youtu.be/yiAF9VdvRPw
Google, örümcek için tam JavaScript desteğini açıkladı:
http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html
Sonuç olarak Google, PushState'i destekliyor ve PushState URL'lerini dizine ekleyecek.
Ayrıca bkz. Google web yöneticisi araçlarının Googlebot gibi getirilmesi. JavaScript'inizin (Açısal dahil) yürütüldüğünü göreceksiniz.
Bing
İşte Bing'in Mart 2013 tarihli güzel PushState URL'leri için destek duyurusu:
http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/
HashBangs # kullanmayın!
Hashbang URL'leri, geliştiricinin sitenin önceden oluşturulmuş bir sürümünü özel bir konumda sunmasını gerektiren çirkin bir stopgap idi. Hala çalışıyorlar, ama onları kullanmanıza gerek yok.
Hashbang URL'leri şöyle görünür:
domain.com/#!path/to/resource
Bu, şöyle bir meta etiketle eşleştirilir:
<meta name="fragment" content="!">
Google bunları bu formda dizine eklemez, bunun yerine _escaped_fragments_ URL'sinden sitenin statik bir sürümünü alır ve dizine ekler.
Pushstate URL'ler normal bir URL'ye benziyor:
domain.com/path/to/resource
Fark, Angular'ın JavaScript'te onunla ilgili document.location değişikliğini keserek bunları sizin için ele almasıdır.
PushState URL'lerini kullanmak istiyorsanız (ve muhtemelen kullanıyorsanız) tüm eski karma tarzı URL'leri ve meta etiketleri çıkarır ve yapılandırma bloğunuzda HTML5 modunu etkinleştirmeniz yeterlidir.
Sitenizi test etme
Google Web Yöneticisi araçları artık bir URL'yi google olarak getirmenize ve Google'ın oluşturduğu sırada JavaScript oluşturmanıza olanak tanıyan bir araç içeriyor.
https://www.google.com/webmasters/tools/googlebot-fetch
Açısal Olarak PushState URL'leri oluşturma
Gerçek URL'leri # önek yerine Angular'da oluşturmak için $ locationProvider nesnenizde HTML5 modunu ayarlayın.
$locationProvider.html5Mode(true);
Sunucu Tarafı
Gerçek URL'ler kullandığınızdan, tüm geçerli URL'ler için aynı şablonun (ve önceden oluşturulmuş bazı içeriklerin) sunucunuz tarafından gönderilmesini sağlamanız gerekir. Bunu nasıl yapacağınız sunucu mimarinize bağlı olarak değişir.
Site haritası
Uygulamanız, fareyle üzerine gelme veya kaydırma gibi olağandışı gezinme biçimlerini kullanabilir. Google'ın uygulamanızı sürdürebilmesini sağlamak için, büyük olasılıkla, uygulamanızın yanıtladığı tüm URL'lerin basit bir listesi olan bir site haritası oluşturmanızı öneririm. Bunu varsayılan konuma (/ sitemap veya /sitemap.xml) yerleştirebilir veya Google'a web yöneticisi araçlarını kullanarak anlatabilirsiniz.
Yine de bir site haritasına sahip olmak iyi bir fikirdir.
Tarayıcı desteği
Pushstate IE10'da çalışır. Daha eski tarayıcılarda Angular otomatik olarak karma stili URL'lere geri döner
Bir demo sayfası
Aşağıdaki içerik, ön bileşimli pushstate URL kullanılarak oluşturulur:
http://html5.gingerhost.com/london
Doğrulanabileceği gibi, bu bağlantıda içerik dizine eklenir ve Google'da görünür.
404 ve 301 Üstbilgi durum kodlarını sunma
Arama motoru her istek için sunucunuza her zaman çarpacağından, sunucunuzdan başlık durum kodları sunabilir ve Google'ın bunları görmesini bekleyebilirsiniz.