Facebook'taki shebang / hashbang (#!) Ve yeni Twitter URL'leri ne için?

Şimdilik alıştığımız uzun, kıvrık Facebook URL'lerinin şu şekilde göründüğünü fark ettim:

http://www.facebook.com/example.profile#!/pages/Another-Page/123456789012345

Hatırlayabildiğim kadarıyla, bu yılın başlarında #ünlem işareti olmadan sadece normal bir URL parçası benzeri bir dizedir (ile başlıyor ). Ama şimdi #!daha önce sadece kabuk komut dosyalarında ve Perl komut dosyalarında gördüğüm bir shebang veya hashbang ( ).

Yeni Heyecan URL'ler artık özelliği #!semboller. Örneğin bir Twitter profili URL'si şimdi şuna benziyor:

http://twitter.com/#!/BoltClock

Does #!yeni Facebook ve Twitter arayüzleri artık büyük ölçüde Ajaxified beri artık belli Ajax çerçevesi veya bir şey için gibi URL'lerin bazı özel rol oynar?
Bunu URL'lerimde kullanmak Web uygulamama herhangi bir şekilde fayda sağlar mı?

Bu teknik artık kullanımdan kaldırılmıştır .

Bu , Google'a sayfayı nasıl dizine ekleyeceğini söylerdi.

https://developers.google.com/webmasters/ajax-crawling/

Bu teknik çoğunlukla HTML5 ile birlikte sunulan JavaScript Geçmişi API'sini kullanma yeteneği ile desteklenmiştir. www.example.com/ajax.html#!key=valueGoogle gibi bir URL www.example.com/ajax.html?_escaped_fragment_=key=valueiçin, içeriğin AJAX olmayan bir sürümünü getirmek üzere URL'yi kontrol edecektir .

Oktothorpe / number-sign / hashmark'ın bir URL'de özel bir önemi vardır, normalde bir belgenin bir bölümünün adını tanımlar. Tam terim, karmayı izleyen metnin bir URL'nin bağlantı kısmı olmasıdır. Wikipedia kullanıyorsanız, çoğu sayfanın içindekiler tablosu olduğunu görürsünüz ve belgedeki çapa içeren bölümlere atlayabilirsiniz, örneğin:

https://en.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test

https://en.wikipedia.org/wiki/Alan_Turingsayfayı tanımlar ve Early_computers_and_the_Turing_testbağlantıdır. Facebook ve diğer Javascript güdümlü uygulamaların (kendi Ahşap ve Taşlarım gibi ) çapa kullanmasının nedeni, sayfaları yer imi haline getirmek (bu cevaba yapılan bir yorumda önerildiği gibi) yapmak veya sayfanın tamamını yeniden yüklemeden geri düğmesini desteklemek istemeleridir . sunucu .

Yer işaretini ve geri düğmesini desteklemek için URL'yi değiştirmeniz gerekir. Bununla birlikte, sayfa bölümünü (gibi window.location = 'http://raganwald.com';bir şeyle ) farklı bir URL'ye değiştirir veya bir bağlantı belirtmeden, tarayıcı URL'den tüm sayfayı yükler. Bunu Firebug veya Safari'nin Javascript konsolunda deneyin. Yük http://minimal-github.gilesb.com/raganwald. Şimdi Javascript konsoluna şunu yazın:

window.location = 'http://minimal-github.gilesb.com/raganwald';

Sayfanın sunucudan yenilendiğini göreceksiniz. Şimdi şunu yazın:

window.location = 'http://minimal-github.gilesb.com/raganwald#try_this';

Aha! Sayfa yenileme yok! Tür:

window.location = 'http://minimal-github.gilesb.com/raganwald#and_this';

Hala yenileme yok. Bu URL'lerin tarayıcı geçmişinde olduğunu görmek için geri düğmesini kullanın. Tarayıcı aynı sayfada olduğumuzu ancak sadece çapayı değiştirdiğimizi fark ettiğinden yeniden yüklemiyor. Bu davranış sayesinde, tarayıcıya tek bir 'sayfada' görünen ancak geri düğmesine saygı duyan birçok yer imi eklenebilir bölüm gibi görünen tek bir Javascript uygulamamız olabilir. Kullanıcı farklı 'durumlara' girdiğinde uygulamanın bağlantı noktasını değiştirmesi gerekir ve aynı şekilde bir kullanıcı bağlantıyı ekleyerek uygulamayı yüklemek için geri düğmesini veya bir yer imini ya da bağlantıyı kullanırsa, uygulamanın uygun durumu geri yüklemesi gerekir.

İşte burada: Bağlantılar, Javascript programcılarına yer imi eklenebilir, dizine eklenebilir ve geri düğmesi dostu uygulamalar yapmak için bir mekanizma sağlar. Bu tekniğin bir adı vardır: Tek Sayfa Arayüzüdür .

ps Bu tekniğin dördüncü bir yararı var: Sayfa içeriğini AJAX aracılığıyla yüklemek ve ardından mevcut DOM'a enjekte etmek yeni bir sayfa yüklemekten çok daha hızlı olabilir. Hız artışına ek olarak, belirli bölümleri arka plana yüklemek gibi başka hileler programcının kontrolü altında gerçekleştirilebilir.

pps Tüm bunlar göz önüne alındığında, 'patlama' veya ünlem işareti Google'ın web tarayıcısına, aynı sayfanın sunucudan biraz farklı bir URL'den yüklenebileceğine dair başka bir ipucudur. Bkz. Ajax Tarama . Başka bir teknik, her bağlantıyı sunucu tarafından erişilebilen bir URL'ye işaret etmek ve ardından onu çapa ile bir SPI'ye değiştirmek için göze batmayan Javascript kullanmaktır.

İşte anahtar bağlantı: Tek Sayfa Arabirimi Manifestosu

Her şeyden önce: raganwald tarafından belirtilen Tek Sayfa Arabirimi Manifestosunun yazarıyım

Raganwald'ın çok iyi açıkladığı gibi, FaceBook ve Twitter'da kullanılan Tek Sayfa Arabirimi (SPI) yaklaşımının en önemli yönü #URL'lerde karma kullanımıdır

Karakter !yalnızca Google amaçları için eklenir, bu gösterim AJAX (yoğun Tek Sayfa Arayüzü web sitelerinde) yoğun web sitelerini taramak için bir Google "standardı" dır. Google'ın tarayıcısı bir URL bulduğunda #!, aynı sayfa "durumunu" sağlayan ancak bu durumda yükleme süresinde alternatif bir geleneksel URL'nin bulunduğunu bilir.

#!Kombinasyonu rağmen SEO için çok ilginç, sadece Google tarafından desteklenmektedir (bildiğim kadarıyla), bazı JavaScript hileler ile herhangi bir web tarayıcısı (Yahoo, Bing ...) uyumlu SPI web siteleri SEO inşa edebilirsiniz.

SPI Manifestosu ve demoları Google'ın !karma biçimini kullanmaz , bu gösterim kolayca eklenebilir ve SPI taraması daha da kolay olabilir (GÜNCELLEME: şimdi! Gösterim kullanılır ve diğer arama motorlarıyla uyumlu kalır).

Bu eğiticiye bir göz atın , basit bir ItsNat SPI sitesinin bir örneğidir, ancak diğer çerçeveler için bazı fikirler seçebilirsiniz, bu örnek herhangi bir web tarayıcısı için SEO uyumludur.

Zor problem, SEO için düz HTML olarak herhangi bir (veya seçilen) "AJAX sayfa durumu" oluşturmaktır, ItsNat'ta çok kolay ve otomatiktir, aynı site aynı zamanda SPI veya SEO tabanlı sayfa (veya JavaScript devre dışı bırakıldığında) erişilebilirlik için). Diğer web çerçeveleri ile çift site yaklaşımını takip edebilirsiniz, bir site SPI tabanlıdır ve SEO için başka bir sayfa, örneğin Twitter bu "çift site" tekniğini kullanır.

Ben olacağını çok dikkatli bu hashbang sözleşmenin kabul düşünüyorsanız.

Hashbang yaptıktan sonra geri dönemezsiniz. Bu muhtemelen en yapışkan mesele. Ben'in gönderisi, pushState'in daha yaygın olarak kabul edildiğinde hashbang'ları geride bırakıp geleneksel URL'lere geri dönebileceğimiz noktasını ortaya koydu. Aslında, yapamazsınız. Daha önce URL'lerin sonsuza kadar olduğunu belirtmiştim, dizine eklenmiş ve arşivlenmişler ve genellikle etrafta tutulurlar. Buna eklemek için harika URL'ler değişmez. Kendimizi içeriğimizin tüm değerli bağlantılarından ayırmak istemiyoruz. Herhangi bir noktada hashbang URL'leri uyguladıysanız, bağlantıları kırmadan değiştirmek için tek yapmanız gereken alan adınızın kök belgesinde bazı JavaScript çalıştırmaktır. Sonsuza dek. Hiçbir şekilde geçici değil, onunla sıkışıp kaldın.

Gerçekten, hashbang'lar yerine pushState'i kullanmak istiyorsunuz , çünkü URL'lerinizi çirkin ve muhtemelen bozuk hale getirmek - sonsuza dek - hashbang'ların muazzam ve kalıcı bir dezavantajı.

Tüm bunları iyi takip edebilmek için, hashbang URL'lerinin ve tek sayfalık arayüzün öncülerinden biri olan Twitter, hashbang sisteminin uzun vadede yavaş olduğunu ve kararı tersine çevirmeye ve geri dönmeye başladıklarını itiraf etti. eski okul bağlantıları.

Bununla ilgili makale burada.

Ben her zaman !sadece belirtilen karma parçasının !site kök veya etki alanı yerini alarak bir URL'ye karşılık geldiğini varsaydım . Teoride herhangi bir şey olabilir, ancak Google AJAX Tarama API'sı bu şekilde seviyor gibi görünüyor.

Karma, elbette, gerçek bir sayfa yeniden yüklemesinin gerçekleşmediğini gösterir, bu yüzden evet, AJAX amaçları içindir. Edit: Raganwald bunu daha ayrıntılı olarak açıklayan hoş bir iş çıkarıyor.

Yukarıdaki cevaplar neden ve nasıl twitter ve facebook'ta kullanıldığını iyi açıklar, kaçırdığım şey #varsayılan olarak ne yaptığının açıklamasıdır ...

'Normal' bir sayfada (tek sayfalık bir uygulamada değil) hash, bu öğelerin kimliğini karma işleminden sonra url'ye yerleştirerek kimliği olan herhangi bir öğeye sabitleme yapabilirsiniz#

Misal:

(Chrome'da) F12veya simgesini tıklayın Rihgt MouseveInspect element

sonra id="answer-10831233"aşağıdaki gibi url'yi alıp ekleyin

/programming/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233

sayfadaki öğeye atlayan bir bağlantı alırsınız

Facebook'taki shebang / hashbang (#!) Ve yeni Twitter URL'leri ne için?

#Yukarıdaki cevaplarda anlatılan bir şekilde kullanarak çelişkili davranışlar ortaya koyuyorsunuz ... üzerinde uykuyu yitirmememe rağmen ... Açısal beri bir standart haline geldi ....