Vuoi ricevere i prossimi contenuti e slide? Iscriviti alla newsletter. È gratis. :) bit.ly/mocanewsletter Slide presentate con l'occasione del workshop "RankingLab Advanced SEO" organizzato da Digital Accademia utili ad affrontare l'argomento "SEO ed Architettura dell'Informazione" con approfondimenti circa l'usabilità e l'esperienza utente (con riferimenti al mobile, con esempi positivi e negativi, best practices e risorse consigliate).

1. SEO e
architettura
dell’informazione

2. SEO e architettura dell’informazione
. introduzione
. desktop
. mobile
. errori
. esempi
. risorse consigliate
. conclusioni

3. introduzione
ai + usabilità + user
xperience
=
utente

4. introduzione
perché usabilità e
SEO insieme sono
importanti per una
strategia web?

5. introduzione
#1 il motore di ricerca
è contento quanto
l’utente è contento (il
rischio è che l’utente cambi motore di
ricerca)

6. introduzione
#2 il motore di ricerca
premia le risorse che
fanno contento
l’utente (meno quantità e più qualità;
Pagerank > Trustrank)

7. introduzione
qualità?
. velocità di caricamento
. facilità di navigazione
. struttura di link interna “facile”
. no contenuti duplicati
. contenuti rilevanti
. layout di pagina

8. introduzione
ma (se dovessi scegliere) chi è
più importante?

9. introduzione

10. introduzione
2012
2008

11. introduzione
[sembra esserci confusione]
sono discipline diverse:
SEO > legato al (search) mktg
ux > correlato allo sviluppo

12. introduzione
[sembra esserci confusione]
ma si stanno scambiando i ruoli:
SEO > ha implicazioni
tecniche
ux > correlato all’incremento
di conversioni e performance

13. introduzione
si intravede anche la figura
professionale del SEO di
domani: sempre più attento
all’utente, senza perdere di
vista i motori di ricerca

14. introduzione
“Find a usability professional
with knowledge of search
marketing, in my opinion, is
a must”, Kim Krause Berg
(searchengineland.com)

15. introduzione

16. 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

17. SEO e architettura dell’informazione
. introduzione
. desktop
. mobile
. errori
. esempi
. risorse consigliate
. conclusioni

18. desktop
[road map]
. obiettivi

19. desktop
[road map]
. obiettivi
. target (path)

20. desktop
[road map]
. obiettivi
. target (path)
. contenuti (risposta)

21. desktop
[road map]
. obiettivi
. target (path)
. contenuti (risposta)
. priorità > architettura
. tone of voice

22. desktop

23. desktop

24. desktop
aspetti da considerare
in termini di
ottimizzazione lato
SEO e lato utente

25. desktop
. chiedete al vostro
fornitore di ospitare il
sito web presso un
server veloce

26. desktop
. se vendete all’estero,
“mandate a quel
Paese” anche TLD e
spazio web :) usabilità nelle
SERP

27. desktop
. definite
un’alberatura
“comoda” per utente e
motore di ricerca (in
quest’ordine)

28. desktop
usabile.it/392009.htm
surl.org/usabilitynews/42/hypertext.asp

29. desktop
. utilizzate anche
[alberatura]
gli strumenti forniti
da google per
determinare categorie
e sottocategorie

30. desktop
. è l’opportunità di
[alberatura]
ottimizzare per la long
tail (sia la testa che la coda)

31. desktop
. stampate nell’URL le
parole chiave
1. non migliora il ranking

32. desktop
. stampate nell’URL le
parole chiave
1. non migliora il ranking
2. aiuta google a contestualizzare

33. desktop
. stampate nell’URL le
parole chiave
1. non migliora il ranking
2. aiuta google a contestualizzare
3. migliora l’usabilità nelle SERP

34. desktop
. utilizzate path/
breadcrumbs

35. desktop

36. desktop
. differenze
path
“sei qui: home > cat > sub cat”
breadcrumbs
“sei qui: step#1 > step#2 > step#3”

37. desktop
. path/breadcrumbs e
usabilità
1. aiutano l’utente a posizionarsi all’interno dell’alberatura
informativa

38. 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

39. 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à

40. 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

41. 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
5. riducono il bounce rate

42. 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
5. riducono il bounce rate
6. sono facilmente comprensibili dall’utente

43. desktop
. path/breadcrumbs e
SEO
1. sono un’opportunità per inserire parole chiave e termini
correlati

44. 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

45. 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

46. desktop

47. desktop
. path/breadcrumbs:
linee guida
1. non dovrebbero sostituirsi alla navigazione principale

48. desktop
. path/breadcrumbs:
linee guida
1. non dovrebbero sostituirsi alla navigazione principale
2. meglio il path piuttosto che le breadcrumbs

49. desktop
. path/breadcrumbs:
linee guida
1. non dovrebbero sostituirsi alla navigazione principale
2. meglio il path piuttosto che le breadcrumbs
3. se le pagine del sito sono allo stesso livello, sono inutili

50. desktop
. path/breadcrumbs:
linee guida
1. non dovrebbero sostituirsi alla navigazione principale
2. meglio il path piuttosto che le breadcrumbs
3. se le pagine del sito sono allo stesso livello, sono inutili
4. dovrebbero essere pubblicate sopra la piega

51. desktop
. path/breadcrumbs:
linee guida
1. non dovrebbero sostituirsi alla navigazione principale
2. meglio il path piuttosto che le breadcrumbs
3. se le pagine del sito sono allo stesso livello, sono inutili
4. dovrebbero essere pubblicate sopra la piega
5. non dovrebbero essere troppo grandi (pixel)

52. desktop
. path/breadcrumbs:
linee guida
1. non dovrebbero sostituirsi alla navigazione principale
2. meglio il path piuttosto che le breadcrumbs
3. se le pagine del sito sono allo stesso livello, sono inutili
4. dovrebbero essere pubblicate sopra la piega
5. non dovrebbero essere troppo grandi (pixel)
6. dovrebbero partire dalla homepage e chiudersi con la
pagina visualizzata

53. desktop
. path/breadcrumbs:
linee guida
1. non dovrebbero sostituirsi alla navigazione principale
2. meglio il path piuttosto che le breadcrumbs
3. se le pagine del sito sono allo stesso livello, sono inutili
4. dovrebbero essere pubblicate sopra la piega
5. 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

54. desktop
. pensate ad una
soluzione nel caso il
prodotto sia
temporaneamente
non disponibile

55. desktop
NO!

56. desktop
. pensate ad una
soluzione nel caso il
prodotto sia
definitivamente non
disponibile

57. desktop

58. desktop
. allineate i contenuti
ai markup di
schema.org
1. comprensione dei contenuti più marcata
(anche per gli spider)
2. rich snippet > +CTR

59. desktop

60. desktop
. i contenuti più
strategici dovrebbero
essere posti “sopra la
piega”: google
apprezzerà (http://goo.gl/9sMzp)

61. desktop
1280x800
+80%

62. desktop
[let me be more confident]
. implementate
recensioni/commenti
degli utenti (non registrati):
google apprezzerà
(contenuti “freschi”)

63. desktop

64. desktop
[let me be more confident]
. implementate (non troppo!)
i pulsanti social:
google ha confermato
che ne terrà conto per
la visibilità

65. desktop

66. desktop
. utilizzate contenuti
media (img/video): valgono
più di mille parole e
google images porta
un sacco di traffico!

67. desktop
. utilizzate i contenuti
correlati

68. desktop

69. desktop
. utilizzate i contenuti
correlati:
1. ottimizza la matrice di link
2. aiuta a contestualizzare
3. favorisce la navigazione

70. desktop
. ottimizzate i filtri di
visualizzazione

71. desktop

72. desktop
. ottimizzate i filtri di
visualizzazione: sono
utili ma possono
generare contenuti
duplicati (rel=”canonical”)

73. desktop
. ottimizzate la
paginazione

74. desktop

75. desktop
. ottimizzate la
paginazione: è utile (la
spiderizzazione) ma genera
contenuti duplicati/di
valore inferiore

76. desktop
. paginazione: ma
quanti link ci dovrei
mettere? e quanti
risultati per pagina?

77. desktop
[paginazione]
1. “1, 2, 3, ...”
lo spider potrebbe
metterci troppi click
per spiderizzare fino
all’ultima pagina

78. desktop
[paginazione]
2. “risultati 1-5 di 50”
sottoinsiemi piccoli di
risultati aumentano il
numero di pagine da
indicizzare (poco valore aggiunto)

79. desktop
[paginazione]
quindi?
. restituite un numero
ragionevole di
risultati per pagina

80. desktop
[paginazione]
quindi?
. create, in caso, un
livello “extra” (sottocategorie?)
per circoscrivere la
questione

81. desktop
[paginazione]
quindi?
. linkate in cima ai
risultati le risorse più
“fresche”/strategiche

82. desktop
[paginazione]
quindi?
. non superate il
limite “certificato” da
google: 100 link/
pagina (non dimenticate il menu!)

83. desktop
[paginazione]
quindi?
. utilizzate i comandi
“noindex, follow”

84. desktop
[paginazione]
quindi?
. variate i meta tag (title,
description) di pagina 1, 2,
3, ...

85. desktop
[paginazione]
quindi?
. permettete all’utente
di variare il numero di
risultati visualizzati
per pagina

86. desktop
. non abusate dei tag:
Panda is watching
you!

87. desktop

88. desktop
. linkate dalla
homepage le pagine
più strategiche (la homepage
dovrebbe aiutare anche ad individuare da
: google
subito i contenuti top)
capirà

89. desktop
. rendete
l’informazione facile
da trovare nella
pagina: google sa se si
torna nella SERP

90. desktop
. ottimizzate le
informazioni
“nascoste” (alt/title per link/
img): pensate agli utenti
diversamente abili

91. desktop
. ottimizzate le
informazioni
“nascoste” (alt/title per link/
img): forniscono a
google più dettagli

92. desktop

93. desktop
. sviluppate il codice
secondo gli standard
W3C: utente e google
apprezzeranno (ma lui non
favorirà il ranking!)

94. desktop
. utilizzate gli header
di formattazione (H1,
H2, ..., Hx): aiutate l’utente
(e google) a comprendere
da subito l’argomento

95. desktop

96. desktop
[header di formattazione: linee guida]
. un H1 per pagina

97. desktop
[header di formattazione: linee guida]
. un H1 per pagina
. l’H1 è quello che dovrebbe
essere visto per primo

98. 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

99. 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

100. 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

101. desktop
. per i testi con gli
“effetti speciali”
[NI] sIFR (http://goo.gl/ygXF1)
[SI] google fonts (http://
goo.gl/vDIXe)

102. desktop

103. desktop
. il logo del brand
(in alto a
: lato utente è
sinistra)
quasi uno standard,
ottimizzatelo per
google (alt/title)

104. desktop

105. desktop
. il link dovrebbe
favorire il click?
dipende!

106. desktop
. il link dovrebbe
favorire il click?
[lato utente] dovrebbe
considerare una call
to action (poco SEO)

107. desktop
. il link dovrebbe
favorire il click?
[SEO] dovrebbe
considerare la parola
chiave (poco accattivante)

108. desktop
. il link dovrebbe
favorire il click?
[mix] “ordina
%nome_prodotto
oggi!”

109. desktop
. ottimizzate i meta
tag (e le label, http://goo.gl/w7y7A) di
tutte le pagine: creare
degli snippet più
usabili nelle SERP

110. desktop
. considerate/
ottimizzate il motore
di ricerca interno!

111. desktop
. motore di ricerca
interno:
[lato utente] utile a
raffinare la ricerca (è
tracciabile!)

112. desktop
. motore di ricerca
interno:
[SEO] impedite a
google di indicizzare
“queste” SERP (es. robots.txt)

113. SEO e architettura dell’informazione
. introduzione
. desktop
. mobile
. errori
. esempi
. risorse consigliate
. conclusioni

114. mobile
ai, ux, usabilità e SEO
differiscono nel
contesto mobile
rispetto a quello
desktop

115. mobile
. necessità, momenti e
luoghi sono diversi
. le parole chiave di
ricerca sono diverse

116. mobile
. ricerca e fruzione dei
contenuti sono
diversi: rapida,
impaziente, che si
“consuma” prima

117. mobile
. le performance
(tecnologiche)
potenzialmente sono
inferiori (3G vs ADSL)

118. mobile
. le pagine dei risultati
di ricerca sono
differenti (Google considera le
risorse sviluppate per smartphone per
ricerche fatte da smartphone)

119. mobile
. esiste un mobile
search engine score
per il posizionamento

120. mobile
. nel contesto mobile
l’usabilità e la ux
richiedono più
attenzioni: c’è meno
spazio!

121. mobile
. il layout dovrebbe
essere rivisto anche
nell’ottica di pesare
(kbyte) meno: google
apprezzerà

122. mobile
. va data più enfasi
(quindi posta più in alto)
all’informazione
principale: google
apprezzerà

123. mobile
. va data meno enfasi
(quindi posta più in basso)
all’informazione
ridondante (header, menu):
google apprezzerà

124. mobile
. path/breadcrumbs
diventano ancora più
importanti perché
non c’è il menu che
aiuta ad orientarsi

125. mobile

126. SEO e architettura dell’informazione
. introduzione
. desktop
. mobile
. errori
. esempi
. risorse consigliate
. conclusioni

127. errori
#1 pensare che un
(quando si ridisegna un sito web)
sito più piccolo sia più (con meno pagine)
facile:
. visite da long tail a rischio!
. il numero di risorse a db
concorre a determinare il
“peso” di una risorsa

128. errori
#2 label ridondanti negli
insiemi di link :
(menu)
. keyword stuffing!
. ux negativa

129. errori

130. SEO e architettura dell’informazione
. introduzione
. desktop
. mobile
. errori
. esempi
. risorse consigliate
. conclusioni

131. esempi (negativi)

132. 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”

133. esempi (negativi)

134. esempi (negativi)
. difficile da utilizzare
. difficile da vedere (Flash
required)
. non c’è una “direzione”
. troppi punti di interazione

135. esempi (positivi)

136. 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

137. esempi (positivi)

138. esempi (positivi)
. design ed interfaccia
pulite
. percorsi/target
distinti e chiari

139. SEO e architettura dell’informazione
. introduzione
. desktop
. mobile
. errori
. esempi
. risorse consigliate
. conclusioni

140. risorse consigliate
agenzie:
. About User/Doralab (Italia)
. Cre8pc (US)
tool:
. Loop11
blog:
. Usabile.it/Mucignat.com
. Useit.com
libri:
. Information Architecture for the WWW
. Don’t make me think

141. SEO e architettura dell’informazione
. introduzione
. desktop
. mobile
. errori
. esempi
. risorse consigliate
. conclusioni

142. conclusioni
come dovrebbe essere
quindi un sito web
ottimizzato (lato SEO
ed utente)?

143. conclusioni
. usabile
. comprensibile
. orientato alla conversione
. ben posizionato
. che generi entrate/
conversioni

144. SEO e architettura dell’informazione
now you
know ;)

145. SEO e architettura dell’informazione
make it
work ;)

146. SEO e architettura dell’informazione
Marco Ziero
@marcoziero