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


743

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

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

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

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

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

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


130
Хм. Пришлось посмотреть, что shebangбыло ... en.wikipedia.org/wiki/Shebang_%28Unix%29
JYelton

32
FWIW, это не просто сценарии оболочки и Perl, но любой сценарий, запускаемый в Unix-подобной системе. # строка говорит оболочке, что интерпретатор для этого скрипта ... конечно, мой комментарий не имеет ничего общего с Facebook или Twitter
bluesmoon 16.10.10

3
Спасибо, Хакер Новости! (оставив в качестве комментария, чтобы я не поднял вопрос, не вижу необходимости)
BoltClock

15
Хэшбанг прославляется по всем неправильным причинам, он нарушает лучшие практики и уничтожает шансы на прогрессивное улучшение и постепенную деградацию. Пожалуйста, используйте другие решения там.
Balupton

2
Обратите внимание, что в октябре 2015 года Google отказался от хеш-бенга, который они представили в 2009 году ! Таким образом, для новых приложений вам больше не нужно делать это для SEO. Прямо сейчас есть только тонкое замечание в белом наверху страниц спецификации Google: «Эта рекомендация официально устарела с октября 2015 года».
Барт

Ответы:


483

Эта техника сейчас устарела .

Это раньше говорило 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-версию содержимого.


16
Вы уверены, что это все, что нужно? Я часто нахожу, что загрузка страницы зависает на URL-адресе в Facebook (даже после многократных перезагрузок), но если вы удалите #, вручную, это сработает. Не говоря уже о том, что вы часто получаете «1,5 URL» (т.е. старый URL остается, и к нему просто добавляется новая часть (т.е. photo.php? Id = ... дважды, но с разными идентификаторами). Не говоря уже о том, что » #! "также добавляется в URL-адреса Facebook-почты, которые, вероятно, не (и не должны) индексироваться. В любом случае я считаю, что шебанг очень раздражает, поскольку, по-видимому, это является причиной столь большого количества сбоев страниц на моей медленной домашняя линия
Педери

11
То, что в Facebook есть ошибки, не делает эти ошибки ошибкой двух символов в URL. Если сайт запрограммирован правильно, чтобы понять и сгенерировать их, просматриваемые URL AJAX очень удобны. Многие другие вещи на Facebook тоже не работают.
ceejayoz

15
@Pedery: я только видел эту проблему с Facebook. Я согласен, это все время заставляет меня подниматься (не на Facebook).
BoltClock

5
Что касается поисковых систем, наличие индексируемого URL AJAX не делает страницу индексируемой больше, чем индексируемый не AJAX URL. Facebook использует этот формат URL не только для выгоды Google - он также делает закладки, доступные через AJAX на Facebook, доступными для закладки, если в противном случае их не было бы.
ceejayoz

13
Для некоторых интересных предостережений, также прочитайте эту статью: isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs
Майкл

215

Особое значение в URL имеет знак octothorpe / number-sign / hashmark, который обычно идентифицирует имя раздела документа. Точный термин таков, что текст, следующий за хешем, является якорной частью 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. Попробуйте это в 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';

Ага! Нет обновления страницы! Тип:

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

Все еще нет обновления. Используйте кнопку назад, чтобы увидеть, что эти URL-адреса в истории браузера. Браузер замечает, что мы находимся на той же странице, но просто меняем привязку, поэтому он не перезагружается. Благодаря такому поведению у нас может быть одно Javascript-приложение, которое в браузере отображается на одной «странице», но имеет много закладок, которые относятся к кнопке «Назад». Приложение должно изменить привязку, когда пользователь входит в различные «состояния», а также, если пользователь использует кнопку «Назад», закладку или ссылку для загрузки приложения с включенной привязкой, приложение должно восстановить соответствующее состояние.

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

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

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

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


14
«Тем не менее, приложение без этой оптимизации все еще можно сканировать, если веб-сканер хочет его проиндексировать». На самом деле, нет. Хеш не отправляется на сервер.
Крис Бродфут

7
просто для информации: self.document.location.hashпредоставляет значение этого хеша
Кевин

12
Хеш не отправляется на сервер. Хороший улов!
Раганвальд

36
Весь этот ответ, за исключением одного абзаца "pps", является излишним.
Гонки легкости на орбите

21
@imaginonic: Я опаздываю, но отлично обработан , как это, 90% из них не коснуться #!аспекта моего вопроса вообще . Вот почему он сказал, что это излишне. Количество откликов здесь, вероятно, связано с большим трафиком, когда мой вопрос добрался до Hacker News в сочетании с одной лишь длиной ответа.
BoltClock

111

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


3
Как насчет принципа прогрессивного усиления? Сайт не должен аварийно завершать работу из-за отключенного JavaScript. И поверьте мне, javascript отключен не только в устаревших браузерах, но и многими пользователями, которые знают о безопасности и не любят запускать случайные JS.
Роман Ройтер

88

Я был бы очень осторожен, если вы планируете принять эту конвенцию.

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

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


Я думаю, что ваша критика hashbangs верна, но использование только pushState в качестве замены означает, что мы потеряем способность загружать контент в одностраничном приложении на основе URL. Таким образом, URL не могут быть разделены.
Люк

У меня была похожая проблема в моей работе - мы привыкли использовать Page.js (который использует pushState) для одностраничной навигации, где ранее мы использовали Hasher и Crossroads (hash-bashed). В результате нам нужно было спасать пути вроде /blah#foo/feep/baz?stuff=nonsense. Новый эквивалент пути будет /blah/foo/feep/baz?stuff=nonsense(примечание # заменено на /). Я сделал это просто, имея в своей настройке маршрут, который перехватывал /blahи проверял, имеет ли он has, если да, добавляя содержимое этого хеша после косой черты. Спасено.
Герт Сендерби

16

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

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


9

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

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


-2

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

В «обычном» (не одностраничном приложении) вы можете сделать привязку hashк любому элементу с идентификатором, поместив этот идентификатор элемента в 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?

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


2
Ответ Раганвальда содержит объяснение, которое вы сказали, что пропустили. Несмотря на это, я не понимаю, как этот вопрос извлекает пользу из учебника о том, как работает # - этот вопрос предполагает, что читатель уже знаком с фрагментами URL-адресов, и эта функциональность здесь не имеет никакого значения, за исключением вашего замечания о конфликтующем поведении ,
BoltClock

@BoltClock Привет, BoltClock, но без объяснения того, что такое поведение по умолчанию, говорящее, что «это будет конфликтовать», не дает читателю никакого представления о том, что поставлено на карту, какая функциональность может быть потеряна ... Я просто хотел бы дать хорошие ответы с картинками, если Я вижу, что чего-то не хватает, настолько полного, насколько я могу их сделать ...
Матас Вайткявичюс,
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.