1.
Ciao e benvenuti!

2.
Portiamo il Frontend di Magento
ad un nuovo livello

3.
I Livelli
‘Esterni’

4.
SEO
Social
Network
Performance

5.
SEO
Schema.org
HrefLang
Social Network
Sharing
Open Graph
Twitter Cards
Performance
CSS/JS Compression
Image Lazy Loading

6.
Schema.org

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

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

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

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

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

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

13.
Google Rich Snippets

14.
Google Rich Snippets

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

16.
Google Rich Snippets

17.
SEO
Schema.org
HrefLang
Social Network
Sharing
Open Graph
Twitter Cards
Performance
CSS/JS Compression
Image Lazy Loading

18.
Hreflang

19.
Hreflang
dall'italia

20.
Hreflang
dagli Stati Uniti

21.
Hreflang
Dalla Francia

22.
Hreflang
<link href="http://www.musicradar.com/" hreflang="en-gb" rel="alternate"></link>
<link href="http://www.musicradar.com/" hreflang="x-default" rel="alternate"></link>
<link href="http://www.musicradar.com/us/" hreflang="en-us" rel="alternate"></link>
<link href="http://www.musicradar.com/fr/" hreflang="fr-fr" rel="alternate"></link>

23.
Testare gli hreflang
https://www.google.com/search?q=musicradar&hl=en&gl=us&pws=0
Dominio
Query di ricerca
Lingua utente
Nazione utente
Rimuove
personalizzazione

24.
SEO
Schema.org
HrefLang
Social Network
Sharing
Open Graph
Twitter Cards
Performance
CSS/JS Compression
Image Lazy Loading

25.
Sharing
Buttons

26.
Sharing Buttons
<iframe
src="//www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2F
docs%2Fplugins%2F&amp;layout=button" scrolling="no" frameborder="0" style="border:none;
overflow:hidden;" allowTransparency="true"></iframe>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a>
<script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.
createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(
document, 'script', 'twitter-wjs');</script>
<a href="//www.pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" data-pin-color="red"
data-pin-height="28"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_28.png"
/></a>
<script type="text/javascript" async defer src="//assets.pinterest.com/js/pinit.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'it'}
</script>
<div class="g-plusone" data-annotation="none"></div>

27.
AddThis …
Sharing Buttons
e i suoi amici…

28.
Sharing Buttons

29.
SEO
Schema.org
HrefLang
Social Network
Sharing
Open Graph
Twitter Cards
Performance
CSS/JS Compression
Image Lazy Loading

30.
Open Graph

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

32.
Open Graph
• I tag più comuni sono:
– og:title
– og:description
– og:url
– og:image
– og:type
– og:site_name
product / product.group

33.
Senza Open Graph

34.
<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.">

35.
Con Open Graph

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

37.
SEO
Schema.org
HrefLang
Social Network
Sharing
Open Graph
Twitter Cards
Performance
CSS/JS Compression
Image Lazy Loading

38.
Twitter
Cards

39.
Cosa sono?

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

41.
I tag
 twitter:card = product
 twitter:site
 twitter:data1
 twitter:label1
 twitter:data2
 twitter:label2

42.
<meta name="twitter:card" content="product">
<meta name="twitter:site"
content="@AW_LAB">
<meta name="twitter:label1" content="Brand">
<meta name="twitter:data1"
content="CONVERSE">
<meta name="twitter:label2" content="Sport">
<meta name="twitter:data2"
content="BASKET">

43.
SEO
Schema.org
HrefLang
Social Network
Sharing
Open Graph
Twitter Cards
Performance
CSS/JS Compression
Image Lazy Loading

44.
JS/CSS
Compression

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

46.
Quanto mi costa ogni file?
• DNS Time
• Connect Time
• Server Time
• Transfer Time
• Wait Time
• Number of Domains

47.
System > Configuration > Developer

48.
Minify JS/CSS

49.
SEO
Schema.org
HrefLang
Social Network
Sharing
Open Graph
Twitter Cards
Performance
CSS/JS Compression
Image Lazy Loading

50.
Lazy Loading

51.
È un design pattern che prevede che le risorse
vengano caricate solo al momento dell'effettiva
necessità di visualizzarle

52.
Riduce il tempo 'percepito' di caricamento
della pagina per l'utente ( e per i bot )

53.
Image Lazy Loading

54.
Image Lazy Loading
<img list.phtml
src="<?php echo $this->helper('catalog/image')-
>init($_product, 'small_image')->resize(135); ?>"
width="135"
height="135"
alt="<?php echo $this->stripTags($this-
>getImageLabel($_product, 'small_image'), null, true) ?>"
/>
<img list.phtml
src="<?php echo $this-
>getSkinUrl('images/placeholder.gif); ?>"
data-original="<?php echo $this-
>helper('catalog/image')->init($_product, 'small_image')-
>resize(135); ?>"
width="135"
height="135"
alt="<?php echo $this->stripTags($this-
>getImageLabel($_product, 'small_image'), null, true) ?>"
/>

55.
SEO
Schema.org
HrefLang
Social Network
Sharing
Open Graph
Twitter Cards
Performance
CSS/JS Compression
Image Lazy Loading

56.
GRAZIE !