it-swarm.com.ru

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

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

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

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

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

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

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

735
BoltClock

Этот метод сейчас не рекомендуется .

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

480
ceejayoz

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

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

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

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

215
raganwald

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

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

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

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

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

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

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

111
jmarranz

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

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

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

85
Jeff Atwood

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

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

16
kingmaple

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

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

9
Alan H.