Caricamenti veloci delle pagine web con ASYNC e DEFER


Caricamenti veloci delle pagine web senza blocchi nel rendering. Usiamo gli attributi #async e #defer per chiamate asincrone alle dipendenze #JavaScript, anche su #WordPress.

L’elemento HTML <script> consente di definire quando il browser deve iniziare ad eseguire il codice JavaScript nella tua pagina. Gli attributi async e defer sono stati aggiunti al WebKit a Settembre 2010. Gli attributi async e defer per gli elementi script sono utili per ottimizzare il caricamento della pagina evitando stop nel rendering della pagina HTML causati da elementi di blocco come dipendenze JavaScript.

Come fare SEO avanzata con AngularJS per farsi indicizzare da Google


Da un punto di vista tecnologico, strumenti per lo sviluppo di app e siti web come AngularJS, Angular 2.0 e React stanno lentamente prendendo piede: ad oggi quasi mezzo milione di siti web sviluppati in AngularJS.

Per un consulente SEO, capire come i motori di ricerca interagiscono con questi framework permette di lavorare su nuovi e stimolanti progetti. I progressi di Googlebot nell’interpretazione di JavaScript sono rapidi e migliorano giorno dopo giorno, ma non è ancora stata raggiunta la perfezione assoluta, anzi…

Gli elementi da impostare in un sistema sviluppato in AngularJS sono molti e tutti importanti.

Devi ottimizzare un sito web sviluppato in AngularJS e non sai da che parte cominciare? Non preoccuparti, ci sono diverse strade percorribili per avere un sito indicizzabile dai motori di ricerca. Con questa guida spero di aiutarti ad avere le idee un pochino più chiare.

Quando si parla di parole chiave spesso


Quando si parla di parole chiave spesso ci si concentra solo su fattori come i volumi di traffico, la competizione #PPC e la competizione #SEO. Un aspetto che non sarebbe mai da dimenticare è l’intento della ricerca rappresentato dalla parola chiave. La parola che tanto ci piace è un termine che lancia una ricerca informativa o commerciale? Cosa si aspetta l’utente che esegue questa query (ricerca)? Informazioni oppure un prodotto da acquistare rapidamente online?
Distinguere le parole chiave per intento è molto importante, vediamo perché.

https://www.evemilano.com/2016/12/intento-di-ricerca/

Alternate Hreflang per la SEO multi lingua


Esistono siti web che ricevono visitatori da tutto il mondo, con contenuti tradotti e destinati a persone di uno specifico paese o zona geografica. Google utilizza gli attributi rel=”alternate” hreflang=”x” per visualizzare, nei risultati di ricerca, la pagina del sito destinata alla località e alla lingua dell’utente. Non importa che il sito sia sviluppato in WordPress, Joomla, Drupal, oppure fatto totalmente a mano, gli attributi alternate hreflang aiutano ad migliorare la visibilità delle pagine in lingue differenti e dovrebbero sempre venire implementati in siti multi lingua.

Introdotto da Google a Dicembre 2011, l’attributo hreflang permette di dichiarare ai motori di ricerca la relazione esistente tra pagine in lingue differenti. L’hreflang è utile quando si creano contenuti specifici destinati ad un target localizzato in nazioni con lingue differenti.

L’attributo hreflang indica ai motori di ricerca quale pagina mostrare ad un utente di una specifica nazione e linguaggio.

Perché usare l’attributo hreflang

In passato, prima dell’esistenza dell’attributo hreflang, cercando un brand famoso poteva accadere che Google mostrasse nei risultati di ricerca la homepage in lingua inglese. Questo capitava perché, in genere, la homepage più autorevole, con PageRank più alto è quella in inglese, ed in SERP vinceva la pagina più forte.

Con l’attributo hreflang invece, l’utente di lingua spagnola visualizzerà nei risultati la homepage in spagnolo, con hreflang=”es”, a prescindere dall’autorevolezza. Offrendo risultati localizzati è possibile ridurre il bounce rate, migliorare il conversion rate ed offrire un’esperienza utente migliore.

Con l’attributo hreflang è possibile localizzare il contenuto anche per varianti della stessa lingua. La homepage in spagnolo per la Spagna userà l’attributo hreflang=”es-es”, mentre la homepage in spagnolo per il Messico userà l’attributo hreflang=”es-mx”. Se hai un ecommerce multi lingua saprai già quanto sia importante avere offerte nella valuta locale, informazioni sulla spedizione specifici per il paese del cliente, differenziare offerte per festività ed eventi locali, sono tutte strategie che migliorano l’utilizzo del sito web da un pubblico internazionale.

Un altro problema dei siti multi lingua è che si possono generare contenuti duplicati. Ad esempio la pagina “chi siamo” per UK avrà probabilmente lo stesso contenuto della pagina “chi siamo” per USA. Per evitare di trasmettere a Google contenuti considerati duplicati è necessario implementare l’attributo hreflang.

L’attributo hreflang serve essenzialmente ad ovviare a questi due problemi: mostrare risultati localizzati in SERP e ridurre i contenuti duplicati.

L’hreflang è un segale oppure una direttiva?

Hreflang è un segnale, non una direttiva. Questo significa che i motori di ricerca non sono obbligati a rispettarla, altri fattori SEO potrebbero annullare l’effetto dell’attributo hreflang e far posizionare nei risultati di ricerca un’altra pagina al posto di quella locale. Per essere sicuro di inviare ai motori di ricerca segnali chiari sulla lingua, segui le linee guida per un sito SEO multilingua.

Quali motori di ricerca interpretano l’attributo hreflang?

Alla data in cui scrivo Google e Yandex considerano l’attributo hreflang, Bing invece usa la meta tag language.
https://gist.github.com/evemilano/3a8bf6c98a57479f77cf3fdb10d58282.js

Implementazione e linee guida

Per ottenere i massimi benefici dall’attributo hreflang dovresti seguire questi semplici consigli:

Dove inserire l’attributo hreflang

L’attributo hreflang dovrebbe essere presente in tutte le pagine che hanno copie tradotte in altre lingue. Deve essere inserito in una, e una soltanto, delle seguenti opzioni:

Come si scrive l’attributo hreflang

L’attributo hreflang deve includere una referenza alla pagina in cui è incluso e a tutte le pagine servite in lingue alternative.
https://gist.github.com/evemilano/9e12a6d0b4b2827f5934366d376300e6.js

ISO Language e Codici Regionali

Google supporta il formato ISO 639-1 per le lingue, ma è possibile usare il formato più specifico ISO 3166-1 Alpha 2 per definire le regioni geografiche in target.

Valori supportati per le lingue

Il valore dell’attributo hreflang identifica la lingua (nel formato ISO 639-1) e, facoltativamente, l’area geografica (nel formato ISO 3166-1 Alpha 2) di un URL alternativo. Ad esempio:

  • es: contenuti in spagnolo, indipendentemente dalla regione
  • es-ES: contenuti in spagnolo per utenti della Spagna
  • es-MX: contenuti in spagnolo per gli utenti del Messico

Non specificare soltanto il codice del paese. Google non ricava automaticamente la lingua dal codice del paese. Puoi specificare soltanto il codice della lingua se desideri semplificare la codifica. Aggiungi il codice del paese dopo la lingua per limitare la pagina a zona geografica specifica.

Esempio:

  • be: lingua bielorussa, indipendentemente zona geografica (non francese belga)
  • nl-be: olandese per il Belgio
  • fr-be: francese per il Belgio

Per le varianti della scrittura di una stessa lingua, la scrittura corretta viene dedotta dal paese. Ad esempio, se specifichi zh-TW per utenti zh-TW, la scrittura della lingua viene ricavata automaticamente (in questo esempio il cinese tradizionale). Puoi anche specificare esplicitamente la scrittura utilizzando ISO 15924, come segue:

  • zh-Hant: cinese (tradizionale)
  • zh-Hans: cinese (semplificato)

In alternativa, puoi anche specificare una combinazione di scrittura e regione, ad esempio utilizza zh-Hans-TW per specificare cinese (semplificato) per gli utenti taiwanesi.

Infine, il valore “x-default” viene utilizzato per indicare i selettori/reindirizzatori della lingua che non sono specifici di una lingua o di una zona geografica, ad esempio la tua homepage che mostra una mappa del mondo su cui è possibile fare clic (language gate).

Targeting generico con x-default

Come avrai visto nell’esempio postato sopra con le righe di alternate hreflang, l’ultima riga comprende l’attributo x-default. Questo attributo dice ai motori di ricerca che la pagina linkata non targettizza nessuna lingua/regione in particolare.

Hreflang ed impatti sulla SEO

Non è detto che implementando l’attributo hreflang aumenti il traffico dai motori di ricerca, l’obiettivo di questo attributo è far servire dai motori di ricerca il contenuto corretto all’utente corretto. L’hreflang è un segnale che aiuta i motori di ricerca a posizionare la versione della pagina specifica per la località e la lingua dell’utente che esegue la ricerca.

La differenza tra hreflang e canonicalizzazione delle risorse

La canonicalizzazione delle risorse è uno strumento per indicare ai motori di ricerca la versione predefinita dell’URL di una data pagina, per evitare problemi di duplicazione dei contenuti. L’attributo hreflang invece è uno strumento per indicare quale pagina è più adatta in base a località e lingua dell’utente. Le due tag hanno funzioni e finalità differenti.

Canonical e hreflang insieme?

Google consiglia di non usare la tag rel=”canonical” su pagine che targettizzano paesi o lingue differenti. La tag rel canonical invece andrebbe usata su pagine che targettizzano la stessa lingua o paese. In pratica però si vede spesso convivere canonical e hreflang insieme, vedi le pagine di booking.com:
https://gist.github.com/evemilano/e1678509e215f3744708b12a22c0227c.js
Come puoi verificare, la riga 1 (canonical tag) punta lo stesso URL della riga 11 (hreflang).

Quando è meglio usare hreflang

Di seguito sono riportati alcuni scenari in cui è consigliabile utilizzare rel=”alternate” hreflang=”x”:

  • Mantieni i contenuti principali in una sola lingua e traduci soltanto il modello, ad esempio la barra di navigazione e il piè di pagina. Si tratta di una soluzione comune per le pagine con contenuti generati dagli utenti come i forum.
  • I tuoi contenuti presentano piccole varianti locali ma le pagine hanno contenuti simili in un’unica lingua. Ad esempio, potresti avere contenuti in inglese destinati a utenti di Stati Uniti, Gran Bretagna e Irlanda.
  • I contenuti del tuo sito sono completamente tradotti. Ad esempio, per ogni pagina hai le versioni in tedesco e in inglese.
  • Utilizzo delle annotazioni per la lingua

    Immagina di avere una pagina in lingua inglese in hosting all’indirizzo http://www.esempio.com, e una versione diversa in spagnolo all’indirizzo es.esempio.com. Puoi comunicare a Google che l’URL spagnolo è l’equivalente in lingua spagnola della pagina in inglese in uno dei tre metodi spiegati di seguito:

    Elemento link HTML nell’intestazione

    Nella sezione head del codice HTML di http://www.esempio.com/, aggiungi l’elemento hreflang che rimandi alle versione spagnola della pagina web all’indirizzo http://es.esempio.com/.

    Hreflang nell’intestazione HTTP

    Se pubblichi file in formato diverso da HTML (ad esempio PDF), puoi utilizzare l’intestazione HTTP per indicare una versione o più versioni in lingua alternativa di un URL:
    https://gist.github.com/evemilano/d871ce34cd071e37f8c49a1774cd18b3.js

    Href nella Sitemap.xml

    Invece di utilizzare il markup, puoi inserire le informazioni sulla versione in lingua nella sitemap.xml. Se hai versioni di un URL in più lingue, per la pagina in ogni lingua devi identificare le versioni in tutte le lingue, inclusa quella in questione. Ad esempio, se il tuo sito ha contenuti in francese, inglese e spagnolo, la versione spagnola deve contenere un link rel=”alternate” hreflang=”x” per se stessa oltre a link che rimandino alle versioni in francese e inglese, mentre queste ultime devono includere ognuna gli stessi riferimenti alle versioni in francese, inglese e spagnolo.

    Vedi questo esempio:
    https://gist.github.com/evemilano/1659ee8178fa9178c0f9635eecc510f0.js

    Puoi specificare URL in più lingue nello stesso dominio oppure utilizzare URL di un dominio diverso. Se hai numerosi URL alternativi indirizzati a utenti con la stessa lingua ma situati in località diverse, è opportuno specificare un URL generico per gli utenti la cui area geografica non è specificata. Ad esempio, potresti avere URL specifici per utenti anglofoni in Irlanda (en-ie), Canada (en-ca) e Australia (en-au), ma potresti volere che per tutti gli altri utenti anglofoni venga visualizzata la tua pagina generica in inglese (en) e che per tutti gli altri venga visualizzata la home page. In questo caso devi specificare la pagina generica in lingua inglese (en) per gli utenti che eseguono ricerche nel Regno Unito, ad esempio. Puoi annotare questo cluster di pagine utilizzando un file Sitemap o tag link HTML, come segue:
    https://gist.github.com/evemilano/dc10b8923e8d8f2c114b3a792e9bd438.js
    Per selettori di lingua/Paese o le home page con reindirizzamento automatico, devi aggiungere un’annotazione anche per il valore “x-default” di hreflang:
    https://gist.github.com/evemilano/0496ac516a3169fbd1cc09a0704ab925.js

    Errori comuni

    Assicurati che il valore hreflang specificato sia effettivamente valido, l’URL inserito deve esistere (status code 200). Presta particolare attenzione ai due errori più frequenti:

    • Assenza di link di conferma. Se la pagina A rimanda alla pagina B, la pagina B deve rimandare alla pagina A. Se non è così per tutte le pagine che utilizzano le annotazioni hreflang, tali annotazioni potrebbero essere ignorate o interpretate scorrettamente.
    • Codici lingua sbagliati. Assicurati che in tutti i codici lingua utilizzati siano identificate la lingua (in formato ISO 639-1) e, facoltativamente, zona geografica (in formato ISO 3166-1 Alpha 2) di un URL alternativo. La specifica soltanto dell’area geografica non è valida.

    Spero che questa guida ti abbia aiutato a comprendere meglio le finalità di questa importante tag per la SEO. Se qualcosa non ti fosse ancora chiaro lascia un commento!