facebook - tweet - twitter widget




Cos'รจ lo shebang/hashbang(#!) In Facebook e i nuovi URL di Twitter per? (5)

Ho sempre pensato che ! ha appena indicato che il frammento di hash che seguiva corrispondeva a un URL, con ! prendendo il posto della radice o del dominio del sito. Potrebbe essere qualsiasi cosa, in teoria, ma sembra che l'API di Google AJAX Crawling piaccia in questo modo.

L'hash, ovviamente, indica semplicemente che non si sta verificando il vero caricamento della pagina, quindi sì, è per scopi AJAX. Modifica: Raganwald fa un lavoro adorabile spiegando questo in modo più dettagliato.

Ho appena notato che i lunghi e contorti URL di Facebook che siamo abituati ora assomigliano a questo:

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

Per quanto posso ricordare, all'inizio di quest'anno era solo una normale stringa simile a un frammento di URL (che inizia con # ), senza il punto esclamativo. Ma ora è uno shebang o hashbang ( #! ), Che ho visto solo in precedenza negli script di shell e in Perl.

I nuovi URL di Twitter ora includono anche il #! simboli. Un URL del profilo Twitter, ad esempio, ora si presenta così:

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

#! ora gioca un ruolo speciale negli URL, come per un certo framework Ajax o qualcosa di simile dal momento che le nuove interfacce Facebook e Twitter sono ora in gran parte Ajaxified? L'utilizzo di questo nei miei URL andrebbe a beneficio della mia applicazione Web in alcun modo?


L'octothorpe / numero-segno / hashmark ha un significato speciale in un URL, normalmente identifica il nome di una sezione di un documento. Il termine preciso è che il testo che segue l'hash è la parte di ancoraggio di un URL. Se usi Wikipedia, vedrai che la maggior parte delle pagine ha un sommario e puoi saltare alle sezioni all'interno del documento con un'ancora, ad esempio:

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

https://en.wikipedia.org/wiki/Alan_Turing identifica la pagina e Early_computers_and_the_Turing_test è l'ancora. La ragione per cui Facebook e altre applicazioni basate su Javascript (come il mio stesso Wood & Stones ) usano le ancore è che vogliono rendere le pagine bookmarkable (come suggerito da un commento su quella risposta) o supportare il pulsante indietro senza ricaricare l'intera pagina dal server .

Per supportare il segnalibro e il pulsante Indietro, è necessario modificare l'URL. Tuttavia, se cambi la porzione di pagina (con qualcosa come window.location = 'http://raganwald.com'; ) in un altro URL o senza specificare un ancoraggio, il browser caricherà l'intera pagina dall'URL. Prova questo in Firebug o nella console JavaScript di Safari. Carica http://minimal-github.gilesb.com/raganwald . Ora nella console Javascript, digita:

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

Vedrai la pagina aggiornata dal server. Adesso scrivi:

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

Aha! Nessun aggiornamento della pagina! Genere:

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

Ancora nessun aggiornamento. Usa il pulsante Indietro per vedere che questi URL si trovano nella cronologia del browser. Il browser nota che siamo sulla stessa pagina ma semplicemente cambiando l'ancora, quindi non ricarica. Grazie a questo comportamento, possiamo avere una singola applicazione Javascript che appare al browser per essere su una "pagina" ma avere molte sezioni bookmarkable che rispettano il pulsante Indietro. L'applicazione deve modificare l'ancoraggio quando un utente immette diversi "stati" e, analogamente, se un utente utilizza il pulsante Indietro o un segnalibro o un collegamento per caricare l'applicazione con un'ancora inclusa, l'applicazione deve ripristinare lo stato appropriato.

Ecco qua: gli ancoraggi forniscono ai programmatori Javascript un meccanismo per realizzare applicazioni segnalibro, indicizzabili e con i pulsanti indietro. Questa tecnica ha un nome: è un'interfaccia a pagina singola .

ps C'è un quarto vantaggio in questa tecnica: caricare il contenuto della pagina tramite AJAX e quindi inserirlo nel DOM corrente può essere molto più veloce del caricamento di una nuova pagina. Oltre all'aumento della velocità, ulteriori controlli come il caricamento di alcune parti in background possono essere eseguiti sotto il controllo del programmatore.

pps Dato tutto ciò, il "botto" o punto esclamativo è un ulteriore indizio per il web crawler di Google che la stessa pagina può essere caricata dal server con un URL leggermente diverso. Guarda Ajax Crawling . Un'altra tecnica consiste nel rendere ciascun collegamento puntato a un URL accessibile dal server e quindi utilizzare Javascript non invadente per trasformarlo in un SPI con un'ancora.

Ecco di nuovo il collegamento chiave: il manifesto dell'interfaccia a pagina singola


Per avere un buon seguito su tutto ciò, Twitter - uno dei pionieri dell'URL di hashbang e dell'interfaccia a pagina singola - ha ammesso che il sistema di hashbang era lento a lungo termine e che in realtà ha iniziato a invertire la decisione e tornare a collegamenti della vecchia scuola.

L'articolo su questo è qui.


Prima di tutto: sono l'autore del Manifesto dell'interfaccia della pagina singola citato da Raganwald

Come raganwald ha spiegato molto bene, l'aspetto più importante dell'approccio Single Page Interface (SPI) utilizzato in FaceBook e Twitter è l'uso dell'hash # negli URL

Il personaggio ! viene aggiunto solo per gli scopi di Google, questa notazione è uno "standard" di Google per la scansione di siti Web intensivi su AJAX (nei siti Web estremi della singola pagina). Quando il crawler di Google trova un URL con #! sa che esiste un URL convenzionale alternativo che fornisce lo stesso "stato" di pagina ma in questo caso in fase di caricamento.

Nonostante #! la combinazione è molto interessante per il SEO, è supportata solo da Google (per quanto ne so), con alcuni trucchi JavaScript è possibile costruire siti web SPI SEO compatibili per qualsiasi web crawler (Yahoo, Bing ...).

Il Manifesto e le dimostrazioni SPI non utilizzano il formato di Google di ! in hash, questa notazione potrebbe essere facilmente aggiunta e la scansione SPI potrebbe essere ancora più semplice (UPDATE: now! notation è usato e rimane compatibile con altri motori di ricerca).

Date un'occhiata a questo tutorial , è un esempio di un semplice sito SPI di ItsNat ma potete scegliere alcune idee per altri framework, questo esempio è compatibile con SEO per qualsiasi web crawler.

Il difficile problema è generare qualsiasi (o selezionato) "stato della pagina AJAX" come semplice HTML per SEO, in ItsNat è molto semplice e automatico, lo stesso sito è nello stesso tempo SPI o pagina per SEO (o quando JavaScript è disabilitato per l'accessibilità). Con altri framework web è possibile seguire il doppio approccio del sito, un sito è basato su SPI e un'altra pagina per SEO, ad esempio Twitter utilizza questa tecnica del "doppio sito".


Questa tecnica è ora deprecata .

Questo era solito dire a Google come indicizzare la pagina.

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

Questa tecnica è stata in gran parte soppiantata dalla possibilità di utilizzare l'API della cronologia JavaScript introdotta insieme a HTML5. Per un URL come www.example.com/ajax.html#!key=value , Google controllerà l'URL www.example.com/ajax.html?_escaped_fragment_=key=value per recuperare una versione non AJAX dei contenuti.







hashbang