Для чего нужен символ shebang / hashbang (#!) В Facebook и новые URL Twitter?

Question

Я только что заметил, что длинные запутанные URL-адреса Facebook, к которым мы привыкли, теперь выглядят так:

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

Насколько я помню, ранее в этом году это была обычная строка, похожая на фрагмент URL (начиная с #), без восклицательного знака. Но теперь это shebang или hashbang (#!), которые я ранее видел только в сценариях оболочки и Perl.

Новые URL Twitter теперь также содержат символы #!. Например, URL-адрес профиля в Twitter теперь выглядит следующим образом:

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

Играет ли #! какую-то особую роль в URL-адресах, например, для определенной платформы Ajax или чего-то еще, поскольку новые интерфейсы Facebook и Twitter теперь в основном Ajaxified? Будет ли использование этого в моих URL-адресах полезным для моего веб-приложения?

Answer 1

Этот метод теперь устарел .

Этот раньше сообщал Google, как индексировать страницу.

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

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

Answer 2

В URL-адресе особое значение имеет знак октофор / число-знак / хэш, обычно он идентифицирует имя раздела документа. Точный термин заключается в том, что текст, следующий за хешем, является частью URL anchor . Если вы используете Википедию, вы увидите, что большинство страниц имеют оглавление, и вы можете переходить к разделам в документе с помощью якоря, например:

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. Попробуйте это в Firebug или консоли Javascript в 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-приложение, которое в браузере отображается на одной «странице», но имеет много закладок, которые относятся к кнопке «Назад». Приложение должно изменить привязку, когда пользователь входит в разные «состояния», а также, если пользователь использует кнопку «Назад», закладку или ссылку для загрузки приложения с включенной привязкой, приложение должно восстановить соответствующее состояние.

Итак, у вас есть: Anchors предоставляют программистам Javascript механизм создания приложений, которые можно добавлять в закладки, индексировать и использовать кнопки назад. Эта техника имеет название: одностраничный интерфейс .

p.s. У этого метода есть четвертое преимущество: загрузка содержимого страницы через AJAX с последующим внедрением его в текущий DOM может быть намного быстрее, чем загрузка новой страницы. Помимо увеличения скорости, под управлением программиста могут выполняться дополнительные приемы, такие как загрузка определенных частей в фоновом режиме.

p.p.s. Учитывая все это, «взрыв» или восклицательный знак - это еще один намек для поискового робота Google, что точно такую ​​же страницу можно загрузить с сервера по несколько другому URL-адресу. См. Ajax Crawling . Другой метод заключается в том, чтобы каждая ссылка указывала на URL-адрес, доступный для сервера, а затем использовала ненавязчивый Javascript для преобразования его в SPI с привязкой.

Снова ключевая ссылка: Манифест об одностраничном интерфейсе

Answer 3

Прежде всего: я являюсь автором Манифеста об одностраничных интерфейсах, цитируемого raganwald

Как хорошо объяснил Раганвальд, наиболее важным аспектом подхода одностраничного интерфейса (SPI), используемого в FaceBook и Twitter, является использование хеша # в URL-адресах

Символ ! добавляется только для целей Google, эта нотация является «стандартом» Google для сканирования веб-сайтов, интенсивно использующих AJAX (на экстремальных веб-сайтах с одностраничным интерфейсом). Когда сканер Google находит URL с #!, он знает, что существует альтернативный обычный URL, предоставляющий то же «состояние» страницы, но в этом случае во время загрузки.

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

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

Взгляните на это учебное пособие , являющееся примером простого SPI-сайта ItsNat, но вы можете выбрать некоторые идеи для других платформ, этот пример совместим с SEO для любого веб-сканера.

Сложная проблема состоит в том, чтобы сгенерировать любое (или выбранное) «состояние страницы AJAX» в виде простого HTML для SEO, в ItsNat очень просто и автоматически, тот же сайт в то же время является SPI или страницей, основанной на SEO (или когда JavaScript отключен для доступности). С другими веб-фреймворками вы всегда можете использовать подход с двумя сайтами, один сайт основан на SPI, а другой - на SEO, например, Twitter использует эту технику «двойной сайт».

Answer 4

Я буду очень осторожен , если вы планируете принять это соглашение о хэш-банге.

После того, как вы сделаете хэш-банг, вы не сможете вернуться назад. Этоэто, наверное, самая липкая проблема.В посте Бена было высказано мнение, что когда pushState будет более широко распространен, мы можем оставить хэш-банг и вернуться к традиционным URL-адресам.Ну, факт, ты не можешь.Ранее я заявлял, что URL-адреса вечны, они индексируются, архивируются и обычно хранятся.Чтобы добавить к этому, классные URL не меняются.Мы не хотим отсоединяться от всех ценных ссылок на наш контент.Если вы внедрили URL-адреса hashbang в какой-то момент, то хотите изменить их, не прерывая ссылки, единственный способ сделать это - запустить JavaScript в корневом документе вашего домена.Навсегда.Это никоим образом не является временным, вы застряли с ним.

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

Answer 5

Чтобы быть в курсе всего этого, Twitter - один из пионеров URL-адресов и одностраничного интерфейса hashbang - признал, что система hashbang была медленной в долгосрочной перспективе и что они действительно начали отменять решение и возвращаясь к ссылкам старой школы.

Статья об этом здесь.

Answer 6

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

Хеш, конечно, просто указывает на то, что не происходит перезагрузки страницы, так что да, это для целей AJAX, Редактировать: Раганвальд делает прекрасную работу, объясняя это более подробно.

Answer 7

Ответы выше хорошо описывают, почему и как он используется в твиттере и фейсбуке, я пропустил объяснение того, что # делает по умолчанию ...

В «обычном» (не одностраничном приложении) вы можете сделать привязку с hash к любому элементу с идентификатором, поместив этот идентификатор элемента в URL после хеша #

Пример:

(на Chrome) Нажмите F12 или Rihgt Mouse и Inspect element

затем возьмите id="answer-10831233" и добавьте к URL, как показано ниже

/2463866/dlya-chego-nuzhen-simvol-shebang-hashbang-v-facebook-i-novye-url-twitteranswer-10831233

и вы получите ссылку, которая переходит на этот элемент на странице

Для чего нужен шебанг / хэшбанг (#!) В Facebook и новые URL Twitter?

Используя # способом, описанным в ответах выше, вы вводите противоречивое поведение ... хотя я бы не стал спать из-за этого ... так как Angular стал чем-то вроде стандарта ...