Untuk apa shebang / hashbang (#!) Di Facebook dan URL Twitter baru?

743

Saya baru saja memperhatikan bahwa URL Facebook yang panjang dan berbelit-belit yang biasa kita gunakan sekarang terlihat seperti ini:

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

Sejauh yang saya ingat, awal tahun ini hanya string normal seperti URL-fragmen (dimulai dengan #), tanpa tanda seru. Tapi sekarang ini shebang atau hashbang ( #!), yang sebelumnya hanya saya lihat di skrip shell dan skrip Perl.

The Twitter baru URL kini juga fitur #!simbol. URL profil Twitter, misalnya, sekarang terlihat seperti ini:

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

Apakah #!sekarang memainkan beberapa peran khusus dalam URL, seperti untuk kerangka kerja Ajax tertentu atau sesuatu karena antarmuka Facebook dan Twitter baru sekarang sebagian besar Ajaxified?
Apakah menggunakan ini di URL saya akan menguntungkan aplikasi Web saya dengan cara apa pun?

facebook url twitter fragment-identifier hashbang BoltClock
sumber

130

Hmm. Harus mencari apa shebangyang ... en.wikipedia.org/wiki/Shebang_%28Unix%29

JYelton

32

FWIW, ini bukan hanya skrip shell dan perl, tetapi skrip apa pun berjalan pada sistem seperti unix. #! line memberitahu shell apa penerjemah untuk naskah itu ... tentu saja, komentar saya tidak ada hubungannya dengan facebook atau twitter

bluesmoon

3

Terima kasih, Berita Peretas! (meninggalkan sebagai komentar jadi saya tidak menabrak pertanyaan saya, tidak melihat perlunya)

BoltClock

15

Hashbang dimuliakan untuk semua alasan yang salah, itu menghancurkan praktik terbaik dan menghancurkan kesempatan untuk peningkatan progresif dan degradasi anggun. Silakan gunakan solusi lain di luar sana.

balupton

2

Perhatikan bahwa per Oktober 2015 Google mencabut hashbang yang mereka perkenalkan pada tahun 2009 ! Jadi untuk aplikasi baru Anda tidak perlu lagi melakukan ini untuk SEO. Saat ini hanya ada komentar halus dalam warna putih di bagian atas halaman spesifikasi Google: "Rekomendasi ini secara resmi dihentikan pada Oktober 2015."

Bart

483

Teknik ini sekarang sudah usang .

Ini digunakan untuk memberi tahu Google cara mengindeks halaman.

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

Teknik ini sebagian besar telah digantikan oleh kemampuan untuk menggunakan JavaScript History API yang diperkenalkan bersama HTML5. Untuk URL seperti www.example.com/ajax.html#!key=value, Google akan memeriksa URL www.example.com/ajax.html?_escaped_fragment_=key=valueuntuk mengambil versi konten yang bukan AJAX.

ceejayoz
sumber

16

Apakah Anda yakin hanya itu yang ada di sana? Saya sering menemukan bahwa memuat halaman hang pada URL shebang di facebook (bahkan setelah banyak memuat ulang), tetapi jika Anda secara manual menghapus # !, itu berfungsi. Belum lagi Anda sering mendapatkan "1,5 URL" (yaitu URL lama tetap, dan baru saja ditambahkan bagian baru (yaitu photo.php? Id = ... dua kali, tetapi dengan id berbeda). Belum lagi bahwa " #! "juga ditambahkan ke URL facebook-mail, yang mungkin tidak (dan tidak seharusnya) tidak dapat diindeks. Bagaimanapun juga saya menemukan shebang sangat mengganggu karena tampaknya menjadi alasan untuk begitu banyak kesalahan halaman pada lambat home line

Pedery

11

Bahwa Facebook memiliki bug tidak membuat bug itu kesalahan dua karakter di URL. Jika situs dikodekan dengan benar untuk memahami dan menghasilkannya, URL AJAX yang dapat dijelajahi cukup berguna. Banyak hal lain di Facebook juga ikut terganggu.

ceejayoz

15

@Pedery: Saya hanya pernah melihat masalah itu dengan Facebook. Saya setuju, itu mendorong saya ke dinding (non-Facebook) sepanjang waktu.

BoltClock

5

Adapun mesin pencari, memiliki URL AJAX yang dapat diindekskan tidak membuat halaman mendapatkan diindeks lagi daripada memiliki URL AJAX yang tidak dapat diindeksasi . Facebook menggunakan format URL ini untuk lebih dari sekadar manfaat Google - itu juga membuat halaman diakses melalui AJAX di Facebook yang dapat di-bookmark padahal sebenarnya tidak.

ceejayoz

13

Untuk beberapa peringatan yang menarik, baca juga artikel ini: isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs

Michael Stum

215

Octothorpe / number-sign / hashmark memiliki arti khusus dalam URL, biasanya mengidentifikasi nama bagian dari dokumen. Istilah yang tepat adalah teks yang mengikuti hash adalah jangkar bagian dari URL. Jika Anda menggunakan Wikipedia, Anda akan melihat bahwa sebagian besar halaman memiliki daftar isi dan Anda dapat melompat ke bagian dalam dokumen dengan jangkar, seperti:

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

https://en.wikipedia.org/wiki/Alan_Turingmengidentifikasi halaman dan Early_computers_and_the_Turing_testjangkar. Alasan Facebook dan aplikasi lain yang digerakkan oleh Javascript (seperti Wood & Stones saya sendiri ) menggunakan jangkar adalah mereka ingin membuat halaman dapat di-bookmark (seperti yang disarankan oleh komentar pada jawaban itu) atau mendukung tombol kembali tanpa memuat ulang seluruh halaman dari server .

Untuk mendukung bookmark dan tombol kembali, Anda perlu mengubah URL. Namun, jika Anda mengubah bagian halaman (dengan sesuatu seperti window.location = 'http://raganwald.com';) ke URL yang berbeda atau tanpa menentukan jangkar, browser akan memuat seluruh halaman dari URL. Coba ini di Firebug atau konsol Javascript Safari. Muat http://minimal-github.gilesb.com/raganwald. Sekarang di konsol Javascript, ketik:

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

Anda akan melihat refresh halaman dari server. Sekarang ketik:

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

Aha! Tidak ada penyegaran halaman! Tipe:

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

Masih tidak ada penyegaran. Gunakan tombol kembali untuk melihat bahwa URL ini ada dalam riwayat peramban. Peramban memperhatikan bahwa kami berada di halaman yang sama tetapi hanya mengubah jangkar, sehingga tidak memuat ulang. Berkat perilaku ini, kami dapat memiliki satu aplikasi Javascript yang tampaknya peramban berada di satu 'halaman' tetapi memiliki banyak bagian yang dapat di-bookmark yang menghormati tombol kembali. Aplikasi harus mengubah jangkar ketika pengguna memasukkan 'negara' yang berbeda, dan juga jika pengguna menggunakan tombol kembali atau bookmark atau tautan untuk memuat aplikasi dengan jangkar termasuk, aplikasi harus mengembalikan keadaan yang sesuai.

Jadi begitulah: Jangkar memberikan programmer Javascript dengan mekanisme untuk membuat aplikasi bookmarkable, indexable, dan ramah tombol kembali. Teknik ini memiliki nama: Ini adalah Single Page Interface .

ps Ada manfaat keempat untuk teknik ini: Memuat konten halaman melalui AJAX dan kemudian menyuntikkannya ke DOM saat ini bisa jauh lebih cepat daripada memuat halaman baru. Selain peningkatan kecepatan, trik lebih lanjut seperti memuat bagian-bagian tertentu di latar belakang dapat dilakukan di bawah kendali programmer.

pps Dengan semua itu, tanda 'letusan' atau tanda seru adalah petunjuk lebih lanjut untuk perayap web Google bahwa laman yang persis sama dapat dimuat dari server dengan URL yang sedikit berbeda. Lihat Ajax Crawling . Teknik lain adalah membuat setiap titik tautan ke URL yang dapat diakses server dan kemudian menggunakan Javascript yang tidak mencolok untuk mengubahnya menjadi SPI dengan jangkar.

Inilah tautan utama lagi: Manifes Antarmuka Halaman Tunggal

raganwald
sumber

14

"Namun aplikasi tanpa optimasi ini masih dapat dijelajahi jika crawler web ingin mengindeksnya." Tidak juga. Hash tidak dikirim ke server.

Chris Broadfoot

7

hanya untuk informasi: self.document.location.hashmemberikan nilai hash ini

Kevin

12

Hash tidak dikirim ke server. Tangkapan yang bagus!

raganwald

36

Seluruh jawaban ini selain dari paragraf tunggal "pps" adalah mubazir.

Lightness Races dalam Orbit

21

@imaginonic: Saya terlambat, tetapi dibuat dengan sempurna, 90% tidak menyentuh #!aspek pertanyaan saya sama sekali . Itu sebabnya dia bilang itu berlebihan. Jumlah upvotes di sini kemungkinan karena lalu lintas tinggi ketika pertanyaan saya sampai ke Hacker News ditambah dengan panjang semata-mata dari jawaban ini.

BoltClock

111

Pertama-tama: Saya penulis The Single Page Interface Manifesto yang dikutip oleh raganwald

Seperti yang dijelaskan raganwald dengan sangat baik, aspek terpenting dari pendekatan Single Page Interface (SPI) yang digunakan dalam FaceBook dan Twitter adalah penggunaan hash #dalam URL.

Karakter !ditambahkan hanya untuk tujuan Google, notasi ini adalah "standar" Google untuk merayapi situs web intensif di AJAX (di situs web Antarmuka Halaman Tunggal ekstrim). Ketika perayap Google menemukan URL dengan #!itu tahu bahwa URL konvensional alternatif ada memberikan halaman "negara" yang sama tetapi dalam kasus ini pada waktu buka.

Meskipun #!kombinasi sangat menarik untuk SEO, hanya didukung oleh Google (sejauh yang saya tahu), dengan beberapa trik JavaScript Anda dapat membangun situs web SPI SEO yang kompatibel untuk perayap web apa pun (Yahoo, Bing ...).

Manifesto dan demo SPI tidak menggunakan format !hash Google, notasi ini dapat dengan mudah ditambahkan dan perayapan SPI bahkan lebih mudah (PEMBARUAN: sekarang! Notasi digunakan dan tetap kompatibel dengan mesin pencari lainnya).

Lihatlah tutorial ini , adalah contoh dari situs ItsNat SPI sederhana tetapi Anda dapat memilih beberapa ide untuk kerangka kerja lain, contoh ini kompatibel dengan SEO untuk perayap web apa pun.

Masalahnya adalah membuat (atau memilih) "keadaan halaman AJAX" apa pun sebagai HTML biasa untuk SEO, di ItsNat sangat mudah dan otomatis, situs yang sama dalam SPI yang sama atau halaman yang berbasis SEO (atau ketika JavaScript dinonaktifkan) untuk aksesibilitas). Dengan kerangka kerja web lain Anda bisa mengikuti pendekatan situs ganda, satu situs berbasis SPI dan halaman lain berbasis SEO, misalnya Twitter menggunakan teknik "situs ganda" ini.

jranranz
sumber

3

Bagaimana dengan prinsip peningkatan progresif? Situs web tidak boleh crash gagal karena JavaScript dinonaktifkan. Dan percayalah, javascript dinonaktifkan tidak hanya di browser yang usang tetapi juga oleh banyak pengguna yang sadar keamanan yang tidak suka mengeksekusi JS acak.

Roman Royter

88

Saya akan sangat berhati-hati jika Anda mempertimbangkan untuk mengadopsi konvensi hashbang ini.

Setelah hashbang, Anda tidak bisa kembali. Ini mungkin masalah yang paling sulit. Posting Ben mengemukakan titik bahwa ketika pushState lebih banyak diadopsi maka kita dapat meninggalkan hashbangs belakang dan kembali ke URL tradisional. Sebenarnya, Anda tidak bisa. Sebelumnya saya menyatakan bahwa URL selamanya, mereka diindeks dan diarsipkan dan umumnya disimpan. Untuk menambahkannya, URL keren tidak berubah. Kami tidak ingin memutuskan hubungan kami dari semua tautan berharga ke konten kami. Jika Anda telah menerapkan URL hashbang di titik mana pun maka ingin mengubahnya tanpa memutus tautan, satu-satunya cara Anda dapat melakukannya adalah dengan menjalankan beberapa JavaScript pada dokumen root domain Anda. Selama-lamanya. Sama sekali tidak sementara, Anda terjebak dengannya.

Anda benar-benar ingin menggunakan pushState alih-alih hashbangs , karena membuat URL Anda jelek dan mungkin rusak - selamanya - adalah kerugian besar dan permanen untuk hashbangs.

Jeff Atwood
sumber

Saya pikir kritik Anda terhadap hashbang valid, tetapi hanya dengan menggunakan pushState sebagai gantinya berarti kami akan kehilangan kemampuan untuk memuat konten dalam aplikasi satu halaman berdasarkan URL. Jadi URL tidak dapat dibagikan.

Luke

Saya memiliki masalah serupa dalam pekerjaan saya - kami telah menggunakan Page.js (yang menggunakan pushState) untuk navigasi satu halaman, di mana sebelumnya kami menggunakan Hasher dan Crossroads (hash-bashed). Akibatnya, kami perlu menyelamatkan jalur seperti /blah#foo/feep/baz?stuff=nonsense. Setara jalur baru akan menjadi /blah/foo/feep/baz?stuff=nonsense(catatan # digantikan oleh /). Saya melakukan itu hanya dengan memiliki rute di setup saya yang menangkap /blahdan memeriksa apakah itu memiliki, jika demikian, menambahkan konten hash setelah slash. Menyelamatkan.

Gert Sønderby

16

Untuk memiliki tindak lanjut yang baik tentang semua ini, Twitter - salah satu pelopor dari URL hashbang dan antarmuka satu halaman - mengakui bahwa sistem hashbang lambat dalam jangka panjang dan bahwa mereka sebenarnya sudah mulai membalikkan keputusan dan kembali ke tautan sekolah lama.

Artikel tentang ini ada di sini.

kingmaple
sumber

9

Saya selalu mengasumsikan !hanya menunjukkan bahwa fragmen hash yang diikuti sesuai dengan URL, dengan !menggantikan root situs atau domain. Secara teori, ini bisa berupa apa saja, tetapi tampaknya Google AJAX Crawling API menyukainya dengan cara ini.

Hash, tentu saja, hanya menunjukkan bahwa tidak ada reload halaman nyata yang terjadi, jadi ya, itu untuk keperluan AJAX. Sunting: Raganwald melakukan pekerjaan yang bagus untuk menjelaskan hal ini secara lebih rinci.

Alan H.
sumber

-2

Jawaban di atas menjelaskan dengan baik mengapa dan bagaimana digunakan di twitter dan facebook, apa yang saya lewatkan adalah penjelasan apa yang #dilakukan secara default ...

Pada 'normal' (bukan aplikasi halaman tunggal), Anda dapat melakukan anchoring dengan hashelemen apa pun yang memiliki id dengan menempatkan elemen id itu di url setelah hash#

Contoh:

(di Chrome) Klik F12atau Rihgt MousedanInspect element

lalu ambil id="answer-10831233"dan tambahkan ke url seperti berikut

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

dan Anda akan mendapatkan tautan yang melompat ke elemen itu di laman

Untuk apa shebang / hashbang (#!) Di Facebook dan URL Twitter baru?

Dengan menggunakan #dengan cara yang dijelaskan dalam jawaban di atas Anda memperkenalkan perilaku yang bertentangan ... meskipun saya tidak akan kehilangan tidur ... karena Angular itu menjadi agak standar ....

Matas Vaitkevicius
sumber

2

Jawaban raganwald berisi penjelasan yang Anda katakan Anda lewatkan. Meski begitu, saya tidak melihat bagaimana manfaat pertanyaan dari tutorial tentang cara # bekerja - pertanyaan mengasumsikan pembaca sudah akrab dengan fragmen URL, dan fungsionalitas itu tidak benar-benar relevan di sini, kecuali untuk komentar Anda tentang perilaku yang bertentangan .

BoltClock

@BoltClock Hai BoltClock, tetapi tanpa menjelaskan apa perilaku standar yang mengatakan bahwa 'itu akan bertentangan' tidak memberikan pembaca ide apa yang dipertaruhkan, fungsionalitas apa yang berpotensi hilang ... Saya hanya ingin memberikan jawaban yang bagus dengan gambar jika Saya melihat ada sesuatu yang hilang yang selengkap yang saya bisa buat ...

Matas Vaitkevicius

Untuk apa shebang / hashbang (#!) Di Facebook dan URL Twitter baru?

Jawaban: