O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

Nicola Della Marina: Magento Frontend next level

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 60 Anúncio

Nicola Della Marina: Magento Frontend next level

Baixar para ler offline

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.

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.

Anúncio
Anúncio

Mais Conteúdo rRelacionado

Semelhante a Nicola Della Marina: Magento Frontend next level (20)

Mais de Meet Magento Italy (20)

Anúncio

Mais recentes (20)

Nicola Della Marina: Magento Frontend next level

  1. 1. Ciao e benvenuti!
  2. 2. Portiamo il Frontend di Magento ad un nuovo livello
  3. 3. I Livelli ‘Esterni’
  4. 4. SEO Social Network Performance
  5. 5. SEO Schema.org HrefLang Social Network Sharing Open Graph Twitter Cards Performance CSS/JS Compression Image Lazy Loading
  6. 6. Schema.org
  7. 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. 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. 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. 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. 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. 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. 13. Google Rich Snippets
  14. 14. Google Rich Snippets
  15. 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. 16. Google Rich Snippets
  17. 17. SEO Schema.org HrefLang Social Network Sharing Open Graph Twitter Cards Performance CSS/JS Compression Image Lazy Loading
  18. 18. Hreflang
  19. 19. Hreflang dall'italia
  20. 20. Hreflang dagli Stati Uniti
  21. 21. Hreflang Dalla Francia
  22. 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. 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. 24. SEO Schema.org HrefLang Social Network Sharing Open Graph Twitter Cards Performance CSS/JS Compression Image Lazy Loading
  25. 25. Sharing Buttons
  26. 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. 27. AddThis … Sharing Buttons e i suoi amici…
  28. 28. Sharing Buttons
  29. 29. SEO Schema.org HrefLang Social Network Sharing Open Graph Twitter Cards Performance CSS/JS Compression Image Lazy Loading
  30. 30. Open Graph
  31. 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. 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. 33. Senza Open Graph
  34. 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. 35. Con Open Graph
  36. 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. 37. SEO Schema.org HrefLang Social Network Sharing Open Graph Twitter Cards Performance CSS/JS Compression Image Lazy Loading
  38. 38. Twitter Cards
  39. 39. Cosa sono?
  40. 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. 41. I tag  twitter:card = product  twitter:site  twitter:data1  twitter:label1  twitter:data2  twitter:label2
  42. 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. 43. SEO Schema.org HrefLang Social Network Sharing Open Graph Twitter Cards Performance CSS/JS Compression Image Lazy Loading
  44. 44. JS/CSS Compression
  45. 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. 46. Quanto mi costa ogni file? • DNS Time • Connect Time • Server Time • Transfer Time • Wait Time • Number of Domains
  47. 47. System > Configuration > Developer
  48. 48. Minify JS/CSS
  49. 49. SEO Schema.org HrefLang Social Network Sharing Open Graph Twitter Cards Performance CSS/JS Compression Image Lazy Loading
  50. 50. Lazy Loading
  51. 51. È un design pattern che prevede che le risorse vengano caricate solo al momento dell'effettiva necessità di visualizzarle
  52. 52. Riduce il tempo 'percepito' di caricamento della pagina per l'utente ( e per i bot )
  53. 53. Image Lazy Loading
  54. 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. 55. SEO Schema.org HrefLang Social Network Sharing Open Graph Twitter Cards Performance CSS/JS Compression Image Lazy Loading
  56. 56. GRAZIE !

Notas do Editor

  • Usare schema.org non migliora il ranking delle pagine

×