1. Fattori OnPage e HTML 5
Web semantico e rich snippet
Marco Antonutti
2. Presentiamoci
Marco Antonutti... Chi è?
@taggami
/marcoantonutti
/antonutti.marco
Web Developer dal 2007, markettaro dal 2010
Bio: http://marktheweb.it/marco-antonutti
2
3. Cosa andremo a vedere
1) Filosofia dell'onpage
2) HTML 5
3) Web Semantico e microdata
Insomma andremo a vedere il perchè, il cosa ed il come.
3
4. L'onpage dal 2012
nell'onpage semantico?
a dei dati (testi, date, prezzi, nomi, menu, sidebar, …) non è più necessariamente
e dai all'utente lo dai anche al motore di ricerca (in un modo un po' più letterale di
cio orientato alla trasparenza e alla completezza
cose a seconda di ciò che volete fare.
4
5. Testo, Informazioni e Dati
informazioni, dati e frasi non necessariamente distinti e quindi di difficile consulta
scendo con un buon ritmo
e, sono delle interpretazioni di dati.
scendo del 25% rispetto allo scorso anno
attoni” dell'informazione.
no
antico, stiamo aggiungendo diversi livelli di profondità nel quale il documento è vis
5
8. Ma il vantaggio?
motori di ricerca sono numerosi, tuttavia diventano d'importanza vitale quando i
atti dai nostri siti godono di un display particolare (rich snippet) sulle SERP di goog
8
9. I Vantaggi indiretti
ggiunte e i perfezionamenti che si andranno ad affiancare durante il passaggio ve
con l'utenza, una maggiore completezza delle informazioni ed in generale un mod
9
10. E andiamo al sodo
Prima di preoccuparci di microdata & co, è sempre meglio:
1) ottimizzare l'HTML già presente
2) Avere un'idea precisa di cosa si vuole trasmettere all'utenza e quindi ai MdR
3) Ricordarsi di introdurre eventuali cambiamenti grafici poco alla volta
10
11. HTML 5
ML5 è un enorme passo verso il web semantico. Ecco i tag di nostro interesse intr
icle
de
oter
ader
v
ction
ritorno di
enu
11
12. Ed I microdata?
terno della versione 5 dell'HTML, quindi sono uno standard approvato dal W3C.
ente riconosciuto per schema.org, il progetto condiviso da yahoo/bing e google co
antenere la compatibilità verso microformats, RDFa e vecchi microdata (data-voc
12
13. Microdata: itemscope ed itemtype
n po' come id e class) che danno valore e significato al contenuto degli stessi.
a struttura “ad albero” o nodi, e quindi hanno sempre un elemento genitore che c
re accompagnata da itemtype. Itemscope definisce il contenitore, itemtype gli ass
13
14. Microdata: itemtype
g/Oggetto”>
u una pagina di schema.org che definisce tutte le specifiche dell'oggetto in questi
vo e non contiene mai nessun dato o riferimento.
14
15. Microdata: itemprop
dei tag.
sezione della pagina si riferisca ad una ricetta, grazie ad itemprop possiamo evide
15
16. Microdata: embed
inserire un itemprop che sia allo stesso tempo un itemscope.
zienda organizzatrice è al tempo stesso proprietà dello schema event e parente de
temtype="http://schema.org/Organization">
ono consultabili (con qualche difficoltà) presso http://schema.org
16
17. Il nostro obiettivo
Capire come costruire una pagina strutturata in maniera semanticamente corrett
Nel dettaglio:
- Evidenziare e definire gli elementi di layout dagli elementi di contenuto
- Distinguere nel contenuto un ordine “ad albero” di tipologie di oggetti
17
18. Il layout
permettono di distinguere (aggiungendo dettagli ai già visti tag dell'HTML5) divers
e evidenziare:
to ripetuto o di minore importanza (sidebar, footer)
amentali (corpo del testo, titolo, dettagli aggiuntivi e a discrezione l'header)
i da terze parti (in generale commenti e review)
di link (di navigazione, di contesto e quelli interni al contenuto)
18
19. Il contenuto
Evidenziare:
- Data di pubblicazione e data di aggiornamento(!!!)
- Autore della risorsa (volendo ottenere authorship tramite g+)
- Ovviamente informazioni e dati
- Eventuali votazioni sia espresse su scala sia espresse tramite +1 o “like”
- Almeno un'immagine a pagina inerente al contesto
19
20. L'ordine del contenuto
tanza anche determinare l'ordine con il quale si susseguono o si imparentano (em
e un biglietto per un evento deve avere come scope principale l'event od il product
da dei casi specifici soggettiva, l'importante tuttavia è che il markup sia orientato a
di parità, conviene decidere seguendo l'itemscope che può fornirci la possibilità d
20
21. Rich Snippet
videnziano proprietà specifiche della pagina già dalla SERP.
ecide Google quando, come e quanto mostrarli (ma è molto indulgente)
iutano per:
il CTR (a seconda dell'ambito del mercato)
il passaggio SERP → sito (generano fiducia e continuità)
ffetti secondari:
Attraverso un (eventuale) aumento del CTR il sito acquisisce trust agli occhi di Goo
Volendo, possono far mantenere un'identità visiva del brand (es: imdb.com)
21
22. Authorship
municare a google la paternità di alcune risorse tramite una specifica azione di link
l branding
rust dal sito internet allo scrittore
ei rich snippet riguardanti il CTR
et e authorship verrà fatto il display della sola authorship.
alla serp a favore del proprio profilo su g+
22
24. Consigli vari
a pagina cominciando dallo stesso tag <html> (itemtype=”webpage”) e poi andan
eno l'authorship in un sito nel quale i rich snippet giocano un grosso ruolo.
emantiche che si vuole, stando attenti a non strafare.
re google al solo scopo di ottenere rich snippet (è invece lecito talvolta forzare leg
24
