फेसबुक और नए ट्विटर URL के लिए Shebang / hashbang (#!) क्या है?

Question

मैंने अभी ध्यान दिया है कि लंबे, जटिल फेसबुक URL जिन्हें हम अब इस तरह देखने के लिए उपयोग कर रहे हैं:

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

जहाँ तक मुझे याद है, इस साल की शुरुआत में यह एक सामान्य यूआरएल-टुकड़ा-जैसा स्ट्रिंग (शुरुआत के साथ #) था, बिना विस्मयादिबोधक चिह्न के। लेकिन अब यह एक शेबंग या हैशबैंग ( #!) है, जिसे मैंने पहले केवल शेल स्क्रिप्ट और पर्ल स्क्रिप्ट में देखा है।

नई ट्विटर URL अब भी सुविधा #!प्रतीकों। उदाहरण के लिए, ट्विटर प्रोफाइल URL अब इस तरह दिखता है:

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

है #!अब एक निश्चित अजाक्स ढांचे या कुछ और के लिए जैसे URL में कुछ विशेष भूमिका निभाते हैं के बाद से नए फेसबुक और ट्विटर इंटरफेस अब काफी हद तक Ajaxified कर रहे हैं?
क्या मेरे URL में इसका उपयोग करने से मेरे वेब एप्लिकेशन को किसी भी तरह से लाभ होगा?

Comments

हम्म। देखने के लिए क्या shebangथा ... en.wikipedia.org/wiki/Shebang_%28Unix%29

— JYelton

एफडब्ल्यूआईडब्ल्यू, यह सिर्फ शेल और पर्ल स्क्रिप्ट नहीं है, बल्कि सिस्टम जैसी यूनिक्स पर चलने वाली कोई भी स्क्रिप्ट है। #! रेखा शेल को बताती है कि उस स्क्रिप्ट के लिए दुभाषिया क्या है ... निश्चित रूप से, मेरी टिप्पणी का फेसबुक या ट्विटर से कोई लेना-देना नहीं है

— ब्लूज़मून

धन्यवाद, हैकर न्यूज़! (एक टिप्पणी के रूप में छोड़ दें तो मैं अपने प्रश्न से टकराता नहीं हूं, इसकी आवश्यकता नहीं देखता)

— बोल्ट

हैशबैंग को सभी गलत कारणों से महिमामंडित किया जाता है, यह सर्वोत्तम प्रथाओं को तोड़ता है और प्रगतिशील वृद्धि और सुशोभित गिरावट के लिए अवसर को नष्ट करता है। कृपया अन्य समाधानों का उपयोग करें।

— बालुपटन

ध्यान दें कि अक्टूबर 2015 तक Google ने 2009 में पेश किए गए हैशबैंग को हटा दिया था ! तो नए अनुप्रयोगों के लिए अब आपको एसईओ के लिए ऐसा नहीं करना चाहिए। अभी Google के विशेष पृष्ठों में सबसे ऊपर सफेद रंग में केवल एक सूक्ष्म टिप्पणी है: "यह सिफारिश आधिकारिक तौर पर अक्टूबर 2015 तक की गई है।"

— बार्ट

Answer 1

इस तकनीक को अब हटा दिया गया है ।

यह करने के लिए इस्तेमाल पेज कैसे सूचकांक करने के लिए गूगल बताओ।

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

इस तकनीक को ज्यादातर HTML इतिहास एपीआई कि HTML5 के साथ पेश किया गया था का उपयोग करने की क्षमता द्वारा दबाया गया है। जैसे URL के लिए www.example.com/ajax.html#!key=value, Google www.example.com/ajax.html?_escaped_fragment_=key=valueसामग्री का एक गैर-AJAX संस्करण लाने के लिए URL की जाँच करेगा ।

Comments

क्या आप सुनिश्चित हैं कि यह सब वहाँ है? मुझे अक्सर पता चलता है कि पेज लोडिंग फेसबुक पर एक शेबंग URL पर लटका हुआ है (कई पुनः लोड के बाद भी), लेकिन अगर आप # को हटा दें! - यह काम करता है। उल्लेख नहीं करने के लिए आपको अक्सर "1.5 URL" मिलता है (यानी पुराना URL बना रहता है, और बस इसमें नया भाग जोड़ दिया गया है (यानी photo.php? Id = ... दो बार, लेकिन अलग-अलग आईडी के साथ)। ऐसा उल्लेख नहीं है । " #! "को फ़ेसबुक-मेल URL में भी जोड़ा जाता है, जो कि शायद (और नहीं होना चाहिए) अनुक्रमित है। किसी भी मामले में मुझे यह बहुत कष्टप्रद लगता है क्योंकि यह मेरी धीमी गति से इतने सारे पेज दोष का कारण लगता है। होम लाइन।

— पेड्री

उस फेसबुक में बग्स उन बगों को URL के दो वर्णों का दोष नहीं बनाते हैं। यदि साइट को समझने और उन्हें उत्पन्न करने के लिए ठीक से कोडित किया गया है, तो क्रॉल करने योग्य AJAX URL काफी उपयोगी हैं। फेसबुक पर अन्य चीजें बहुत गड़बड़ करती हैं।

— सिजॉयज

@Pedery: मैंने केवल उस मुद्दे को फेसबुक के साथ देखा है। मैं सहमत हूं, यह मुझे (गैर-फेसबुक) दीवार पर हर समय चलाता है।

— BoltClock

जैसा कि खोज इंजन के लिए, एक इंडेक्सेबल AJAX URL होने से पेज को इंडेक्सेबल नॉन AJAX URL होने से अधिक अनुक्रमित नहीं किया जाता है। Facebook इस URL प्रारूप का उपयोग केवल Google के लाभ से अधिक के लिए करता है - यह पेजों को AJAX के माध्यम से फेसबुक के माध्यम से पहुंच योग्य बनाता है, जब वे अन्यथा नहीं होंगे।

— सियजॉयज

: कुछ रोचक चेतावनियां के लिए, यह भी इस लेख को पढ़ने के isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs

— माइकल Stum

Answer 2

किसी URL में ऑक्टोथोरपे / नंबर-साइन / हैशमार्क का एक विशेष महत्व है, यह आम तौर पर किसी दस्तावेज़ के अनुभाग के नाम की पहचान करता है। सटीक शब्द यह है कि हैश के बाद का पाठ एक URL का एंकर हिस्सा है। यदि आप विकिपीडिया का उपयोग करते हैं, तो आप देखेंगे कि अधिकांश पृष्ठों में सामग्री की एक तालिका है और आप एक एंकर के साथ दस्तावेज़ के अनुभागों में कूद सकते हैं, जैसे:

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है और लंगर है। कारण यह है कि फेसबुक और अन्य जावास्क्रिप्ट-संचालित एप्लिकेशन (जैसे मेरे अपने लकड़ी और पत्थर ) एंकर का उपयोग करते हैं, वे पृष्ठों को बुकमार्क करने योग्य बनाना चाहते हैं (जैसा कि उस उत्तर पर एक टिप्पणी द्वारा सुझाया गया है) या पूरे पृष्ठ को फिर से लोड किए बिना बैक बटन का समर्थन करें सर्वर ।

बुकमार्क और बैक बटन का समर्थन करने के लिए, आपको URL बदलने की आवश्यकता है। हालाँकि, यदि आप पृष्ठ भाग (जैसे कुछ के साथ window.location = 'http://raganwald.com';) को किसी भिन्न URL में या किसी एंकर को निर्दिष्ट किए बिना बदल देते हैं, तो ब्राउज़र URL से पूरे पृष्ठ को लोड कर देगा। फायरबग या सफारी के जावास्क्रिप्ट कंसोल में यह कोशिश करें। भार http://minimal-github.gilesb.com/raganwald। अब जावास्क्रिप्ट कंसोल में टाइप करें:

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

आपको सर्वर से पृष्ठ ताज़ा दिखाई देगा। अब टाइप करें:

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

अहा! कोई पृष्ठ ताज़ा नहीं! प्रकार:

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

फिर भी कोई ताज़ा नहीं। यह देखने के लिए बैक बटन का उपयोग करें कि ये URL ब्राउज़र इतिहास में हैं। ब्राउज़र नोटिस करता है कि हम एक ही पेज पर हैं लेकिन सिर्फ एंकर बदल रहे हैं, इसलिए यह पुनः लोड नहीं होता है। इस व्यवहार के लिए धन्यवाद, हमारे पास एक एकल जावास्क्रिप्ट एप्लिकेशन हो सकता है जो ब्राउज़र पर एक 'पेज' पर दिखाई देता है, लेकिन कई बुकमार्क करने योग्य अनुभाग हैं जो बैक बटन का सम्मान करते हैं। उपयोगकर्ता द्वारा अलग-अलग 'राज्यों' में प्रवेश करने पर एप्लिकेशन को एंकर को बदलना होगा, और इसी तरह अगर कोई उपयोगकर्ता बैक बटन या बुकमार्क या लिंक का उपयोग करता है जिसमें एप्लिकेशन को एंकर के साथ लोड किया जाता है, तो एप्लिकेशन को उपयुक्त स्थिति को पुनर्स्थापित करना होगा।

इसलिए आपके पास यह है: एंकर जावास्क्रिप्ट प्रोग्रामर को बुकमार्क करने योग्य, इंडेक्सेबल और बैक-बटन-फ्रेंडली एप्लिकेशन बनाने के लिए एक तंत्र प्रदान करते हैं। इस तकनीक का एक नाम है: यह एक सिंगल पेज इंटरफ़ेस है ।

ps इस तकनीक का चौथा लाभ है: AJAX के माध्यम से पृष्ठ सामग्री लोड हो रही है और फिर इसे वर्तमान DOM में इंजेक्ट करने से नया पृष्ठ लोड करने की तुलना में बहुत तेज़ हो सकता है। गति में वृद्धि के अलावा, पृष्ठभूमि में कुछ भागों को लोड करने जैसे आगे के गुर प्रोग्रामर के नियंत्रण में किए जा सकते हैं।

pps सभी को देखते हुए, 'बैंग' या विस्मयादिबोधक चिह्न Google के वेब क्रॉलर के लिए एक और संकेत है कि ठीक उसी पृष्ठ को थोड़ा अलग URL पर सर्वर से लोड किया जा सकता है। अजाक्स क्रॉलिंग देखें । एक अन्य तकनीक प्रत्येक लिंक को सर्वर-सुलभ URL तक पहुंचाना है और फिर इसे लंगर के साथ SPI में बदलने के लिए विनीत जावास्क्रिप्ट का उपयोग करना है।

यहाँ फिर से महत्वपूर्ण लिंक है: सिंगल पेज इंटरफ़ेस मेनिफेस्टो

Comments

"हालांकि इस अनुकूलन के बिना एक एप्लिकेशन अभी भी क्रॉल करने योग्य है यदि वेब क्रॉलर इसे अनुक्रमित करना चाहता है।" ज़रुरी नहीं। हैश सर्वर पर नहीं भेजा जाता है।

— क्रिस ब्रॉडफुट

बस जानकारी के लिए: self.document.location.hashइस हैश का मूल्य प्रदान करता है

— केविन

हैश सर्वर पर नहीं भेजा जाता है। अच्छी पकड़!

— रगनवल्द

एकल-पैरा "pps" से अलग यह संपूर्ण उत्तर बेमानी है।

— ऑर्बिट

@imaginonic: मुझे देर हो रही है, लेकिन के रूप में पूरी तरह से के रूप में यह है, यह के 90% पर स्पर्श नहीं करता है गढ़ी #!मेरे सवाल के पहलू बिल्कुल । इसलिए उन्होंने कहा कि यह बेमानी है। जब मेरे सवाल ने हैकर की संख्या को बढ़ा दिया तो संभव है कि हैकर न्यूज ने इस उत्तर के अकेले ही लंबाई के साथ मिलकर हैकर न्यूज को बना दिया।

— BoltClock

Answer 3

सबसे पहले: मैं raganwald द्वारा उद्धृत सिंगल पेज इंटरफ़ेस मेनिफेस्टो का लेखक हूं

जैसा कि raganwald ने बहुत अच्छी तरह से समझाया है, फेसबुक और ट्विटर में प्रयुक्त सिंगल पेज इंटरफेस (SPI) दृष्टिकोण का सबसे महत्वपूर्ण पहलू #URL में हैश का उपयोग है

यह चरित्र !केवल Google उद्देश्यों के लिए जोड़ा गया है, यह नोटेशन AJAX (चरम सिंगल पेज इंटरफ़ेस वेब साइटों पर) गहन वेब साइटों को क्रॉल करने के लिए Google "मानक" है। जब Google का क्रॉलर एक URL पाता है#! उसे पता होता है कि एक वैकल्पिक पारंपरिक URL उसी पृष्ठ "स्थिति" को प्रदान करता है, लेकिन इस मामले में लोड समय पर।

इसके बावजूद #!संयोजन एसईओ के लिए बहुत दिलचस्प है, केवल Google द्वारा समर्थित है (जहां तक ​​मुझे पता है), कुछ जावास्क्रिप्ट चालों के साथ आप किसी भी वेब क्रॉलर (याहू, बिंग ...) के लिए एसपीआई वेब साइटों को एसईओ बना सकते हैं।

SPI मैनिफेस्टो और डेमो !, हैश में Google के प्रारूप का उपयोग नहीं करते हैं , इस अंकन को आसानी से जोड़ा जा सकता है और SPI क्रॉलिंग और भी आसान हो सकती है (अद्यतन: अभी! नोटेशन का उपयोग किया जाता है और अन्य खोज इंजनों के साथ संगत रहता है)।

इस ट्यूटोरियल पर एक नज़र डालें , एक सरल ItsNat SPI साइट का एक उदाहरण है, लेकिन आप अन्य फ्रेमवर्क के लिए कुछ विचार चुन सकते हैं, यह उदाहरण किसी भी वेब क्रॉलर के लिए एसईओ संगत है।

कठिन समस्या किसी भी (या चयनित) "AJAX पेज स्टेट" को SEO के लिए सादे HTML के रूप में उत्पन्न करने के लिए है, InNat बहुत आसान और स्वचालित है, वही साइट एसपीआई या पेज में एसईओ के लिए आधारित है (या जब जावास्क्रिप्ट अक्षम है पहुंच के लिए)। अन्य वेब फ्रेमवर्क के साथ आप कभी भी डबल साइट दृष्टिकोण का पालन कर सकते हैं, एक साइट एसपीआई आधारित है और दूसरा पेज एसईओ के लिए आधारित है, उदाहरण के लिए ट्विटर इस "डबल साइट" तकनीक का उपयोग करता है।

Comments

प्रगतिशील वृद्धि सिद्धांत के बारे में क्या? वेबसाइट अक्षम जावास्क्रिप्ट की वजह से विफल नहीं होनी चाहिए। और मुझ पर भरोसा करें, जावास्क्रिप्ट न केवल पुराने ब्राउज़रों में बल्कि कई सुरक्षा जागरूक उपयोगकर्ताओं द्वारा भी अक्षम है जो यादृच्छिक जेएस को निष्पादित करना पसंद नहीं करते हैं।

— रोमन रॉयटर

Answer 4

यदि आप इस हैशबैंग सम्मेलन को अपनाने पर विचार कर रहे हैं तो मैं बहुत सावधान रहूंगा।

एक बार आपके पास हैशबैंग, आप वापस नहीं जा सकते। यह शायद सबसे चिपचिपा मुद्दा है। बेन की पोस्ट ने यह बात सामने रखी कि जब पुशस्टैट को अधिक व्यापक रूप से अपनाया जाता है तो हम हैशबैंग को पीछे छोड़ सकते हैं और पारंपरिक यूआरएल पर वापस आ सकते हैं। ठीक है, तथ्य यह है, तुम नहीं कर सकते। पहले मैंने कहा था कि URL हमेशा के लिए होते हैं, वे अनुक्रमित और संग्रहीत होते हैं और आमतौर पर चारों ओर रखे जाते हैं। इसमें जोड़ने के लिए, कूल URL नहीं बदलते हैं। हम अपनी सामग्री के सभी मूल्यवान लिंक से खुद को डिस्कनेक्ट नहीं करना चाहते हैं। यदि आपने किसी भी बिंदु पर हैशबैंग URL लागू कर दिया है, तो लिंक को बिना तोड़कर बदलना चाहते हैं, जिस तरह से आप अपने डोमेन के रूट दस्तावेज़ पर कुछ जावास्क्रिप्ट चलाकर कर सकते हैं। सदैव। यह किसी भी तरह से अस्थायी नहीं है, आप इसके साथ फंस गए हैं।

आप वास्तव में हैशबैंग्स के बजाय पुशस्टेट का उपयोग करना चाहते हैं , क्योंकि आपके URL को बदसूरत और संभवतः टूट गया है - हमेशा के लिए - हैशबैंग्स के लिए एक विशाल और स्थायी नीचे है।

Comments

मुझे लगता है कि हैशबैंग की आपकी आलोचना वैध है, लेकिन विकल्प के रूप में सिर्फ पुशस्टेट का उपयोग करने का अर्थ है कि हम URL के आधार पर एकल पृष्ठ ऐप के भीतर सामग्री लोड करने की क्षमता खो देंगे। तो URLs साझा नहीं किए जा सकते हैं।

— ल्यूक

मुझे अपने काम में इसी तरह की समस्या थी - हमने सिंगल-पेज नेविगेशन के लिए Page.js (जो पुशस्टेट का उपयोग करता है) का उपयोग करने के लिए लिया है, जहां पहले हम हाशर और चौराहे (हैश-बीशेड) का उपयोग करते थे। नतीजतन, हमें जैसे रास्तों को बचाने की जरूरत थी /blah#foo/feep/baz?stuff=nonsense। नया पथ समतुल्य होगा /blah/foo/feep/baz?stuff=nonsense(नोट # द्वारा प्रतिस्थापित /)। मैंने बस अपने सेटअप में एक मार्ग होने से जो पकड़ा /blahऔर जाँच की कि क्या यह एक है, यदि ऐसा है, तो स्लैश के बाद उस हैश की सामग्री को जोड़ना। बचाया।

— गर्ट सोन्डरबी

Answer 5

इस सब के बारे में एक अच्छा फॉलो-अप करने के लिए, ट्विटर - हैशबैंग URL और सिंगल-पेज-इंटरफ़ेस के अग्रदूतों में से एक ने स्वीकार किया कि लंबे समय में हैशबैंग सिस्टम धीमा था और उन्होंने वास्तव में फैसले को उलटना शुरू कर दिया और वापस लौट आए। पुराने स्कूल लिंक।

इसके बारे में लेख यहाँ है।

Answer 6

मैंने हमेशा यह !संकेत दिया कि हैश टुकड़ा जो URL के अनुरूप था, !साइट रूट या डोमेन की जगह लेने के साथ । यह सिद्धांत में कुछ भी हो सकता है, लेकिन ऐसा लगता है कि Google AJAX क्रॉलिंग एपीआई इसे इस तरह से पसंद करता है।

बेशक, हैश केवल इंगित करता है कि कोई वास्तविक पृष्ठ पुनः लोड नहीं हो रहा है, हां, यह AJAX के उद्देश्यों के लिए है। संपादित करें: राग्नवल्ड एक सुंदर काम करता है जो इसे और अधिक विस्तार से समझाता है।

Answer 7

ऊपर दिए गए उत्तर अच्छी तरह से बताते हैं कि ट्विटर और फेसबुक पर इसका उपयोग क्यों और कैसे किया जाता है, मुझे जो याद आया वह #यह है कि डिफ़ॉल्ट रूप से क्या होता है ...

एक 'सामान्य' (एक पेज का आवेदन नहीं) पर आप hashकिसी भी ऐसे तत्व के साथ एंकरिंग कर सकते हैं, जिसके पास उस एलएच के बाद url में उस एलिमेंट आईडी को रखकर आईडी है।#

उदाहरण:

(क्रोम पर) पर क्लिक करें F12या Rihgt MouseऔरInspect element

तो ले लो id="answer-10831233"और निम्नलिखित की तरह url में जोड़ें

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

और आपको एक लिंक मिलेगा जो पेज पर उस तत्व को प्रिंट करता है

फेसबुक और नए ट्विटर URL के लिए Shebang / hashbang (#!) क्या है?

#ऊपर वर्णित उत्तरों में एक तरह से प्रयोग करके आप परस्पर विरोधी व्यवहार का परिचय दे रहे हैं ... हालाँकि मैं इस पर नहीं सोता ... क्योंकि कोणीय के बाद यह कुछ हद तक एक मानक बन गया ...।

Comments

raganwald के उत्तर में वह स्पष्टीकरण शामिल है जो आपने कहा था कि आप चूक गए हैं। फिर भी, मैं यह नहीं देखता कि प्रश्न कैसे ट्यूटोरियल पर लाभ देता है # कैसे काम करता है - प्रश्न मानता है कि पाठक पहले से ही URL टुकड़ों से परिचित है, और यह कार्यक्षमता वास्तव में वैसे भी प्रासंगिक नहीं है, जबकि परस्पर विरोधी व्यवहार के बारे में आपकी टिप्पणी के अलावा। ।

— BoltClock

@BoltClock Hi BoltClock, लेकिन बिना यह बताए कि डिफ़ॉल्ट व्यवहार क्या कह रहा है कि 'यह संघर्ष करेगा' पाठक को यह नहीं बताता कि दांव पर क्या है, संभवतः किस प्रकार की कार्यक्षमता खो रही है ... मैं सिर्फ चित्रों के साथ अच्छे उत्तर देना पसंद करता हूं अगर मैं देख रहा हूँ कि कुछ याद आ रहा है जो मुझे पूरा कर सकते हैं ...

— Matas Vaitkevicius