Lo sviluppo del frontend negli ultimi anni ha raggiunto nuovi livelli di complessità, in seguito all’evoluzione di internet e alla sempre maggiore importanza dei motori di ricerca.
Oltre che di tutti gli aspetti grafici il frontend developer deve occuparsi anche di una serie di funzionalità e ottimizzazioni che nel mondo dell’eCommerce sono diventate fondamentali: Search Engine Optimization (SEO), social network integration e miglioramento delle prestazioni.
Nicola Della Marina nel suo intervento tratterà nel dettaglio i singoli argomenti, ed evidenzierà come sia fondamentale la loro interazione.
8. Schema.org
• Lo Schema definisce un markup per dati
strutturati
• Schema.org è il progetto (ed il sito) nato per
raccogliere e rendere disponibili gli schema
relativi ad una larga serie di possibili contenuti
• Sono dati aggiuntivi che permettono ai motori di
ricerca di analizzare meglio i contenuti della
pagina e di fornire informazioni più rilevanti agli
utenti
• Pensati per l’uso con Microdati, sono utilizzabili
anche tramite Microformati o RDFa
9. Schema.org – i Microdati
<div class="Product">
<div>NIKE</div>
<h1>NIKE AIR MAX 90</h1>
<img src="/media/catalog/product[…].jpg" />
<p>Le scarpe Nike Air Max 90 da uomo sono dotate di tomaia con dettagli
in pelle premium per comfort e resistenza estremi. […]</p>
</div>
10. Schema.org – i Microdati
<div itemscope class="Product">
<div>NIKE</div>
<h1>NIKE AIR MAX 90</h1>
<img src="/media/catalog/product[…].jpg" />
<p>Le scarpe Nike Air Max 90 da uomo sono dotate di tomaia con dettagli
in pelle premium per comfort e resistenza estremi. […]</p>
</div>
11. Schema.org – i Microdati
<div itemscope itemtype="http://schema.org/Product" class="Product">
<div>NIKE</div>
<h1>NIKE AIR MAX 90</h1>
<img src="/media/catalog/product[…].jpg" />
<p>Le scarpe Nike Air Max 90 da uomo sono dotate di tomaia con dettagli
in pelle premium per comfort e resistenza estremi. […]</p>
</div>
12. Schema.org – i Microdati
<div itemscope itemtype="http://schema.org/Product" class="Product">
<div>NIKE</div>
<h1 itemprop="name">NIKE AIR MAX 90</h1>
<img src="/media/catalog/product[…].jpg" />
<p>Le scarpe Nike Air Max 90 da uomo sono dotate di tomaia con dettagli
in pelle premium per comfort e resistenza estremi. […]</p>
</div>
13. Schema.org – i Microdati
<div itemscope itemtype="http://schema.org/Product" class="Product">
<div itemprop="brand">NIKE</div>
<h1 itemprop="name">NIKE AIR MAX 90</h1>
<img itemprop="image" src="/media/catalog/product[…].jpg" />
<p itemprop="description">Le scarpe Nike Air Max 90 da uomo sono
dotate di tomaia con dettagli in pelle premium per comfort e resistenza estremi.
[…]</p>
</div>
http://schema.org/Product
18. Google Rich Snippets
• Requisiti per usare i rich snippets
– Vanno applicati alle pagine prodotto, non in lista o
altre sezioni
– Il prodotto deve essere acquistabile nella pagina in cui
sono presenti di microdati
– Non è consentito l'uso su siti di prodotti per adulti
• Microdati obbligatori
– Name
– Price e PriceCurrency
• I dati possono essere testati tramite un tool
apposito
34. Open Graph
• Il protocollo Open Graph consente alle pagine
web di diventare un oggetto all'interno di un
grafico sociale.
• Consente di controllare quali informazioni
vadano condivise sui social network ed in che
modo
• Si basa su RDFa e consiste nell'inserire alcuni
meta-tag all'interno del tag <HEAD> della
pagina.
35. Open Graph
• I tag più comuni sono:
– og:title
– og:description
– og:url
– og:image
– og:type
– og:site_name
product / product.group
37. <meta property="og:image"
content="http://[…]/mm15/opengraph/opengraph.jpg">
<meta property="og:title" content="Scarpe Converse All
Star Hi Canvas - AW LAB">
<meta property="og:url"
content="http://[…]/mm15/opengraph.html">
<meta property="og:type" content="product">
<meta property="og:description" content="Scarpa uomo
Converse All Star Hi Canvas di ispirazione basket. Tomaia
in canvas e suola in gomma vulcanizzata.">
39. Open Graph
Facebook (che ha lanciato il protocollo nel 2010)
mette a disposizione uno strumento per
analizzare come verrà condiviso il contenuto:
https://developers.facebook.com/tools/debug/
Ha anche lo scopo di cancellare la cache delle
informazioni
43. • Si basa sugli stessi principi del protocollo Open
Graph
• Consente di aggiungere del contenuto oltre ai
normali 140 caratteri
• Sono compatibili con Open Graph
• Gli url richiedono di essere approvati tramite il
Validator Tool
• Tramite il Twitter Card Analyzer possiamo
valutare il feedback
44. I tag
twitter:card = product
twitter:site
twitter:data1
twitter:label1
twitter:data2
twitter:label2
49. Le operazioni da svolgere sono due:
• Concatenazione
• Compattazione
Hanno effetto su due fattori di caricamento della
pagina:
• Riduzione del numero di connessioni
• Riduzione del peso globale della pagina
50. Quanto mi costa ogni file?
• DNS Time
• Connect Time
• Server Time
• Transfer Time
• Wait Time
• Number of Domains