SEO per Architettura dell'Informazione, Usabilità ed Esperienza Utente

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



. conclusioni


[road map]. obiettivi

desktop


. target (path)

desktop


. target (path). contenuti (risposta)

desktop

[road map]

. obiettivi. target (path)

. contenuti (risposta). priorità > architettura

. tone of voice

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


2. aiuta google a contestualizzare

desktop


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



2. permettono di accedere a pagine di livello superiore con un click

desktop




3. non hanno mai causato “problemi” durante i testi di usabilità

desktop





4. occupano poco spazio nella pagina

desktop





4. occupano poco spazio nella pagina5. riducono il bounce rate

desktop





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



2. aiutano il motore nell’attività di contestualizzazione del contenuto

desktop



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


1. non dovrebbero sostituirsi alla navigazione principale2. meglio il path piuttosto che le breadcrumbs

desktop



3. se le pagine del sito sono allo stesso livello, sono inutili

desktop



3. se le pagine del sito sono allo stesso livello, sono inutili4. dovrebbero essere pubblicate sopra la piega

desktop



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




6. dovrebbero partire dalla homepage e chiudersi con la pagina visualizzata

desktop




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


. un H1 per pagina. l’H1 è quello che dovrebbe

essere visto per primo

desktop



essere visto per primo. prima dell’H3 c’è l’H2

desktop




. considerate nell’H1 la parola chiave

desktop




. 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


[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


[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



. conclusioni


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



. conclusioni


#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



. conclusioni


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



. conclusioni


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



. conclusioni


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 ;)


make it work ;)


Marco Ziero@marcoziero


SEO per Architettura dell'Informazione, Usabilità ed Esperienza Utente

Technology

Transcript of SEO per Architettura dell'Informazione, Usabilità ed Esperienza Utente