shebang / hashbang (#!) ใน Facebook และ URL Twitter ใหม่เป็นอย่างไร

ฉันเพิ่งสังเกตเห็นว่า URL Facebook ที่ซับซ้อนและยาวเหยียดซึ่งเราคุ้นเคยในตอนนี้มีลักษณะดังนี้:

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

เท่าที่ฉันจำได้เมื่อต้นปีที่ผ่านมามันเป็นเพียงสตริงปกติที่มีส่วนคล้าย URL (เริ่มต้นด้วย#) โดยไม่มีเครื่องหมายอัศเจรีย์ แต่ตอนนี้มันเป็น shebang หรือ hashbang ( #!) ซึ่งก่อนหน้านี้ฉันเคยเห็นเฉพาะในเชลล์สคริปต์และสคริปต์ Perl เท่านั้น

ทวิตเตอร์ใหม่ URL ที่ตอนนี้ยังประกอบไปด้วย#!สัญลักษณ์ ตัวอย่างเช่น URL โปรไฟล์ Twitter ตอนนี้มีลักษณะดังนี้:

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

ไม่#!ตอนนี้มีบทบาทพิเศษบางอย่างใน URL ที่เหมือนกรอบอาแจ็กซ์บางอย่างหรือบางสิ่งบางอย่างตั้งแต่ใหม่ Facebook และ Twitter อินเตอร์เฟซที่ตอนนี้ Ajaxified ส่วนใหญ่?
การใช้สิ่งนี้ใน URL ของฉันมีประโยชน์ต่อเว็บแอปพลิเคชันของฉันหรือไม่?

เทคนิคนี้จะเลิกใช้ในขณะนี้

สิ่งนี้เคยบอกกับ Google ว่าจะจัดทำดัชนีหน้าเว็บอย่างไร

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

เทคนิคนี้ส่วนใหญ่ถูกแทนที่ด้วยความสามารถในการใช้ JavaScript History API ที่นำมาใช้ควบคู่กับ HTML5 สำหรับ URL ที่ต้องการwww.example.com/ajax.html#!key=valueGoogle จะตรวจสอบ URL www.example.com/ajax.html?_escaped_fragment_=key=valueเพื่อดึงเนื้อหาที่ไม่ใช่ AJAX

octothorpe / number-sign / hashmark มีความสำคัญเป็นพิเศษใน URL โดยปกติจะระบุชื่อของส่วนของเอกสาร คำที่แม่นยำคือข้อความที่ตามหลังแฮชคือส่วนที่ยึดเหนี่ยวของ URL หากคุณใช้ Wikipedia คุณจะเห็นว่าหน้าส่วนใหญ่มีสารบัญและคุณสามารถข้ามไปยังส่วนต่างๆภายในเอกสารด้วยจุดยึดเช่น:

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

https://en.wikipedia.org/wiki/Alan_Turingระบุหน้าและEarly_computers_and_the_Turing_testเป็นจุดยึด ด้วยเหตุผลที่ว่า Facebook และการใช้งานจาวาสคริขับเคลื่อนอื่น ๆ (เช่นของตัวเองไม้และหิน ) การใช้เบรกที่พวกเขาต้องการที่จะทำให้หน้าบุ๊คมาร์ค (แนะนำโดยความคิดเห็นในคำตอบนั้น) หรือสนับสนุนปุ่มย้อนกลับโดยไม่ต้องโหลดหน้าทั้งหมดจาก เซิร์ฟเวอร์

เพื่อรองรับบุ๊กมาร์กและปุ่มย้อนกลับคุณจำเป็นต้องเปลี่ยน URL อย่างไรก็ตามหากคุณเปลี่ยนส่วนของหน้า (มีลักษณะคล้ายwindow.location = 'http://raganwald.com';) เป็น URL อื่นหรือไม่ระบุสมอเบราว์เซอร์จะโหลดทั้งหน้าจาก URL ลองสิ่งนี้ในคอนโซล Javascript ของ Firebug หรือ Safari http://minimal-github.gilesb.com/raganwaldภาระ ในคอนโซล Javascript ให้พิมพ์:

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

คุณจะเห็นการรีเฟรชหน้าจากเซิร์ฟเวอร์ ตอนนี้พิมพ์:

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

Aha! ไม่มีการรีเฟรชหน้า! ประเภท:

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

ยังคงไม่รีเฟรช ใช้ปุ่มย้อนกลับเพื่อดูว่า URL เหล่านี้อยู่ในประวัติเบราว์เซอร์ เบราว์เซอร์สังเกตว่าเราอยู่ในหน้าเดียวกัน แต่เพิ่งเปลี่ยนสมอดังนั้นมันไม่โหลด ด้วยพฤติกรรมนี้เราสามารถมีแอปพลิเคชัน Javascript เดียวที่ปรากฏบนเบราว์เซอร์ให้อยู่ใน 'หน้า' หนึ่งหน้า แต่มีส่วนที่คั่นหน้าได้มากมายที่เกี่ยวข้องกับปุ่มย้อนกลับ แอปพลิเคชันต้องเปลี่ยนจุดยึดเมื่อผู้ใช้เข้าสู่ 'สถานะ' ที่แตกต่างกันและในทำนองเดียวกันหากผู้ใช้ใช้ปุ่มย้อนกลับหรือคั่นหน้าหรือลิงก์เพื่อโหลดแอปพลิเคชันที่มีสมอรวมอยู่ด้วย

คุณก็มีแล้ว: แองเคอร์ให้กลไกการเขียนโปรแกรมจาวาสคริปต์สำหรับการสร้างแอพพลิเคชั่นที่คั่นหน้าได้ดัชนีและปุ่มย้อนกลับ เทคนิคนี้มีชื่อ: มันเป็นหน้าจอเดียว

ps มีประโยชน์ที่สี่สำหรับเทคนิคนี้: การโหลดเนื้อหาของหน้าเว็บผ่าน AJAX แล้วฉีดลงใน DOM ปัจจุบันสามารถทำได้เร็วกว่าการโหลดหน้าใหม่ นอกเหนือจากการเพิ่มความเร็วแล้วเทคนิคเพิ่มเติมเช่นการโหลดบางส่วนในพื้นหลังสามารถทำได้ภายใต้การควบคุมของโปรแกรมเมอร์

pps จากทั้งหมดนั้นเครื่องหมาย 'bang' หรืออัศเจรีย์เป็นคำใบ้เพิ่มเติมของโปรแกรมรวบรวมข้อมูลเว็บของ Google ว่าหน้าเว็บเดียวกันนั้นสามารถโหลดได้จากเซิร์ฟเวอร์ด้วย URL ที่แตกต่างกันเล็กน้อย ดูอาแจ็กซ์รวบรวมข้อมูล อีกเทคนิคหนึ่งคือการทำให้แต่ละลิงก์ชี้ไปที่ URL ที่เข้าถึงได้จากเซิร์ฟเวอร์จากนั้นใช้ Javascript ที่ไม่สร้างความรำคาญเพื่อเปลี่ยนเป็น SPI ด้วยจุดยึด

นี่คือลิงค์สำคัญอีกครั้ง: ประกาศหน้าจอเดียว

ก่อนอื่น: ฉันเป็นผู้เขียน The Single Page Interface Manifesto ที่อ้างถึงโดย raganwald

ตามที่ raganwald ได้อธิบายไว้อย่างดีสิ่งสำคัญที่สุดของวิธีการใช้งานอินเทอร์เฟซหน้าเดียว (SPI) ที่ใช้ใน FaceBook และ Twitter คือการใช้แฮช#ใน URL

อักขระ!นี้ถูกเพิ่มเข้ามาเพื่อจุดประสงค์ของ Google เท่านั้นสัญลักษณ์นี้เป็น "มาตรฐาน" ของ Google สำหรับการรวบรวมข้อมูลเว็บไซต์ที่เน้น AJAX (ในเว็บไซต์ส่วนติดต่อแบบหน้าเดียวสุดขีด) เมื่อซอฟต์แวร์รวบรวมข้อมูลของ Google พบ URL พร้อม#!รู้ว่ามี URL ทั่วไปอื่นที่มีอยู่โดยระบุ "สถานะ" ของหน้าเดียวกัน แต่ในกรณีนี้เวลาโหลด

ทั้งๆที่มีการ#!รวมกันที่น่าสนใจมากสำหรับ SEO, ได้รับการสนับสนุนโดย Google เท่านั้น (เท่าที่ฉันรู้), ด้วยเทคนิคจาวาสคริปต์บางอย่างที่คุณสามารถสร้างเว็บไซต์ SPI SEO เข้ากันได้กับโปรแกรมรวบรวมข้อมูลเว็บใด ๆ (Yahoo, Bing ... )

การประกาศ SPI และการสาธิตไม่ใช้รูปแบบของ!แฮชของ Google สัญลักษณ์นี้สามารถเพิ่มได้อย่างง่ายดายและการรวบรวมข้อมูล SPI อาจทำได้ง่ายขึ้น (อัปเดต: ตอนนี้ใช้สัญกรณ์! และยังคงเข้ากันได้กับเครื่องมือค้นหาอื่น ๆ )

ลองดูบทช่วยสอนนี้เป็นตัวอย่างของเว็บไซต์ ItsNat SPI ที่เรียบง่าย แต่คุณสามารถเลือกแนวคิดสำหรับกรอบอื่น ๆ ได้ตัวอย่างนี้เข้ากันได้กับ SEO สำหรับโปรแกรมรวบรวมข้อมูลเว็บใด ๆ

ปัญหาที่ยากคือการสร้าง "หรือ AJAX page state" (หรือเลือก) เป็น HTML ธรรมดาสำหรับ SEO ใน ItsNat เป็นเรื่องง่ายและอัตโนมัติเว็บไซต์เดียวกันนั้นในเวลาเดียวกัน SPI หรือหน้าสำหรับ SEO (หรือเมื่อ JavaScript ถูกปิดการใช้งาน เพื่อการเข้าถึง) ด้วยเฟรมเวิร์กเว็บอื่น ๆ ที่คุณสามารถทำตามแนวทางไซต์สองครั้งไซต์หนึ่งใช้ SPI และอีกเพจที่ใช้ SEO เช่น Twitter ใช้เทคนิค "double site" นี้

ฉันจะระวังให้มากถ้าคุณกำลังพิจารณาที่จะใช้ระเบียบแบบแผนของ hashbang นี้

เมื่อคุณ hashbang คุณจะไม่สามารถย้อนกลับไป นี่อาจเป็นปัญหาที่เหนียวที่สุด โพสต์ของ Ben หยิบยกประเด็นที่ว่าเมื่อมีการใช้ pushState อย่างกว้างขวางมากขึ้นเราสามารถทิ้ง hashbangs ไว้และกลับสู่ URL ดั้งเดิม ความจริงก็คือคุณไม่สามารถ ก่อนหน้านี้ฉันแจ้งว่า URL นั้นตลอดไปพวกเขาจะได้รับการจัดทำดัชนีและเก็บถาวรและเก็บไว้โดยทั่วไป หากต้องการเพิ่ม URL นั้น URL ที่น่าสนใจจะไม่เปลี่ยนแปลง เราไม่ต้องการยกเลิกการเชื่อมต่อตัวเองจากลิงค์ที่มีค่าทั้งหมดไปยังเนื้อหาของเรา หากคุณติดตั้ง hashbang URL ไปแล้วคุณต้องการที่จะเปลี่ยนแปลงโดยไม่ทำลายลิงก์วิธีเดียวที่คุณสามารถทำได้คือการเรียกใช้จาวาสคริปต์บางอย่างในเอกสารรูทของโดเมนของคุณ ตลอดไป มันไม่มีทางชั่วคราวคุณติดอยู่กับมัน

คุณต้องการจริงๆ ใช้ pushState แทน hashbangsเพราะการทำให้ URL ของคุณน่าเกลียดและอาจเสียหาย - ตลอดไป - เป็นข้อเสียที่ใหญ่โตและถาวรสำหรับ hashbangs

เพื่อให้มีการติดตามที่ดีเกี่ยวกับสิ่งนี้ Twitter - หนึ่งในผู้บุกเบิกของ hashbang URL และอินเตอร์เฟสหน้าเดียว - ยอมรับว่าระบบ hashbang นั้นช้าในระยะยาวและพวกเขาได้เริ่มตัดสินใจและกลับสู่ ลิงค์โรงเรียนเก่า

บทความเกี่ยวกับเรื่องนี้อยู่ที่นี่

ฉันมักจะสันนิษฐาน!เพียงแค่ระบุว่าส่วนแฮชที่ตามมาตรงกับ URL ด้วย!การแทนที่รากของเว็บไซต์หรือโดเมน ในทางทฤษฎีอาจเป็นอะไรก็ได้ แต่ดูเหมือนว่า Google AJAX Crawling API จะชอบวิธีนี้

แน่นอนว่าแฮชเพียงแค่ระบุว่าไม่มีการโหลดหน้าจริงเกิดขึ้นดังนั้นใช่สำหรับวัตถุประสงค์ AJAX แก้ไข: Raganwald ทำงานที่น่ารักอธิบายเรื่องนี้อย่างละเอียดมากขึ้น

คำตอบข้างต้นอธิบายได้ดีว่าทำไมและวิธีการใช้งานบน Twitter และ Facebook สิ่งที่ฉันพลาดคือคำอธิบายสิ่งที่#โดยค่าเริ่มต้น ...

ใน 'ปกติ' (ไม่ใช่แอปพลิเคชันหน้าเดียว) คุณสามารถทำการยึดกับhashองค์ประกอบใด ๆ ที่มี id โดยการวาง id ขององค์ประกอบนั้นใน url หลังจากแฮช#

ตัวอย่าง:

(บน Chrome) คลิกF12หรือRihgt MouseและInspect element

จากนั้นจึงนำid="answer-10831233"ไปเพิ่มใน URL ดังต่อไปนี้

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

และคุณจะได้รับลิงค์ที่ข้ามไปยังองค์ประกอบนั้นในหน้า

shebang / hashbang (#!) ใน Facebook และ URL Twitter ใหม่เป็นอย่างไร

การใช้#วิธีการที่อธิบายไว้ในคำตอบข้างต้นคุณกำลังแนะนำพฤติกรรมที่ขัดแย้งกัน ... แม้ว่าฉันจะไม่นอนไม่หลับ ... เนื่องจากแองกูลาร์มันค่อนข้างมีมาตรฐาน ....