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

Я только что заметил, что длинные запутанные 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-адресах полезным для моего веб-приложения?

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

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

Особое значение в 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 с привязкой.

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

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

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

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

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

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

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

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

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

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

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