Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Ciao e benvenuti!
Portiamo il Frontend di Magento
ad un nuovo livello
I Livelli
‘Esterni’
SEO
Social
Network
Performance
SEO
Schema.org
HrefLang
Social Network
Sharing
Open Graph
Twitter Cards
Performance
CSS/JS Compression
Image Laz...
Schema.org
Schema.org
• Lo Schema definisce un markup per dati
strutturati
• Schema.org è il progetto (ed il sito) nato per
raccoglie...
Schema.org – i Microdati
<div class="Product">
<div>NIKE</div>
<h1>NIKE AIR MAX 90</h1>
<img src="/media/catalog/product[…...
Schema.org – i Microdati
<div itemscope class="Product">
<div>NIKE</div>
<h1>NIKE AIR MAX 90</h1>
<img src="/media/catalog...
Schema.org – i Microdati
<div itemscope itemtype="http://schema.org/Product" class="Product">
<div>NIKE</div>
<h1>NIKE AIR...
Schema.org – i Microdati
<div itemscope itemtype="http://schema.org/Product" class="Product">
<div>NIKE</div>
<h1 itemprop...
Schema.org – i Microdati
<div itemscope itemtype="http://schema.org/Product" class="Product">
<div itemprop="brand">NIKE</...
Google Rich Snippets
Google Rich Snippets
Google Rich Snippets
• Requisiti per usare i rich snippets
– Vanno applicati alle pagine prodotto, non in lista o
altre se...
Google Rich Snippets
SEO
Schema.org
HrefLang
Social Network
Sharing
Open Graph
Twitter Cards
Performance
CSS/JS Compression
Image Laz...
Hreflang
Hreflang
dall'italia
Hreflang
dagli Stati Uniti
Hreflang
Dalla Francia
Hreflang
<link href="http://www.musicradar.com/" hreflang="en-gb" rel="alternate"></link>
<link href="http://www.musicrada...
Testare gli hreflang
https://www.google.com/search?q=musicradar&hl=en&gl=us&pws=0
Dominio
Query di ricerca
Lingua utente
N...
SEO
Schema.org
HrefLang
Social Network
Sharing
Open Graph
Twitter Cards
Performance
CSS/JS Compression
Image Laz...
Sharing
Buttons
Sharing Buttons
<iframe
src="//www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fdevelopers.facebook.com%2F
doc...
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 Laz...
Open Graph
Open Graph
• Il protocollo Open Graph consente alle pagine
web di diventare un oggetto all'interno di un
grafico sociale.
...
Open Graph
• I tag più comuni sono:
– og:title
– og:description
– og:url
– og:image
– og:type
– og:site_name
product / pro...
Senza Open Graph
<meta property="og:image"
content="http://[…]/mm15/opengraph/opengraph.jpg">
<meta property="og:title" content="Scarpe Con...
Con Open Graph
Open Graph
Facebook (che ha lanciato il protocollo nel 2010)
mette a disposizione uno strumento per
analizzare come verrà ...
SEO
Schema.org
HrefLang
Social Network
Sharing
Open Graph
Twitter Cards
Performance
CSS/JS Compression
Image Laz...
Twitter
Cards
Cosa sono?
• Si basa sugli stessi principi del protocollo Open
Graph
• Consente di aggiungere del contenuto oltre ai
normali 140 cara...
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" cont...
SEO
Schema.org
HrefLang
Social Network
Sharing
Open Graph
Twitter Cards
Performance
CSS/JS Compression
Image Laz...
JS/CSS
Compression
Le operazioni da svolgere sono due:
• Concatenazione
• Compattazione
Hanno effetto su due fattori di caricamento della
pag...
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 Laz...
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...
SEO
Schema.org
HrefLang
Social Network
Sharing
Open Graph
Twitter Cards
Performance
CSS/JS Compression
Image Laz...
GRAZIE !
Nicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next level
Nicola Della Marina: Magento Frontend next level
Prochain SlideShare
Chargement dans…5
×

Nicola Della Marina: Magento Frontend next level

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.

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir
  • Soyez le premier à commenter

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 !

×