seo - architettura dell'informazione
DESCRIPTION
SEO per Architettura dell'Informazione, Usabilità ed Esperienza UtenteTRANSCRIPT
SEO e architettura
dell’informazione
. introduzione. desktop. mobile. errori
. esempi. risorse consigliate
. conclusioni
SEO e architettura dell’informazione
ai + usabilità + user xperience
=
utente
introduzione
perché usabilità e SEO insieme sono importanti per una
strategia web?
introduzione
#1 il motore di ricerca è contento quanto
l’utente è contento (il rischio è che l’utente cambi motore di
ricerca)
introduzione
#2 il motore di ricerca premia le risorse che
fanno contento l’utente (meno quantità e più qualità;
Pagerank > Trustrank)
introduzione
qualità? . velocità di caricamento
. facilità di navigazione. struttura di link interna “facile”
. no contenuti duplicati. contenuti rilevanti
. layout di pagina
introduzione
ma (se dovessi scegliere) chi è più importante?
introduzione
introduzione
introduzione
2012
2008
[sembra esserci confusione]
sono discipline diverse:
SEO > legato al (search) mktgux > correlato allo sviluppo
introduzione
[sembra esserci confusione]
ma si stanno scambiando i ruoli:
SEO > ha implicazioni tecniche
ux > correlato all’incremento di conversioni e performance
introduzione
si intravede anche la figura professionale del SEO di
domani: sempre più attento all’utente, senza perdere di
vista i motori di ricerca
introduzione
“Find a usability professional with knowledge of search
marketing, in my opinion, is a must”, Kim Krause Berg
(searchengineland.com)
introduzione
introduzione
[non dirò mai di averlo detto :)]
dò una priorità al SEO:#1 se non ti trovano, non ti
visitano (soprattutto in Italia, soprattutto per l’ecommerce)
#2 Google premia i siti usabili, ma non penalizza
quelli non usabili
introduzione
. introduzione. desktop. mobile. errori
. esempi. risorse consigliate
. conclusioni
SEO e architettura dell’informazione
[road map]. obiettivi
desktop
[road map]. obiettivi
. target (path)
desktop
[road map]. obiettivi
. target (path). contenuti (risposta)
desktop
[road map]
. obiettivi. target (path)
. contenuti (risposta). priorità > architettura
. tone of voice
desktop
desktop
desktop
aspetti da considerare in termini di
ottimizzazione lato SEO e lato utente
desktop
. chiedete al vostro fornitore di ospitare il
sito web presso un server veloce
desktop
. se vendete all’estero, “mandate a quel
Paese” anche TLD e spazio web :)
desktop
usabilità nelle SERP
. definite un’alberatura
“comoda” per utente e motore di ricerca (in
quest’ordine)
desktop
usabile.it/392009.htmsurl.org/usabilitynews/42/hypertext.asp
desktop
. [alberatura] utilizzate anche gli strumenti forniti
da google per determinare categorie
e sottocategorie
desktop
. [alberatura] è l’opportunità di ottimizzare per la long
tail (sia la testa che la coda)
desktop
. stampate nell’URL le parole chiave1. non migliora il ranking
desktop
. stampate nell’URL le parole chiave1. non migliora il ranking
2. aiuta google a contestualizzare
desktop
. stampate nell’URL le parole chiave1. non migliora il ranking
2. aiuta google a contestualizzare3. migliora l’usabilità nelle SERP
desktop
. utilizzate path/breadcrumbs
desktop
desktop
. differenzepath
“sei qui: home > cat > sub cat”
breadcrumbs“sei qui: step#1 > step#2 > step#3”
desktop
. path/breadcrumbs e usabilità
1. aiutano l’utente a posizionarsi all’interno dell’alberatura informativa
desktop
. path/breadcrumbs e usabilità
1. aiutano l’utente a posizionarsi all’interno dell’alberatura informativa
2. permettono di accedere a pagine di livello superiore con un click
desktop
. path/breadcrumbs e usabilità
1. aiutano l’utente a posizionarsi all’interno dell’alberatura informativa
2. permettono di accedere a pagine di livello superiore con un click
3. non hanno mai causato “problemi” durante i testi di usabilità
desktop
. path/breadcrumbs e usabilità
1. aiutano l’utente a posizionarsi all’interno dell’alberatura informativa
2. permettono di accedere a pagine di livello superiore con un click
3. non hanno mai causato “problemi” durante i testi di usabilità
4. occupano poco spazio nella pagina
desktop
. path/breadcrumbs e usabilità
1. aiutano l’utente a posizionarsi all’interno dell’alberatura informativa
2. permettono di accedere a pagine di livello superiore con un click
3. non hanno mai causato “problemi” durante i testi di usabilità
4. occupano poco spazio nella pagina5. riducono il bounce rate
desktop
. path/breadcrumbs e usabilità
1. aiutano l’utente a posizionarsi all’interno dell’alberatura informativa
2. permettono di accedere a pagine di livello superiore con un click
3. non hanno mai causato “problemi” durante i testi di usabilità
4. occupano poco spazio nella pagina5. riducono il bounce rate
6. sono facilmente comprensibili dall’utente
desktop
. path/breadcrumbs e SEO
1. sono un’opportunità per inserire parole chiave e termini correlati
desktop
. path/breadcrumbs e SEO
1. sono un’opportunità per inserire parole chiave e termini correlati
2. aiutano il motore nell’attività di contestualizzazione del contenuto
desktop
. path/breadcrumbs e SEO
1. sono un’opportunità per inserire parole chiave e termini correlati
2. aiutano il motore nell’attività di contestualizzazione del contenuto
3. in alcuni casi vengono stampate nelle SERP e favoriscono il CTR
desktop
desktop
. path/breadcrumbs: linee guida
1. non dovrebbero sostituirsi alla navigazione principale
desktop
. path/breadcrumbs: linee guida
1. non dovrebbero sostituirsi alla navigazione principale2. meglio il path piuttosto che le breadcrumbs
desktop
. path/breadcrumbs: linee guida
1. non dovrebbero sostituirsi alla navigazione principale2. meglio il path piuttosto che le breadcrumbs
3. se le pagine del sito sono allo stesso livello, sono inutili
desktop
. path/breadcrumbs: linee guida
1. non dovrebbero sostituirsi alla navigazione principale2. meglio il path piuttosto che le breadcrumbs
3. se le pagine del sito sono allo stesso livello, sono inutili4. dovrebbero essere pubblicate sopra la piega
desktop
. path/breadcrumbs: linee guida
1. non dovrebbero sostituirsi alla navigazione principale2. meglio il path piuttosto che le breadcrumbs
3. se le pagine del sito sono allo stesso livello, sono inutili4. dovrebbero essere pubblicate sopra la piega5. non dovrebbero essere troppo grandi (pixel)
desktop
. path/breadcrumbs: linee guida
1. non dovrebbero sostituirsi alla navigazione principale2. meglio il path piuttosto che le breadcrumbs
3. se le pagine del sito sono allo stesso livello, sono inutili4. dovrebbero essere pubblicate sopra la piega5. non dovrebbero essere troppo grandi (pixel)
6. dovrebbero partire dalla homepage e chiudersi con la pagina visualizzata
desktop
. path/breadcrumbs: linee guida
1. non dovrebbero sostituirsi alla navigazione principale2. meglio il path piuttosto che le breadcrumbs
3. se le pagine del sito sono allo stesso livello, sono inutili4. dovrebbero essere pubblicate sopra la piega5. non dovrebbero essere troppo grandi (pixel)
6. dovrebbero partire dalla homepage e chiudersi con la pagina visualizzata
7. consistenza in termini di label tra menu e path/breadcrumbs
desktop
. pensate ad una soluzione nel caso il
prodotto sia temporaneamente
non disponibile
desktop
NO!
desktop
. pensate ad una soluzione nel caso il
prodotto sia definitivamente non
disponibile
desktop
desktop
. allineate i contenuti ai markup di schema.org
1. comprensione dei contenuti più marcata (anche per gli spider)
2. rich snippet > +CTR
desktop
desktop
. i contenuti più strategici dovrebbero essere posti “sopra la
piega”: google apprezzerà (http://goo.gl/9sMzp)
desktop
desktop
1280x800+80%
[let me be more confident]
. implementate recensioni/commenti degli utenti (non registrati): google apprezzerà
(contenuti “freschi”)
desktop
desktop
[let me be more confident]
. implementate (non troppo!)
i pulsanti social: google ha confermato che ne terrà conto per
la visibilità
desktop
desktop
. utilizzate contenuti media (img/video): valgono più di mille parole e google images porta un sacco di traffico!
desktop
. utilizzate i contenuti correlati
desktop
desktop
. utilizzate i contenuti correlati:
1. ottimizza la matrice di link2. aiuta a contestualizzare3. favorisce la navigazione
desktop
. ottimizzate i filtri di visualizzazione
desktop
desktop
. ottimizzate i filtri di visualizzazione: sono
utili ma possono generare contenuti duplicati (rel=”canonical”)
desktop
. ottimizzate la paginazione
desktop
desktop
. ottimizzate la paginazione: è utile (la
spiderizzazione) ma genera contenuti duplicati/di
valore inferiore
desktop
. paginazione: ma quanti link ci dovrei
mettere? e quanti risultati per pagina?
desktop
[paginazione]
1. “1, 2, 3, ...”lo spider potrebbe
metterci troppi click per spiderizzare fino
all’ultima pagina
desktop
[paginazione]
2. “risultati 1-5 di 50”sottoinsiemi piccoli di risultati aumentano il numero di pagine da
indicizzare (poco valore aggiunto)
desktop
[paginazione]
quindi?. restituite un numero
ragionevole di risultati per pagina
desktop
[paginazione]
quindi?. create, in caso, un
livello “extra” (sottocategorie?)
per circoscrivere la questione
desktop
[paginazione]
quindi?. linkate in cima ai
risultati le risorse più “fresche”/strategiche
desktop
[paginazione]
quindi?. non superate il
limite “certificato” da google: 100 link/
pagina (non dimenticate il menu!)
desktop
[paginazione]
quindi?. utilizzate i comandi
“noindex, follow”
desktop
[paginazione]
quindi?. variate i meta tag (title,
description) di pagina 1, 2, 3, ...
desktop
[paginazione]
quindi?. permettete all’utente di variare il numero di
risultati visualizzati per pagina
desktop
. non abusate dei tag: Panda is watching
you!
desktop
desktop
. linkate dalla homepage le pagine
più strategiche (la homepage dovrebbe aiutare anche ad individuare da
subito i contenuti top): google capirà
desktop
. rendete l’informazione facile
da trovare nella pagina: google sa se si
torna nella SERP
desktop
. ottimizzate le informazioni
“nascoste” (alt/title per link/
img): pensate agli utenti diversamente abili
desktop
. ottimizzate le informazioni
“nascoste” (alt/title per link/
img): forniscono a google più dettagli
desktop
desktop
. sviluppate il codice secondo gli standard W3C: utente e google apprezzeranno (ma lui non
favorirà il ranking!)
desktop
. utilizzate gli header di formattazione (H1,
H2, ..., Hx): aiutate l’utente (e google) a comprendere
da subito l’argomento
desktop
desktop
[header di formattazione: linee guida]
. un H1 per pagina
desktop
[header di formattazione: linee guida]
. un H1 per pagina. l’H1 è quello che dovrebbe
essere visto per primo
desktop
[header di formattazione: linee guida]
. un H1 per pagina. l’H1 è quello che dovrebbe
essere visto per primo. prima dell’H3 c’è l’H2
desktop
[header di formattazione: linee guida]
. un H1 per pagina. l’H1 è quello che dovrebbe
essere visto per primo. prima dell’H3 c’è l’H2
. considerate nell’H1 la parola chiave
desktop
[header di formattazione: linee guida]
. un H1 per pagina. l’H1 è quello che dovrebbe
essere visto per primo. prima dell’H3 c’è l’H2
. considerate nell’H1 la parola chiave
. Hx semanticamente vicini ad H1
desktop
. per i testi con gli “effetti speciali”
[NI] sIFR (http://goo.gl/ygXF1)
[SI] google fonts (http://goo.gl/vDIXe)
desktop
desktop
. il logo del brand (in alto a
sinistra): lato utente è quasi uno standard,
ottimizzatelo per google (alt/title)
desktop
desktop
. il link dovrebbe favorire il click?
dipende!
desktop
. il link dovrebbe favorire il click?
[lato utente] dovrebbe considerare una call
to action (poco SEO)
desktop
. il link dovrebbe favorire il click?[SEO] dovrebbe
considerare la parola chiave (poco accattivante)
desktop
. il link dovrebbe favorire il click?
[mix] “ordina %nome_prodotto
oggi!”
desktop
. ottimizzate i meta tag (e le label, http://goo.gl/w7y7A) di tutte le pagine: creare
degli snippet più usabili nelle SERP
desktop
. considerate/ottimizzate il motore
di ricerca interno!
desktop
. motore di ricerca interno:
[lato utente] utile a raffinare la ricerca (è
tracciabile!)
desktop
. motore di ricerca interno:
[SEO] impedite a google di indicizzare
“queste” SERP (es. robots.txt)
desktop
. introduzione. desktop. mobile. errori
. esempi. risorse consigliate
. conclusioni
SEO e architettura dell’informazione
ai, ux, usabilità e SEO differiscono nel contesto mobile rispetto a quello
desktop
mobile
. necessità, momenti e luoghi sono diversi. le parole chiave di ricerca sono diverse
mobile
. ricerca e fruzione dei contenuti sono diversi: rapida,
impaziente, che si “consuma” prima
mobile
. le performance (tecnologiche)
potenzialmente sono inferiori (3G vs ADSL)
mobile
. le pagine dei risultati di ricerca sono
differenti (Google considera le risorse sviluppate per smartphone per
ricerche fatte da smartphone)
mobile
. esiste un mobile search engine score
per il posizionamento
mobile
. nel contesto mobile l’usabilità e la ux richiedono più
attenzioni: c’è meno spazio!
mobile
. il layout dovrebbe essere rivisto anche nell’ottica di pesare
(kbyte) meno: google apprezzerà
mobile
. va data più enfasi (quindi posta più in alto)
all’informazione principale: google
apprezzerà
mobile
. va data meno enfasi (quindi posta più in basso)
all’informazione ridondante (header, menu): google apprezzerà
mobile
. path/breadcrumbs diventano ancora più
importanti perché non c’è il menu che aiuta ad orientarsi
mobile
mobile
. introduzione. desktop. mobile. errori
. esempi. risorse consigliate
. conclusioni
SEO e architettura dell’informazione
#1 (quando si ridisegna un sito web) pensare che un sito più piccolo (con meno pagine) sia più
facile:. visite da long tail a rischio!
. il numero di risorse a db concorre a determinare il
“peso” di una risorsa
errori
#2 label ridondanti negli insiemi di link (menu) :. keyword stuffing!
. ux negativa
errori
errori
. introduzione. desktop. mobile. errori
. esempi. risorse consigliate
. conclusioni
SEO e architettura dell’informazione
esempi (negativi)
esempi (negativi)
troppi elementi di distrazione nella pagina che “parlano” a
troppi target insieme:. menu a sinistra
. promozione di Kindle (posizionamento aziendale). selezione di prodotti per la donna
. fotocamere in promozione. advertising
. “deal of the day”
esempi (negativi)
esempi (negativi)
. difficile da utilizzare. difficile da vedere (Flash
required)
. non c’è una “direzione”. troppi punti di interazione
esempi (positivi)
esempi (positivi)
. design ed interfaccia semplici. (molta) attenzione al copy
. navigazione ed orientamento nell’architettura “facile”
. chiare call to action. ottimo utilizzo di spazi bianchi,
immagini e pulsanti
esempi (positivi)
esempi (positivi)
. design ed interfaccia pulite
. percorsi/target distinti e chiari
. introduzione. desktop. mobile. errori
. esempi. risorse consigliate
. conclusioni
SEO e architettura dell’informazione
risorse consigliate
agenzie:
. About User/Doralab (Italia)
. Cre8pc (US)
tool:
. Loop11
blog:
. Usabile.it/Mucignat.com
. Useit.comlibri:
. Information Architecture for the WWW
. Don’t make me think
. introduzione. desktop. mobile. errori
. esempi. risorse consigliate
. conclusioni
SEO e architettura dell’informazione
come dovrebbe essere quindi un sito web
ottimizzato (lato SEO ed utente)?
conclusioni
. usabile. comprensibile
. orientato alla conversione. ben posizionato
. che generi entrate/conversioni
conclusioni
now you know ;)
SEO e architettura dell’informazione
make it work ;)
SEO e architettura dell’informazione
Marco Ziero@marcoziero
SEO e architettura dell’informazione