Para que serve o shebang / hashbang (#!) No Facebook e os novos URLs do Twitter?


743

Acabei de perceber que os URLs longos e complicados do Facebook com os quais estamos acostumados agora se parecem com isso:

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

Pelo que me lembro, no início deste ano, era apenas uma string normal de fragmento de URL (começando com #), sem o ponto de exclamação. Mas agora é um shebang ou hashbang ( #!), que eu só vi anteriormente em shell scripts e scripts Perl.

Os novos URLs do Twitter agora também apresentam os #!símbolos. Um URL de perfil do Twitter, por exemplo, agora se parece com isso:

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

Será que #!agora desempenham algum papel especial em URLs, como para um determinado framework Ajax ou algo assim desde que as novas interfaces Facebook e Twitter estão agora em grande parte ajaxified?
Usar isso em meus URLs beneficiaria meu aplicativo da Web de alguma forma?


130
Hmm. Tinha que olhar o que shebangera ... en.wikipedia.org/wiki/Shebang_%28Unix%29
JYelton

32
FWIW, não são apenas scripts shell e perl, mas qualquer script executado em um sistema como o unix. O #! linha de conta a shell o que o intérprete para que o script é ... claro, o meu comentário não tem nada a ver com facebook ou twitter
bluesmoon

3
Obrigado, Hacker News! (deixando como um comentário para que eu não bata a minha pergunta, não vejo a necessidade de)
BoltClock

15
O hashbang é glorificado por todas as razões erradas, quebra as práticas recomendadas e destrói a chance de aprimoramento progressivo e degradação graciosa. Por favor, use as outras soluções disponíveis.
balupton

2
Observe que em outubro de 2015 o Google descontinuou o hashbang que eles introduziram em 2009 ! Portanto, para novos aplicativos, você não precisa mais fazer isso no SEO. No momento, há apenas uma observação sutil em branco na parte superior das páginas de especificações do Google: "Esta recomendação foi oficialmente descontinuada em outubro de 2015".
Bart

Respostas:


483

Esta técnica está agora obsoleta .

Isso costumava dizer ao Google como indexar a página.

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

Essa técnica foi substituída principalmente pela capacidade de usar a API JavaScript History que foi introduzida ao lado do HTML5. Para um URL como www.example.com/ajax.html#!key=value, o Google verificará o URL www.example.com/ajax.html?_escaped_fragment_=key=valuepara buscar uma versão não AJAX do conteúdo.


16
Você tem certeza de que é tudo o que existe? Costumo achar que o carregamento da página trava em um URL shebang no facebook (mesmo após várias recargas), mas se você remover manualmente o #!, Ele funcionará. Sem mencionar, você geralmente recebe "1,5 URLs" (ou seja, o URL antigo permanece e apenas adiciona a nova parte (por exemplo, photo.php? Id = ... duas vezes, mas com IDs diferentes). Sem mencionar que " #! "também é adicionado aos URLs do Facebook, que provavelmente não são (e não deveriam ser) indexáveis. De qualquer forma, acho o shebang extremamente irritante, pois parece ser o motivo de tantas falhas de página no meu lento - linha de
pedery

11
O fato de o Facebook ter erros não faz desses erros a falha de dois caracteres no URL. Se o site estiver codificado corretamente para entendê-los e gerá-los, os URLs AJAX rastreáveis ​​são bastante úteis. Muitas outras coisas no Facebook também surgem.
ceejayoz

15
@ Pediatria: Eu só vi esse problema no Facebook. Eu concordo, isso me leva à parede (que não é do Facebook) o tempo todo.
BoltClock

5
Quanto aos mecanismos de pesquisa, ter um URL AJAX indexável não faz com que a página seja indexada mais do que ter um URL não AJAX indexável . O Facebook usa esse formato de URL para mais do que apenas o benefício do Google - também torna as páginas acessadas via AJAX no Facebook marcáveis ​​como favoritos quando não seriam.
ceejayoz

13
Para algumas advertências interessantes, leia também este artigo: isolani.co.uk/blog/javascript/BreakingTheWebWithHashBangs
Michael Stum

215

O octothorpe / sinal de número / hashmark tem um significado especial em uma URL, normalmente identifica o nome de uma seção de um documento. O termo exato é que o texto após o hash é a parte âncora de um URL. Se você usa a Wikipedia, verá que a maioria das páginas possui um índice e pode pular para as seções do documento com uma âncora, como:

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

https://en.wikipedia.org/wiki/Alan_Turingidentifica a página e Early_computers_and_the_Turing_testé a âncora. O motivo pelo qual o Facebook e outros aplicativos baseados em Javascript (como o meu próprio Wood & Stones ) usam âncoras é que eles querem tornar as páginas marcáveis ​​(como sugerido por um comentário nessa resposta) ou oferecer suporte ao botão Voltar sem recarregar a página inteira do servidor .

Para dar suporte aos favoritos e ao botão Voltar, você precisa alterar o URL. No entanto, se você alterar a parte da página (com algo parecido window.location = 'http://raganwald.com';) para um URL diferente ou sem especificar uma âncora, o navegador carregará a página inteira a partir do URL. Tente isso no Firebug ou no console Javascript do Safari. Carregar http://minimal-github.gilesb.com/raganwald. Agora, no console Javascript, digite:

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

Você verá a atualização da página no servidor. Agora digite:

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

Aha! Nenhuma atualização de página! Tipo:

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

Ainda sem atualização. Use o botão Voltar para ver se esses URLs estão no histórico do navegador. O navegador percebe que estamos na mesma página, mas apenas alteramos a âncora, para que não seja recarregada. Graças a esse comportamento, podemos ter um único aplicativo Javascript que parece estar no navegador em uma 'página', mas que possui muitas seções que podem ser marcadas como favoritos e que respeitam o botão Voltar. O aplicativo deve alterar a âncora quando um usuário digita diferentes 'estados' e, da mesma forma, se um usuário usa o botão Voltar, um marcador ou um link para carregar o aplicativo com uma âncora incluída, o aplicativo deve restaurar o estado apropriado.

Aí está: Âncoras fornecem aos programadores Javascript um mecanismo para tornar os aplicativos favoritos, indexáveis ​​e compatíveis com o botão voltar. Esta técnica tem um nome: É uma interface de página única .

ps Há um quarto benefício para esta técnica: carregar o conteúdo da página através do AJAX e injetá-lo no DOM atual pode ser muito mais rápido do que carregar uma nova página. Além do aumento de velocidade, outros truques, como carregar certas partes em segundo plano, podem ser executados sob o controle do programador.

pps Dado tudo isso, o 'estrondo' ou ponto de exclamação é mais uma dica para o rastreador da Web do Google de que a mesma página exata pode ser carregada do servidor em um URL ligeiramente diferente. Consulte Rastreamento do Ajax . Outra técnica é fazer com que cada link aponte para um URL acessível pelo servidor e, em seguida, use Javascript discreto para transformá-lo em um SPI com uma âncora.

Aqui está o link principal novamente: O Manifesto da Interface de Página Única


14
"No entanto, um aplicativo sem essa otimização ainda pode ser rastreado se o rastreador da Web desejar indexá-lo." Na verdade não. O hash não é enviado para o servidor.
Chris Broadfoot

7
apenas para informações: self.document.location.hashfornece o valor de esse hash
Kevin

12
O hash não é enviado para o servidor. Boa pegada!
Raganwald 17/10

36
Essa resposta inteira, além do parágrafo único "pps", é redundante.
Lightness Races in Orbit

21
@imaginonic: Eu estou atrasado, mas como perfeitamente trabalhada como ela é, 90% dos que não toca no #!aspecto da minha pergunta em tudo . Por isso ele disse que é redundante. O número de upvotes aqui provavelmente se deve ao alto tráfego quando minha pergunta chegou ao Hacker News, juntamente com o tamanho da resposta.
BoltClock

111

Primeiro de tudo: eu sou o autor do Manifesto de interface de página única, citado por raganwald

Como raganwald explicou muito bem, o aspecto mais importante da abordagem de interface de página única (SPI) usada no FaceBook e no Twitter é o uso de hash #em URLs

O caractere !é adicionado apenas para fins do Google. Essa notação é um "padrão" do Google para rastrear sites intensivos em AJAX (nos sites extremos da Interface de página única). Quando o rastreador do Google encontra um URL, #!ele sabe que existe um URL convencional alternativo, fornecendo o mesmo "estado" da página, mas nesse caso no tempo de carregamento.

Apesar da #!combinação ser muito interessante para o SEO, é suportado apenas pelo Google (até onde eu sei), com alguns truques de JavaScript você pode criar sites SPI de SEO compatíveis com qualquer rastreador da Web (Yahoo, Bing ...).

O Manifesto e as demonstrações do SPI não usam o formato do Google !em hashes, essa notação pode ser facilmente adicionada e o rastreamento do SPI pode ser ainda mais fácil (UPDATE: now! Notation é usada e permanece compatível com outros mecanismos de pesquisa).

Dê uma olhada neste tutorial , é um exemplo de um site simples do ItsNat SPI, mas você pode escolher algumas idéias para outras estruturas, este exemplo é compatível com SEO para qualquer rastreador da web.

O difícil problema é gerar qualquer (ou selecionado) "estado da página AJAX" como HTML simples para SEO, no ItsNat é muito fácil e automático, o mesmo site é ao mesmo tempo SPI ou página baseada em SEO (ou com o JavaScript desativado para acessibilidade). Com outras estruturas da web, você pode sempre seguir a abordagem de site duplo, um site é baseado em SPI e outra página baseada em SEO, por exemplo, o Twitter usa essa técnica de "site duplo".


3
E o princípio do aprimoramento progressivo? O site não deve falhar devido a JavaScript desativado. E, acredite, o javascript está desativado não apenas em navegadores desatualizados, mas também por muitos usuários conscientes da segurança que não gostam de executar JS aleatórios.
Roman Royter 29/03

88

Seria muito cuidadoso se você estiver considerando adotar esta convenção de hashbang.

Depois de hashbang, você não pode voltar. Esta é provavelmente a questão mais complicada. O post de Ben adiantou que, quando o pushState é mais amplamente adotado, podemos deixar os hashbangs para trás e retornar aos URLs tradicionais. Bem, o fato é que você não pode. Anteriormente, afirmei que os URLs são eternos, eles são indexados e arquivados e geralmente mantidos por aí. Para adicionar isso, URLs legais não mudam. Não queremos nos desconectar de todos os links valiosos para o nosso conteúdo. Se você implementou URLs hashbang a qualquer momento, altere-os sem interromper os links, a única maneira de fazer isso é executando algum JavaScript no documento raiz do seu domínio. Para sempre. Não é de forma alguma temporário, você está preso a isso.

Você realmente deseja usar pushState em vez de hashbangs , porque tornar seus URLs feios e possivelmente quebrados - para sempre - é uma desvantagem colossal e permanente dos hashbangs.


Acho que suas críticas a hashbangs são válidas, mas usar apenas pushState como substituto significa que perderíamos a capacidade de carregar conteúdo em um aplicativo de página única com base na URL. Portanto, os URLs não podem ser compartilhados.
Luke

Eu tive um problema semelhante no meu trabalho - passamos a usar o Page.js (que usa pushState) para navegação em uma página, onde anteriormente usamos Hasher e Crossroads (com base em hash). Como resultado, precisávamos resgatar caminhos como /blah#foo/feep/baz?stuff=nonsense. O novo caminho equivalente seria /blah/foo/feep/baz?stuff=nonsense(note # substituído por /). Eu fiz isso simplesmente tendo uma rota em minha configuração que capturou /blahe verificou se havia um, se sim, anexando o conteúdo desse hash após uma barra. Resgatado.
Gert Sønderby

16

Para ter um bom acompanhamento sobre tudo isso, o Twitter - um dos pioneiros das URLs hashbang e da interface de página única - admitiu que o sistema hashbang era lento a longo prazo e que eles realmente começaram a reverter a decisão e retornar ao links da velha escola.

Artigo sobre isso está aqui.


9

Eu sempre assumi o que !acabei de indicar que o fragmento de hash a seguir correspondia a uma URL, !substituindo a raiz ou o domínio do site. Poderia ser qualquer coisa, em teoria, mas parece que a API de rastreamento do Google AJAX gosta dessa maneira.

O hash, é claro, apenas indica que nenhuma recarga de página real está ocorrendo; portanto, é para fins de AJAX. Edit: Raganwald faz um trabalho adorável explicando isso com mais detalhes.


-2

As respostas acima descrevem bem o porquê e como é usado no twitter e no facebook, o que eu perdi é a explicação do que #faz por padrão ...

Em um 'normal' (não um aplicativo de página única), você pode ancorar hashem qualquer elemento que tenha id, colocando esse ID de elemento no URL após o hash#

Exemplo:

(no Chrome) Clique F12ou Rihgt MouseeInspect element

insira a descrição da imagem aqui

pegue id="answer-10831233"e adicione ao URL como segue

/programming/3009380/whats-the-shebang-hashbang-in-facebook-and-new-twitter-urls-for#answer-10831233

e você receberá um link que pula para esse elemento na página

Para que serve o shebang / hashbang (#!) No Facebook e os novos URLs do Twitter?

Ao usar #da maneira descrita nas respostas acima, você está introduzindo um comportamento conflitante ... embora eu não perdesse o sono por causa disso ... já que o Angular se tornou um padrão ...


2
A resposta de raganwald contém a explicação que você disse ter perdido. Mesmo assim, não vejo como a pergunta se beneficia de um tutorial sobre como funciona # - a pergunta pressupõe que o leitor já esteja familiarizado com os fragmentos de URL e que a funcionalidade não é realmente relevante aqui, exceto pelo comentário sobre comportamento conflitante .
BoltClock

Oi BoltClock, mas sem explicar o que é o comportamento padrão, dizer que 'entrará em conflito' não dá ao leitor nenhuma ideia do que está em jogo, que tipo de funcionalidade está potencialmente sendo perdida ... Eu só gostaria de dar boas respostas com fotos, se Vejo que falta algo que seja o mais completo possível
Matas Vaitkevicius
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.