¿Para qué sirve el shebang / hashbang (#!) En Facebook y las nuevas URL de Twitter?

Acabo de notar que las URL de Facebook largas y complicadas a las que estamos acostumbrados ahora se ven así:

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

Por lo que puedo recordar, a principios de este año era solo una cadena normal similar a un fragmento de URL (comenzando con #), sin el signo de exclamación. Pero ahora es un shebang o hashbang (#!), que anteriormente solo había visto en scripts de shell y scripts de Perl.

EL nuevo Twitter Las URL ahora también incluyen #! símbolos. Una URL de perfil de Twitter, por ejemplo, ahora se ve así:

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

¿Afecta la regulación de la #! ¿Ahora juegan un papel especial en las URL, como para un cierto marco Ajax o algo así, ya que las nuevas interfaces de Facebook y Twitter ahora son en gran parte Ajaxificadas?
¿Usar esto en mis URL beneficiaría a mi aplicación web de alguna manera?

preguntado el 09 de junio de 10 a las 16:06

Mmm. Tuve que buscar lo que shebang estaba... en.wikipedia.org/wiki/Shebang_%28Unix%29 -

FWIW, no se trata solo de scripts de shell y perl, sino que cualquier script se ejecuta en un sistema similar a Unix. La #! la línea le dice al shell cuál es el intérprete para ese script ... por supuesto, mi comentario no tiene nada que ver con Facebook o Twitter.

¡Gracias, Hacker News! (dejando como comentario para que no plantee mi pregunta, no veo la necesidad de hacerlo) -

El hashbang es glorificado por todas las razones equivocadas, rompe las mejores prácticas y destruye la posibilidad de una mejora progresiva y una degradación elegante. Utilice las otras soluciones que existen. -

Tenga en cuenta que en octubre de 2015 Google desaprobado el hashbang ellos introducieron en 2009! Entonces, para aplicaciones nuevas, ya no debería tener que hacer esto para SEO. En este momento solo hay un comentario sutil en blanco en la parte superior de las páginas de especificaciones de Google: "Esta recomendación está oficialmente obsoleta a partir de octubre de 2015". -

7 Respuestas

Esta técnica es ahora en desuso.

Este Acostumbrado a decirle a Google cómo indexar la página.

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

Esta técnica ha sido reemplazada principalmente por la capacidad de utilizar la API de historial de JavaScript que se introdujo junto con HTML5. Para una URL como www.example.com/ajax.html#!key=value, Google comprobará la URL www.example.com/ajax.html?_escaped_fragment_=key=value para obtener una versión del contenido que no sea AJAX.

Respondido el 15 de diciembre de 15 a las 01:12

¿Estás seguro de que eso es todo? A menudo encuentro que la carga de la página se cuelga en una URL shebang en Facebook (incluso después de muchas recargas), pero si eliminas manualmente el # !, funciona. Por no mencionar a menudo obtienes "1.5 URLs" (es decir, la URL anterior permanece y solo se le agrega la parte nueva (es decir, photo.php? id = ... dos veces, pero con diferentes identificadores). Por no mencionar que "#!" también se agrega a las URL de correo de Facebook, que probablemente no son (y no deberían ser) indexables. En cualquier caso encuentro el tinglado extremadamente molesto ya que parece ser la razón de tantos fallos de página en mi lenta línea de inicio. - pedéry

Que Facebook tenga errores no hace que esos errores sean culpa de dos caracteres en la URL. Si el sitio está codificado correctamente para comprenderlos y generarlos, las URL AJAX rastreables son bastante útiles. Muchas otras cosas en Facebook también fallan. - ceejayoz

@Pedery: Solo he visto ese problema con Facebook. Estoy de acuerdo, me sube por el muro (que no es de Facebook) todo el tiempo. - BoltClock ♦

En cuanto a los motores de búsqueda, tener una URL AJAX indexable no hace que la página se indexe más que tener una indexable no La URL de AJAX lo hace. Facebook usa este formato de URL para algo más que el beneficio de Google: también hace que las páginas a las que se accede a través de AJAX en Facebook se puedan marcar como favoritos cuando de otra manera no lo estarían. - ceejayoz

Para algunas advertencias interesantes, lea también este artículo: isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs - Michael Stum ♦

El octothorpe / number-sign / hashmark tiene un significado especial en una URL, normalmente identifica el nombre de una sección de un documento. El término exacto es que el texto que sigue al hash es el ancla parte de una URL. Si usa Wikipedia, verá que la mayoría de las páginas tienen una tabla de contenido y puede saltar a secciones dentro del documento con un ancla, como:

https://en.wikipedia.org/wiki/Alan_Turing#Early_computers_and_the_Turing_test

https://en.wikipedia.org/wiki/Alan_Turing identifica la página y Early_computers_and_the_Turing_test es el ancla. La razón por la que Facebook y otras aplicaciones impulsadas por Javascript (como la mía Madera y Piedras) usan anclas es que quieren hacer que las páginas se puedan marcar (como sugiere un comentario en esa respuesta) o apoyar el botón Atrás sin recargar toda la página desde el servidor.

Para admitir los marcadores y el botón Atrás, debe cambiar la URL. Sin embargo, si cambia la parte de la página (con algo como window.location = 'http://raganwald.com';) a una URL diferente o sin especificar un ancla, el navegador cargará la página completa desde la URL. Pruebe esto en la consola de JavaScript de Firebug o Safari. Carga http://minimal-github.gilesb.com/raganwald. Ahora en la consola de Javascript, escriba:

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

Verá que la página se actualiza desde el servidor. Ahora escribe:

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

¡Ajá! ¡Sin actualización de página! Tipo:

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

Todavía no hay actualización. Utilice el botón Atrás para ver que estas URL están en el historial del navegador. El navegador se da cuenta de que estamos en la misma página pero simplemente cambiando el ancla, por lo que no se vuelve a cargar. Gracias a este comportamiento, podemos tener una sola aplicación de Javascript que le parezca al navegador estar en una 'página' pero que tenga muchas secciones marcables que respeten el botón de retroceso. La aplicación debe cambiar el ancla cuando un usuario ingresa a diferentes 'estados', e igualmente si un usuario usa el botón de retroceso o un marcador o un enlace para cargar la aplicación con un ancla incluido, la aplicación debe restaurar el estado apropiado.

Así que ahí lo tienes: los anclajes proporcionan a los programadores de Javascript un mecanismo para crear aplicaciones que se puedan marcar, indexar y que se puedan usar con botones de retroceso. Esta técnica tiene un nombre: es una Interfaz de una sola página.

ps Hay un cuarto beneficio de esta técnica: cargar el contenido de la página a través de AJAX y luego inyectarlo en el DOM actual puede ser mucho más rápido que cargar una nueva página. Además del aumento de velocidad, se pueden realizar más trucos como cargar ciertas partes en segundo plano bajo el control del programador.

pps Dado todo eso, el 'bang' o signo de exclamación es un indicio más para el rastreador web de Google de que se puede cargar exactamente la misma página desde el servidor en una URL ligeramente diferente. Ver Ajax arrastrándose. Otra técnica es hacer que cada enlace apunte a una URL accesible al servidor y luego usar un Javascript discreto para cambiarlo a un SPI con un ancla.

Aquí está el enlace clave nuevamente: El manifiesto de interfaz de una sola página

Respondido el 01 de diciembre de 16 a las 19:12

"Sin embargo, una aplicación sin esta optimización sigue siendo rastreable si el rastreador web desea indexarla". Realmente no. El hash no se envía al servidor. - Chris pie ancho

solo para información: self.document.location.hash proporciona el valor de este hash - Kevin

El hash no se envía al servidor. ¡Buena atrapada! - Raganwald

Esta respuesta completa, aparte de los "pps" de un solo párrafo, es redundante. - Carreras de ligereza en órbita

@imaginonic: Llego tarde, pero tan perfectamente elaborado como está, el 90% no toca el #! aspecto de mi pregunta en absoluto. Por eso dijo que es redundante. La cantidad de votos positivos aquí probablemente se deba al alto tráfico cuando mi pregunta llegó a Hacker News junto con la mera longitud de esta respuesta. - BoltClock ♦

En primer lugar: soy el autor del Manifiesto de interfaz de una sola página citado por raganwald

Como ha explicado muy bien raganwald, el aspecto más importante del enfoque de interfaz de página única (SPI) utilizado en FaceBook y Twitter es el uso de hash # en URL

El personaje ! se agrega solo para propósitos de Google, esta notación es un "estándar" de Google para rastrear sitios web con uso intensivo de AJAX (en el extremo, sitios web de interfaz de página única). Cuando el rastreador de Google encuentra una URL con #! sabe que existe una URL convencional alternativa que proporciona el mismo "estado" de página, pero en este caso en tiempo de carga.

A pesar de #! La combinación es muy interesante para SEO, solo es compatible con Google (hasta donde yo sé), con algunos trucos de JavaScript puedes construir sitios web SPI compatibles con SEO para cualquier rastreador web (Yahoo, Bing ...).

El Manifiesto SPI y las demostraciones no utilizan el formato de Google de ! en hash, esta notación podría agregarse fácilmente y el rastreo de SPI podría ser aún más fácil (ACTUALIZAR: se usa la notación ¡ahora! y sigue siendo compatible con otros motores de búsqueda).

Echa un vistazo a esto tutoriales, es un ejemplo de un sitio ItsNat SPI simple, pero puede elegir algunas ideas para otros marcos, este ejemplo es compatible con SEO para cualquier rastreador web.

El problema difícil es generar cualquier (o seleccionado) "estado de página AJAX" como HTML simple para SEO, en ItsNat es muy fácil y automático, el mismo sitio está al mismo tiempo SPI o página basada para SEO (o cuando JavaScript está deshabilitado para accesibilidad). Con otros marcos web, siempre puede seguir el enfoque de doble sitio, un sitio está basado en SPI y otra página basada en SEO, por ejemplo, Twitter utiliza esta técnica de "doble sitio".

Respondido 10 Abr '11, 16:04

¿Qué pasa con el principio de mejora progresiva? El sitio web no debería fallar debido a JavaScript deshabilitado. Y créame, javascript está deshabilitado no solo en navegadores obsoletos, sino también por muchos usuarios conscientes de la seguridad a los que no les gusta ejecutar JS aleatorio. - Royter romano

Yo sería muy cuidadoso si está considerando adoptar esta convención de hashbang.

Una vez que haces hashbang, no puedes volver atrás. Este es probablemente el tema más complicado. La publicación de Ben planteó el punto de que cuando pushState se adopta más ampliamente, podemos dejar atrás los hashbangs y volver a las URL tradicionales. Bueno, el hecho es que no puedes. Anteriormente dije que las URL son para siempre, se indexan y archivan y generalmente se mantienen. Para agregar a eso, las URL geniales no cambian. No queremos desconectarnos de todos los enlaces valiosos a nuestro contenido. Si ha implementado URL hashbang en algún momento, entonces desea cambiarlas sin romper los enlaces, la única forma en que puede hacerlo es ejecutando algo de JavaScript en el documento raíz de su dominio. Para siempre. De ninguna manera es temporal, estás atrapado con eso.

Realmente quieres usa pushState en lugar de hashbangs, porque hacer que sus URL sean feas y posiblemente rotas, para siempre, es una desventaja colosal y permanente de los hashbangs.

Respondido 24 Feb 12, 21:02

Creo que su crítica a los hashbangs es válida, pero usar solo pushState como sustituto significa que perderíamos la capacidad de cargar contenido dentro de una aplicación de una sola página basada en la URL. Entonces, las URL no se pueden compartir. - Lucas

Tuve un problema similar en mi trabajo: comenzamos a usar Page.js (que usa pushState) para la navegación de una sola página, donde anteriormente usábamos Hasher y Crossroads (hash-bashed). Como resultado, necesitábamos rescatar caminos como /blah#foo/feep/baz?stuff=nonsense. El nuevo equivalente de ruta sería /blah/foo/feep/baz?stuff=nonsense (nota # reemplazada por /). Lo hice simplemente por tener una ruta en mi configuración que captó /blahy verificó si tenía, si es así, agregando el contenido de ese hash después de una barra. Rescatado. - Gert Sonderby

Para tener un buen seguimiento de todo esto, Twitter, uno de los pioneros de las URL de hashbang y la interfaz de una sola página, admitió que el sistema de hashbang era lento a largo plazo y que en realidad habían comenzado a revertir la decisión y regresar a enlaces de la vieja escuela.

El artículo sobre esto está aquí.

Respondido 29 Abr '19, 03:04

Siempre asumí el ! acaba de indicar que el fragmento hash que sigue correspondía a una URL, con ! tomando el lugar de la raíz o dominio del sitio. Podría ser cualquier cosa, en teoría, pero parece que a la API de rastreo AJAX de Google le gusta de esta manera.

El hash, por supuesto, solo indica que no se está produciendo una recarga de página real, así que sí, es para propósitos de AJAX. Editar: Raganwald hace un trabajo encantador al explicar esto con más detalle.

contestado el 25 de mayo de 12 a las 23:05

Las respuestas anteriores describen bien por qué y cómo se usa en Twitter y Facebook, lo que me perdí es una explicación de qué # hace por defecto ...

En una aplicación 'normal' (no una aplicación de una sola página) puede hacer el anclaje con hash a cualquier elemento que tenga una identificación colocando esa identificación de elementos en la URL después del hash #

Ejemplo:

(en Chrome) Haga clic en F12 or Ratón derecho y Inspect element

enter image description here

entonces toma id="answer-10831233" y agregar a la URL como sigue

https://stackoverflow.com/questions/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233

y obtendrá un enlace que salta a ese elemento en la página

¿Para qué sirve el shebang / hashbang (#!) En Facebook y las nuevas URL de Twitter?

Mediante el uso # de la manera descrita en las respuestas anteriores, está introduciendo un comportamiento conflictivo ... aunque no perdería el sueño por eso ... ya que Angular se convirtió en algo así como un estándar ...

Respondido 12 Jul 17, 04:07

La respuesta de Raganwald contiene la explicación que dijiste que te perdiste. Aun así, no veo cómo la pregunta se beneficia de un tutorial sobre cómo funciona #: la pregunta asume que el lector ya está familiarizado con los fragmentos de URL, y esa funcionalidad no es realmente relevante aquí de todos modos, excepto por su comentario sobre el comportamiento conflictivo. - BoltClock ♦

@BoltClock Hola BoltClock, pero sin explicar cuál es el comportamiento predeterminado, decir que 'entrará en conflicto' no le da al lector ninguna idea de lo que está en juego, qué tipo de funcionalidad se está perdiendo potencialmente ... Solo me gusta dar buenas respuestas con imágenes si Veo que falta algo que es lo más completo que puedo hacer ... - Matas Vaitkevicius

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.