it-swarm-id.com

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

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 seperti URL-fragmen normal (dimulai dengan #), tanpa tanda seru. Tapi sekarang ini Shebang atau hashbang (#!), yang sebelumnya hanya saya lihat di skrip Shell dan skrip Perl.

URL Twitter bar sekarang juga menampilkan 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 bermanfaat bagi aplikasi Web saya?

735
BoltClock

Teknik ini sekarang tidak digunakan lagi .

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=value untuk mengambil versi konten yang bukan AJAX.

480
ceejayoz

Octothorpe/number-sign/hashmark memiliki arti khusus dalam URL, biasanya mengidentifikasi nama bagian dari suatu dokumen. Istilah tepatnya adalah teks yang mengikuti hash adalah jangkar dari suatu 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_Turing mengidentifikasi halaman dan Early_computers_and_the_Turing_test adalah jangkar. Alasan Facebook dan aplikasi lain yang digerakkan oleh Javascript (seperti milik saya Wood & Stones ) 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';) menjadi URL yang berbeda atau tanpa menentukan jangkar, peramban 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 halaman refresh dari server. Sekarang ketik:

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

Aha! Tidak ada refresh halaman! Mengetik:

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 memasuki '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 .

hal. 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.

p.p.s. Mengingat 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 Perayapan Ajax . 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

215
raganwald

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 keperluan Google, notasi ini adalah "standar" Google untuk merayapi situs web secara intensif pada AJAX (dalam situs web Antarmuka Halaman Tunggal ekstrim). Ketika perayap Google menemukan URL dengan #! ia mengetahui bahwa ada URL konvensional alternatif yang menyediakan halaman "status" 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 SPI situs web SEO yang kompatibel untuk perayap web apa pun (Yahoo, Bing. ..).

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

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

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

111
jmarranz

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

Setelah hashbang, Anda tidak dapat kembali. Ini mungkin masalah yang paling sulit. Posting Ben mengemukakan poin bahwa ketika pushState lebih banyak diadopsi maka kita dapat meninggalkan hashbangs belakang dan kembali ke URL tradisional. Faktanya adalah, Anda tidak bisa. Sebelumnya saya menyatakan bahwa URL selamanya, mereka diindeks dan diarsipkan dan umumnya disimpan. Untuk menambahkannya, mendinginkan URL tidak berubah. Kami tidak ingin melepaskan diri dari semua tautan berharga ke konten kami. Jika Anda telah mengimplementasikan 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 dari 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.

85
Jeff Atwood

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 lama-sekolah.

Artikel tentang ini ada di sini.

16
kingmaple

Saya selalu mengasumsikan ! hanya menunjukkan bahwa fragmen hash yang diikuti berkorespondensi 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 pemuatan ulang laman nyata yang terjadi, jadi ya, itu untuk keperluan AJAX. Sunting: Raganwald melakukan pekerjaan yang bagus untuk menjelaskan ini secara lebih rinci.

9
Alan H.