Ce qui ' s le tralala/hashbang (#!) sur Facebook et nouvelles Twitter URL pour ?

Question

J'ai juste remarqué que la longue, compliquée Facebook Url que nous en avons l'habitude maintenant ressembler à ceci:

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

Aussi loin que je me souviens que, plus tôt cette année, elle est juste normale URL-fragment-comme chaîne de caractères (en commençant par #), sans le point d'exclamation. Mais maintenant, c'est un beau spectacle ou hashbang (#!), que j'ai déjà vu dans des scripts shell et Perl.

Le nouveau Twitter Url désormais aussi caractéristique de l' #! symboles. Un profil Twitter de l'URL, par exemple, ressemble maintenant à ceci:

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

N' #! maintenant jouer un certain rôle spécial dans l'Url, comme pour un certain Ajax ou quelque chose puisque le nouveau Facebook et Twitter interfaces sont maintenant largement Ajaxified? En utilisant ce dans mon Url de mon application Web de quelque façon?

Answer 1

Cela indique à Google Comment indexer la page.

https://Developers.google.com/webmasters/Ajax-Crawling/

Answer 2

Le octothorphe/nombre de signe/hashmark a une signification particulière dans une URL, il s'identifie normalement le nom d'une section d'un document. Le précis du terme, c'est que le texte qui suit le hachage est l' ancrage de la partie d'une URL. Si vous utilisez Wikipédia, vous verrez que la plupart des pages de table des matières et vous pouvez passer à des sections dans le document avec une ancre, tels que:

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

https://secure.wikimedia.org/wikipedia/en/wiki/Alan_Turing identifie la page et Early_computers_and_the_Turing_test est le point d'ancrage. La raison que Facebook et autres Javascript applications (comme mon propre Bois Et Pierres) utiliser des ancres est qu'ils veulent faire des pages bookmarkable (comme le suggère un commentaire sur cette réponse) ou appuyer sur le bouton de retour sans recharger la page entière à partir du serveur.

Afin de soutenir la mise en favori et le bouton de retour, vous avez besoin de changer l'URL. Toutefois, si vous modifiez la portion de la page (avec quelque chose comme window.location = 'http://raganwald.com';) vers une autre URL ou sans spécifier un point d'ancrage, le navigateur charge la page entière à partir de l'URL. Essayez ceci dans Firebug ou Safari la console Javascript. Charge http://minimal-github.gilesb.com/raganwald. Maintenant dans la console Javascript, tapez:

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

Vous verrez l'actualisation de la page à partir du serveur. Maintenant, tapez:

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

Aha! Pas de rafraîchir la page! Type:

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

Toujours pas de rafraîchissement. Utilisez le bouton précédent pour voir que ces Url sont dans l'historique du navigateur. Le navigateur d'avis que nous sommes sur la même page, mais simplement de changer le point d'ancrage, de sorte qu'il ne recharge pas. Grâce à ce comportement, nous pouvons avoir un seul Javascript de l'application qui s'affiche le navigateur sur une page, mais à avoir de nombreux bookmarkable sections qui respectent le bouton retour. La demande doit modifier l'ancrage lorsque l'utilisateur entre les différents "états", et de même, si un utilisateur utilise le bouton retour ou un signet ou un lien pour charger l'application avec un point d'ancrage inclus, la demande doit restaurer l'état approprié.

Donc là vous l'avez: les Ancres de fournir aux programmeurs Javascript avec un mécanisme pour le faire bookmarkable, indexable, et le dos-bouton-friendly applications. Cette technique a un nom: C'est une Seule Page de l'Interface.

p.s. Il y a un quatrième avantage de cette technique: la page de Chargement du contenu via AJAX et ensuite l'injecter dans le DOM actuel peut être beaucoup plus rapide que le chargement d'une nouvelle page. En plus de l'augmentation de la vitesse, d'autres des astuces comme le chargement de certaines parties de l'arrière-plan peut être effectuée dans le programmeur.

p.p.s. Étant donné tout cela, le "bang" ou un point d'exclamation est un indice de Google web crawler qui a la même page peut être chargé à partir du serveur à un peu différente de l'URL. Voir Exploration Ajax. Une autre technique est de faire de chaque lien pointe vers un serveur accessible par l'URL, puis utiliser Javascript discret pour le transformer en un SPI avec une ancre.

Voici le lien de nouveau: La Page Unique de l'Interface Manifeste

Answer 3

Tout d'abord: je suis l'auteur de la Seule Page de l'Interface Manifeste cité par raganwald

Comme raganwald a très bien expliqué, l'aspect le plus important de la Page Unique de l'Interface (SPI) - l'approche utilisée dans FaceBook et Twitter, c'est l'utilisation de hachage # dans les Url

Le caractère ! est ajouté seulement pour Google, cette notation est un Google "standard" pour l'analyse des sites web intensive sur AJAX (dans l'extrême Seule Page de l'Interface web sites). Quand Google robot trouve une URL avec #! il sait qu'une alternative classiques URL existe en offrant la même page "état", mais dans ce cas sur les temps de chargement.

Malgré #! combinaison est très intéressant pour le RÉFÉRENCEMENT, n'est pris en charge par Google (que je sache), avec quelques astuces JavaScript, vous pouvez construire SPI sites web SEO compatible pour n'importe quel navigateur web (Yahoo, Bing...).

Le SPI Manifeste et démonstrations de ne pas utiliser Google format de ! dans de la cendre, cette notation pourrait être facilement ajoutés et SPI ramper pourrait être encore plus facile (mise à JOUR: maintenant ! la notation est utilisé et reste compatible avec les autres moteurs de recherche).

Jetez un oeil à ce tutoriel, est un exemple d'un simple ItsNat SPI site mais vous pouvez prendre quelques idées pour d'autres cadres, cet exemple est SEO compatible pour n'importe quel navigateur web.

Le problème difficile est de générer n'importe quel (ou choisi) "page AJAX état" au format HTML pour le RÉFÉRENCEMENT, dans ItsNat est très facile et automatique, le même site est dans le même temps SPI ou de la page de base pour le RÉFÉRENCEMENT (ou lorsque le JavaScript est désactivé pour l'accessibilité). Avec d'autres frameworks web, vous pouvez toujours suivre le double de site d'approche, un site est en SPI base et une autre page de base pour le RÉFÉRENCEMENT, par exemple Twitter utilise ce "double site" technique.

Answer 4

Je serais très prudent si vous envisagez d'adopter cette hashbang convention.

Une fois que vous hashbang, vous ne pouvez pas revenir en arrière. C'est probablement la question la plus collante. Ben le post de mettre en avant le point que lorsque pushState est de plus en plus largement adoptée, nous pouvons laisser hashbangs derrière et revenir à la traditionnelle Url. Eh bien, le fait est que vous ne pouvez pas. Plus tôt, j'ai dit que les URLs sont toujours, qu'ils sont indexés et archivés et en général autour de. Ajouter à cela, cool Url ne change pas. Nous ne voulons pas nous déconnecter de nous-mêmes à partir de tous les liens précieux à notre contenu. Si vous avez mis en œuvre hashbang Url à tout moment alors que vous souhaitez les modifier sans rupture des liens la seule façon de le faire est par l'exécution de JavaScript sur le document racine de votre domaine. Pour toujours. C'est en aucune façon temporaire, vous êtes coincé avec elle.

Vous voulez vraiment utiliser pushState au lieu de hashbangs, parce que faire de vos Url laid et éventuellement cassé -- pour toujours, est colossale et permanente à la baisse de hashbangs.

Answer 5

Pour avoir un bon suivi de tous les ce, Twitter - l’un des pionniers de l’hashbang URL et single-page-interface - a admis que le système hashbang a été lent à long terme et qu’ils ont effectivement commencé qui a infirmé le jugement et le retour à la vieille école liens.

Voici l’article à ce sujet.