A differenza di un sito web tradizionale, che utilizza il paradigma di comunicazione client-server, un'applicazione JavaScript (Ajax e altre web app) utilizza l'approccio “rendering lato client”, che prevede:

Il layout della pagina, CSS e JavaScript vengono caricati in la richiesta iniziale. Parte o tutto il materiale spesso non viene caricato. Il JavaScript quindi invia una seconda richiesta al server, a cui viene data risposta in JSON, generando l'HTML necessario.

L'uso di framework JavaScript consente agli sviluppatori di creare app online accessibili da una singola pagina web; questo è indicato come SPA (Applicazione a pagina singola). Prendi, ad esempio, Twitter, che è un'applicazione mobile e desktop.

Tuttavia, poiché i bot forniscono segnali che sono collegati a molti siti, questa strategia è incompatibile con la SEO.

Il design della versione SSR consente la resa lato server, il che significa che l'utente vedrà una pagina completa nel suo browser, con HTML creato in Javascript dal server anziché dal browser.

Sul lato client, BackBone, Knockout.JS, Ember.JS e AngularJS di Google sono ora in competizione.

Diversi problemi sorgono a seguito di questa strategia di sviluppo.

*1* Il bot scarica il codice HTML e valuta il materiale incluso nel codice per esplorare un intero sito JS.

Ad eccezione di Googlebot, che utilizza un browser headless, la maggior parte dei contenuti JS e Ajax viene ignorata.

*2* La seconda sfida è decidere cosa indicizzare. Le interazioni fanno sì che il materiale cambi su base frequente.

Quali sono i segnali? Come valuti i link e i contenuti di una pagina?

Cosa hanno a che fare questi segnali tra loro? Come possiamo continuare a utilizzare il metodo attuale se il concetto di pagina collegata a un URL è svanito?

*3* Sfida n. 3: un sito può essere renderizzato in AngularJS completo solo se JS è abilitato; altrimenti, il sito è semplicemente invisibile. Poiché il codice sorgente mostra solo variabili, è anche difficile per i motori di ricerca accedere ai contenuti di questi siti per indicizzarli.

Di conseguenza, non è inaspettato osservare una grande influenza sulla visibilità SEO di questi siti…

Di conseguenza, non è inaspettato notare una grande influenza sull'esposizione SEO di questi siti.

AJAX è popolare tra gli sviluppatori web che utilizzano framework popolari come React e Angular per creare applicazioni a pagina singola.
AJAX può essere utilizzato per creare un'applicazione online interattiva, intuitiva e senza interruzioni che funzioni in modo simile a un programma desktop dedicato.

Tuttavia, la facilità d'uso e l'utilità dei siti AJAX vanno a scapito della SEO del tuo sito.
AJAX non è molto diverso da Flash per i crawler dei motori di ricerca, specialmente quando si tratta di navigazione del sito web del broker, che carica tutte le pagine allo stesso URL, difficoltà di cloaking e inutili pulsanti Indietro, Avanti e Aggiorna.

Tuttavia, la reputazione di AJAX sta cambiando, poiché i principali motori di ricerca stanno sviluppando soluzioni per i webmaster e aiutano a migliorare l'esperienza degli utenti. Tuttavia, questo ha ricevuto poca attenzione e la maggior parte dei siti Web AJAX non è ancora ottimizzata o non è stata indicizzata nei risultati di ricerca di Google. Questo consiglio dovrebbe aiutarti a mettere in primo piano il tuo sito se è uno dei tanti.

Gli ingegneri di Google hanno lavorato instancabilmente per migliorare la scansione e l'indicizzazione delle pagine AJAX e hanno escogitato una serie di soluzioni nel processo, incluso il frammento di escape nell'URL, che aiuta migliaia di siti AJAX a ottenere visibilità su Google e, più recentemente , hanno iniziato a eseguire il pre-rendering di queste pagine da parte di Google per un'esperienza utente molto migliore.

Ora sappiamo che Google legge il JS che crea il titolo, la meta descrizione, i robot e i meta tag: test di supporto.

Per riconoscere una pagina ottimizzata per dispositivi mobili o scoprire contenuti nascosti, Google comprende i file CSS e JS.

Google può leggere gli eventi Onclick, il che significa che può indicizzare il materiale creato dinamicamente in JS.

Tuttavia, è errato credere che Google possa leggere tutto. Il motore non rileva alcuna indicazione su come avviare Ajax perché non richiede il caricamento di eventi.

Nel 2009, Google ha introdotto la tecnica hashbang (#!) per una migliore scansione e indicizzazione di Ajax. Quando il robot incontra un URL che contiene un hashbang, eseguirà la scansione della pagina e sostituirà l'hashbang con un
frammento di escapeprima di indicizzare la pagina nella sua forma originale.
Tuttavia, questa strategia è ormai obsoleta perché Google afferma di essere in grado di comprendere il materiale generato da Ajax…

Poiché gli URL di navigazione dinamici rimangono gli stessi, la tecnica pushstate IP historyHTML5 fornisce una migliore opzione a lungo termine.
Poiché è incluso in HTML5, ha anche il vantaggio di consentire la navigazione anche quando l'utente Internet disabilita JavaScript.

Pushstate() modifica il percorso dell'URL visualizzato nella barra degli indirizzi del browser dell'utente.
È l'ideale per la SEO poiché i motori possono scansionare questi URL e distinguerli l'uno dall'altro.

Dovresti anche essere consapevole del fatto che Google suggerisce di utilizzare Pushstate per rendere il tuo scorrimento infinito SEO friendly.

Ciascuna delle query del crawler viene controllata dal middleware di prerender.io, che è posizionato su un server. Se il middleware rileva che la richiesta proviene da un crawler, invia una richiesta per l'HTML statico della pagina. In caso contrario, la richiesta viene inviata alle route server convenzionali.

Quando si utilizza AJAX per sviluppare siti Web, i SEO spesso incontrano difficoltà. Questi siti offrono un'esperienza utente meravigliosa durante il caricamento del materiale nella pagina più velocemente. Tuttavia, Google non indicizza tali siti Web, causando un peggioramento della SEO del sito. Per fortuna, Google ha proposto una soluzione che consente ai webmaster di avere il meglio di tutti i mondi. I siti Web che implementano il piano dovrebbero creare due versioni dei loro contenuti: una per dispositivi mobili e una per desktop.

Utenti con JS abilitato e un URL “stile AJAX”

URL statici tradizionali per i motori di ricerca

Il nuovo protocollo ‘hashbang' impone l'uso di un hash e un punto esclamativo – #! Quando includi l'hashbang nell'URL di una pagina, Google riconosce che stai seguendo il protocollo e tratta l'URL in modo diverso. Accetta tutto ciò che segue l'hashbang e lo passa come parametro URL al sito web. Per il parametro, usano il termine
frammento di escape . L'URL verrà quindi riscritto e Google richiederà il contenuto dalla pagina statica.

Perché la soluzione funzioni, ci sono due requisiti.
Il primo passo è che il sito si iscriva allo schema di scansione AJAX, che consente al crawler di richiedere URL brutti.
A tal fine, viene aggiunto un trigger all'intestazione della pagina.
Se la pagina non include hashbang ma ha la direttiva in testa, la direttiva viene elusa.

Per concludere, ci sono una varietà di strategie per posizionare correttamente il tuo sito web AJAX in Google.
Tutto inizia con la notifica a Google che le tue pagine vengono visualizzate utilizzando Javascript, dopodiché Google chiede al tuo URL di sfuggire agli argomenti del frammento e infine fornisci HTML statico per i crawler.

Può sembrare difficile, ma ci sono strumenti per renderlo più semplice e Google stesso ha varie istruzioni e strumenti per aiutarti.

È possibile eseguire la scansione e indicizzare un sito creato con il framework JavaScript, ma ciò che ci interessa è come posizionare le nostre pagine.

Innanzitutto, se il test Visualizza come Google non ottiene i risultati desiderati. C'è un problema.

La risposta può essere trovata nel browser senza testa: un browser “senza testa” è un ambiente software a riga di comando con un'API JavaScript che può eseguire il rendering di una pagina HTML completa eseguendo HTML, CSS e JS allo stesso modo di un browser. Lo chiamiamo headless perché manca di un'interfaccia utente grafica (interfaccia utente).

Possiamo testare i programmi creati dai framework JS e Ajax simulando tutto ciò che accade nel browser.

Nota che con i sistemi di webanalytics, questo tipo di scansione genera “visite false” (perché eseguono tutti gli script senza eccezioni).

Phantom JS e Casper JS sono entrambi browser senza testa, con quest'ultimo che ha la funzionalità aggiuntiva di scraping.

Screaming Frog in modalità ” JavaScript crawl ” può essere utilizzato anche per l'audit.

Screaming Frog è un crawler SEO che ha recentemente incluso una modalità “browser senza testa” basata su PhantomJS. Di conseguenza, può eseguire la scansione di un intero sito angolare.

Nella configurazione dello spider, guarda il JS, il CSS e le immagini.

Botify offre anche questa opzione da gennaio 2017.

Soluzione 1: utilizzare una tecnica di miglioramento progressivo per codificare in modo diverso.

L'approccio di miglioramento progressivo prevede la costruzione del tuo sito in tre livelli:

Il codice HTML contiene il materiale (contenuto e funzionalità accessibili a tutti).

I fogli di stile CSS esterni controllano la formattazione (CSS).

Funzionalità scritte in uno script di terze parti, come JavaScript.

Soluzione 2: crea i tuoi snapshot HTML. Per Ajax, Google consiglia questa soluzione.

In sintesi, il codice JS viene eseguito lato server tramite un browser headless per generare l'HTML generato dal codice JS.

Questo codice viene “catturato” prima di essere consegnato al browser dell'utente Internet, proprio come una normale pagina HTML.

Questa strategia, tuttavia, perde parte del fascino del “rendering lato client”, poiché la pagina diventa statica.

L'invio di immagini solo ai bot dei motori di ricerca è un arbitraggio comune.

Soluzione 3:Utilizza un server di prerendition di terze parti come terza opzione. La scansione del nostro sito è resa più semplice dalle tecnologie di pre-rendering dei documenti. Quando un crawler visita il tuo sito, un server di pre-rendering ti consente di eseguire il pre-rendering statico delle tue pagine e mostrerà il rendering HTML statico finale non appena lo strumento lo riconosce.

Prerender, SEO 4 Ajax (Cocorico! ) e Brombone sono le soluzioni di prerendition di terze parti più popolari.

Tieni presente che questo approccio potrebbe sembrare occultamento anche se non lo è.

Inoltre, i server di rendering rendono Ajax scansionabile utilizzando l'approccio deprecato. Da sapere: in

alternativa, c'è l'approccio dell'hash bang e dei pezzi in fuga (come visto in precedenza).

In alternativa, puoi utilizzare l'approccio dei frammenti di escape con un meta tag come questo: meta name = “fragment” content = “!”>

Tieni presente che questo approccio HTML5, che utilizza la funzione pushstate(), è obsoleto quanto gli altri .
Per il momento, questa strategia funziona su tutti i motori di ricerca.
Tuttavia, fino ad allora,

Sto lottando per rendere il sito web basato su AJAX SEO-friendly. Come consigliato nei tutorial sul web, ho aggiunto
hrefai link attributi
“carini”
:
<a href="#!site=contact" data-id="contact" class="navlink">контакт</a>e, in un div in cui il contenuto è caricato con AJAX per impostazione predefinita, uno script PHP per i crawler:

$files = glob('./pages/*.php'); foreach ($files as &$file) { $file = substr($file, 8, -4); } if (isset($_GET['site'])) { if (in_array($_GET['site'], $files)) { include ("./pages/".$_GET['site'].".php"); } }
ho la sensazione che all'inizio ho bisogno di inoltre taglia la
_escaped_fragment_=parte da
(...)/index.php?_escaped_fragment_=site=aboutperché altrimenti lo script non sarà in grado di ottenere
GETil
sitevalore da URL, ho ragione?

ma, comunque, come faccio a sapere che il crawler trasforma i link carini (quelli con
#!) in link brutti (contenenti
?_escaped_fragment_=)? Mi è stato detto che avviene automaticamente e non ho bisogno di fornire questa mappatura, ma Visualizza come Googlebot non mi fornisce alcuna informazione su cosa succede all'URL.
Il bot di Google cercherà automaticamente gli
?_escaped_fragment_=URL.

Quindi da
www.example.com/index.php#!site=aboutGoogle bot interrogherà:
www.example.com/index.php?_escaped_fragment_=site=about
Sul sito PHP lo otterrai come
$_GET['_escaped_fragment_'] = "site=about"
Se vuoi ottenere il valore del “sito” devi fare qualcosa del genere:

if(isset($_GET['_escaped_fragment_'])){ $escaped = explode("=", $_GET['_escaped_fragment_']); if(isset($escaped[1]) && in_array($escaped[1], $files)){ include ("./pages/".$escaped[1].".php"); } }