Nicola Della Marina: Magento Frontend next level

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

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

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

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

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

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

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

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

56. GRAZIE !

Nicola Della Marina: Magento Frontend next level

Meet Magento Italy

Nicola Della Marina: Magento Frontend next level