Для чого «shebang / hashbang» (#!) У Facebook та нові URL-адреси Twitter?

Я щойно помітив, що довгі звичні URL-адреси Facebook, до яких ми звикли зараз, виглядають так:

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

Наскільки я можу пригадати, на початку цього року це була лише звичайна URL-адреса, що нагадує фрагмент (починаючи з #), без знаків оклику. Але тепер це шебанг чи хешбанг ( #!), які я раніше бачив лише у скриптах оболонки та скриптах Perl.

У нових Twitter Тепер URL - адреса також має ті #!символи. Наприклад, URL-адреса профілю Twitter, наприклад, виглядає так:

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

Чи #!відіграє зараз якусь особливу роль у URL-адресах, як-от для певної рамки Ajax чи щось подібне, оскільки нові інтерфейси Facebook і Twitter значною мірою відмінені?
Чи використовує це в моїх URL-адресах будь-яким чином користь моїй веб-програмі?

Зараз ця техніка застаріла .

Це використовується , щоб повідомити Google , як індексувати сторінку.

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

Ця методика в основному була витіснена можливістю використання API історії JavaScript, який був введений поряд з HTML5. Для такої URL-адреси www.example.com/ajax.html#!key=valueGoogle перевірить URL-адресу, www.example.com/ajax.html?_escaped_fragment_=key=valueщоб отримати вміст, що не є AJAX.

Октоторп / знак-знак / хешмак має особливе значення в 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є якорем. Причиною того, що Facebook та інші програми, керовані JavaScript (наприклад, мої власні Wood & Stones ) використовують якорі, полягає в тому, що вони хочуть зробити сторінки закладками (як це запропоновано коментарем до цієї відповіді) або підтримати кнопку "назад", не завантажуючи всю сторінку з сервер .

Для підтримки закладки та кнопки "назад" потрібно змінити 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';

Ага! Немає оновлення сторінки! Тип:

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

Досі немає оновлення. За допомогою кнопки "Назад" переконайтеся, що ці URL-адреси є в історії веб-переглядачів. Браузер помічає, що ми знаходимося на одній сторінці, але просто змінюємо якір, щоб він не перезавантажувався. Завдяки такій поведінці ми можемо мати єдину програму Javascript, яка, як видається, у браузері знаходиться на одній «сторінці», але має багато розділів, що відзначають закладки, які поважають кнопку «назад». Програма повинна змінити якір, коли користувач вводить різні "стани", і якщо користувач використовує кнопку "назад" або закладку або посилання для завантаження програми з доданим якорем, програма повинна відновити відповідний стан.

Отож, у вас це є: якір надає програмістам Javascript механізм створення додатків, що дозволяють використовувати закладки, що індексуються та зворотних кнопок. Ця методика має назву: це інтерфейс однієї сторінки .

ps Існує четверта перевага цієї методики: Завантаження вмісту сторінки через AJAX та введення її в поточний DOM може бути набагато швидшим, ніж завантаження нової сторінки. Окрім збільшення швидкості, під контролем програміста можна виконувати подальші фокуси, такі як завантаження певних ділянок у фоновому режимі.

pps Враховуючи все це, "удар" або знак оклику - це ще один натяк веб-сканеру Google про те, що таку саму сторінку можна завантажити з сервера за дещо іншою URL-адресою. Дивіться повзання Ajax . Інша методика полягає в тому, щоб зробити кожну точку посилання на доступну серверу URL-адресу, а потім використовувати ненав’язливий Javascript, щоб змінити його на SPI з якорем.

Ось ще ключове посилання: Маніфест інтерфейсу єдиної сторінки

Перш за все: я автор "Маніфесту єдиної сторінки з інтерфейсом", цитованого Раганвальдом

Як дуже добре пояснив raganwald, найважливішим аспектом підходу Single Page Interface (SPI), який використовується у FaceBook та Twitter, є використання хешу #в URL-адресах

Символ !додається лише для цілей Google, це позначення є "стандартом" Google для сканування веб-сайтів, що інтенсивно працюють на AJAX (у крайніх веб-сайтах інтерфейсу однієї сторінки). Коли сканер Google знаходить URL-адресу, #!він знає, що існує альтернативна звичайна URL-адреса, що забезпечує ту саму сторінку "state", але в цьому випадку під час завантаження.

Незважаючи на #!комбінацію, це дуже цікаво для SEO, підтримується лише Google (наскільки я знаю), за допомогою деяких хитрощів JavaScript ви можете створити веб-сайти SPI SEO, сумісні для будь-якого веб-сканера (Yahoo, Bing ...).

Маніфест SPI і демонстрації не використовують формат Google !у хешах, це позначення можна легко додати, а сканування SPI може бути ще простіше (ОНОВЛЕНО: зараз! Нотація використовується і залишається сумісною з іншими пошуковими системами).

Погляньте на цей підручник , це приклад простого сайту ItsNat SPI, але ви можете вибрати деякі ідеї для інших фреймворків. Цей приклад є SEO сумісним для будь-якого веб-сканера.

Важка проблема полягає в створенні будь-якого (або вибраного) "стану сторінки AJAX" як простого HTML для SEO, в ItsNat це дуже просто і автоматично, той самий сайт знаходиться в той же час SPI або сторінка для SEO (або коли JavaScript відключений для доступності). З іншими веб-рамками ви завжди можете дотримуватися подвійного підходу до веб-сайту, один сайт заснований на SPI, а інший на основі SEO, наприклад, Twitter використовує цю техніку "подвійний сайт".

Я був би дуже обережним, якщо ви розглядаєте можливість прийняти цю конвенцію про хешбанг.

Отримавши хешбанг, ти вже не можеш повернутися. Це, мабуть, найголовніше питання. У посту Бен висунуто, що коли pushState більш широко прийнятий, ми можемо залишити хеш-баги позаду і повернутися до традиційних URL-адрес. Ну, насправді, ви не можете. Раніше я заявляв, що URL-адреси є назавжди, вони індексуються та архівуються і, як правило, зберігаються навколо. Щоб додати до цього, круті URL-адреси не змінюються. Ми не хочемо відключати себе від усіх цінних посилань на наш вміст. Якщо ви реалізували URL-адреси хешбангу в будь-який момент, тоді хочете змінити їх, не порушуючи посилання, єдиний спосіб це зробити, запустівши деякий JavaScript у кореневому документі вашого домену. Назавжди. Це жодним чином не тимчасове, ви до цього застрягли.

Ви дійсно хочете використовувати pushState замість хешбагів , тому що зробити ваші URL-адреси некрасивими та, можливо, зламаними - назавжди - це колосальний та постійний недолік хеш-багів.

Щоб добре прослідкувати все це, Twitter - один із піонерів URL-адреси хашбанга та односторінкового інтерфейсу - визнав, що система хешбангу була повільною в довгостроковій перспективі, і вони насправді почали змінювати рішення і повертатися до старі шкільні посилання.

Стаття про це тут.

Я завжди вважав, що !щойно вказано, що фрагмент хешу, який слідував, відповідає URL-адресі, !займаючи місце кореня сайту або домен. Теоретично це може бути що завгодно, але, схоже, Google AJAX Crawling API так подобається.

Звичайно, хеш просто вказує на те, що не відбувається реального перезавантаження сторінки, так що так, це для AJAX. Редагувати: Раганвальд робить чудову роботу, пояснюючи це більш детально.

Відповіді вище добре описують, чому і як це використовується у Twitter і facebook, що я пропустив - це пояснення, що #робить за замовчуванням ...

У "звичайному" (не на одній програмі сторінки) ви можете зробити прив’язку hashдо будь-якого елемента, який має ідентифікатор, помістивши цей елемент 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?

Використовуючи #спосіб, описаний у відповідях вище, ви вводите суперечливу поведінку ... хоча я б не втрачав сон над нею ... оскільки Кутовий став дещо стандартним ....