Nicola Della Marina: Magento Frontend next level

Ciao e benvenuti!

Portiamo il Frontend di Magentoad un nuovo livello

I Livelli ‘Esterni’

SEO

SocialNetwork

Performance

SEO

Schema.org

HrefLang

Social Network

Sharing

Open Graph

Twitter Cards

Performance

CSS/JS Compression

Image Lazy Loading

Schema.org

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

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>


<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



<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



<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



<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

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 toolapposito


SEO

Schema.org

HrefLang

Social Network

Sharing

Open Graph

Twitter Cards

Performance

CSS/JS Compression

Image Lazy Loading

Hreflang

Hreflangdall'italia

Hreflangdagli Stati Uniti

HreflangDalla Francia

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>

Testare gli hreflang

https://www.google.com/search?q=musicradar&hl=en&gl=us&pws=0

Dominio

Query di ricerca

Lingua utente

Nazione utente

Rimuovepersonalizzazione

SEO

Schema.org

HrefLang

Social Network

Sharing

Open Graph

Twitter Cards

Performance

CSS/JS Compression

Image Lazy Loading

SharingButtons

Sharing Buttons

<iframe src="//www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&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){varjs,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>

AddThis …

Sharing Buttons

e i suoi amici…

Sharing Buttons

SEO

Schema.org

HrefLang

Social Network

Sharing

Open Graph

Twitter Cards

Performance

CSS/JS Compression

Image Lazy Loading

Open Graph

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.

Open Graph

• I tag più comuni sono:

– og:title

– og:description

– og:url

– og:image

– og:type

– og:site_name

product / product.group

Senza Open Graph

<meta property="og:image" content="http://[…]/mm15/opengraph/opengraph.jpg">

<meta property="og:title" content="Scarpe Converse AllStar 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.">

Con Open Graph

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

SEO

Schema.org

HrefLang

Social Network

Sharing

Open Graph

Twitter Cards

Performance

CSS/JS Compression

Image Lazy Loading

TwitterCards

Cosa sono?

• 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

I tag

twitter:card = product

twitter:site

twitter:data1

twitter:label1

twitter:data2

twitter:label2

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

SEO

Schema.org

HrefLang

Social Network

Sharing

Open Graph

Twitter Cards

Performance

CSS/JS Compression

Image Lazy Loading

JS/CSSCompression

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

Quanto mi costa ogni file?

• DNS Time

• Connect Time

• Server Time

• Transfer Time

• Wait Time

• Number of Domains

System > Configuration > Developer

Minify JS/CSS

SEO

Schema.org

HrefLang

Social Network

Sharing

Open Graph

Twitter Cards

Performance

CSS/JS Compression

Image Lazy Loading

Lazy Loading

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

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

Image Lazy Loading

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) ?>"

/>

SEO

Schema.org

HrefLang

Social Network

Sharing

Open Graph

Twitter Cards

Performance

CSS/JS Compression

Image Lazy Loading

GRAZIE !

Presentations & Public Speaking

Nicola Della Marina: Magento Frontend next level