Что такое shebang/hashbang (#!) В Facebook и новые URL-адреса Twitter?

Ответ 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.

Ответ 2

Знак octothorpe/number-sign/hashmark имеет особое значение в 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 and Stones) используют якоря, это то, что они хотят сделать страницы закладок (как предложено путем комментария к этому ответу) или поддерживать кнопку "Назад" без перезагрузки всей страницы с сервера.

Чтобы поддержать закладку и кнопку "Назад" , вам нужно изменить URL-адрес. Однако, если вы измените часть страницы (с чем-то вроде window.location = 'http://raganwald.com';) на другой URL-адрес или без указания привязки, браузер загрузит всю страницу из URL-адреса. Попробуйте это в консоли Firebug или Safari Javascript. Загрузите 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 механизм для создания закладок, индексируемых и удобных для обратной связи приложений. Этот метод имеет имя: Одиночный интерфейс страницы.

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

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

Здесь снова ссылка: Манифест интерфейса одиночной страницы

Ответ 3

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

Как хорошо объяснил raganwald, наиболее важным аспектом подхода Single Page Interface (SPI), используемого в FaceBook и Twitter, является использование хэша # в URL-адресах

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

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

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

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

Ответ 7

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

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

Пример:

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

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

/info/12030/whats-the-shebanghashbang-in-facebook-and-new-twitter-urls-for

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

Что такое shebang/hashbang (#!) в Facebook и новые URL-адреса Twitter для?

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