+ Rispondi alla Discussione
Risultati da 1 a 7 di 7

Polymer, Web Components e SEO: Come si comporta Google con la ShadowDOM

Ultimo Messaggio di Juanin il:
  1. #1
    Moderatore L'avatar di Juanin
    Data Registrazione
    Nov 2006
    Località
    Bologna
    Messaggi
    4,535
    Segui Juanin su Twitter Aggiungi Juanin su Google+ Aggiungi Juanin su Facebook Aggiungi Juanin su Linkedin Visita il canale Youtube di Juanin

    Polymer, Web Components e SEO: Come si comporta Google con la ShadowDOM

    Mi piace tenere monitorate le nuove tecnologie web e dunque ho pensato di fare un test con i WebComponents e Polymer per capire il grado di comprensione di essi da parte di Google.

    Ho realizzato questa pagina:
    https://www.andreapernici.com/seo-we...nent/finished/
    inserendo al suo interno un termine magico che qui non riporto per capire quando questo (e se) sarebbe stato indicizzato.

    Questo quello che vede Googlebot senza rendering tramite lo strumento Fetch As Googlebot

    Codice HTML:
    HTTP/1.1 200 OKDate: Fri, 21 Nov 2014 08:37:21 GMTServer: ApacheStrict-Transport-Security: max-age=63072000; includeSubDomainsVary: Accept-Encoding,User-AgentLast-Modified: Fri, 21 Nov 2014 08:35:34 GMTETag: "a90-5085a541aa06a"Accept-Ranges: bytesCache-Control: public, must-revalidate, proxy-revalidateExpires: Fri, 21 Nov 2014 09:37:21 GMTContent-Type: text/htmlPragma: publicX-Powered-By: W3 Total Cache/0.9.4Content-Length: 2704Keep-Alive: timeout=5, max=100Connection: Keep-Alive
    <!doctype html><html>
    <head>
      <title>The Web "Componentized" SEO test</title>
      <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
      <script src="../components/platform/platform.js"> </script>
      <link rel="import" href="../components/font-roboto/roboto.html"> <link rel="import"    href="../components/core-header-panel/core-header-panel.html"> <link rel="import"    href="../components/core-toolbar/core-toolbar.html"> <link rel="import"    href="../components/paper-tabs/paper-tabs.html"> <link rel="import" href="post-list.html"> <link rel="import" href="post-social-button.html">
      <style> html,body {    height: 100%;    margin: 0;    background-color: #E5E5E5;    font-family: 'RobotoDraft', sans-serif;  }  core-header-panel {    height: 100%;    overflow: auto;    -webkit-overflow-scrolling: touch;   }  core-toolbar {    background: #03a9f4;    color: white;  }  #tabs {    width: 100%;    margin: 0;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;    text-transform: uppercase;  }  .container {    width: 80%;    margin: 50px auto;  }  @media (min-width: 481px) {    #tabs {      width: 200px;    }    .container {      width: 400px;    }  }  </style><link rel="stylesheet" href="social-likes_flat.css"><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="social-likes.min.js"></script>
    </head>
    <body unresolved>
      <core-header-panel>
        <core-toolbar>
          <paper-tabs id="tabs" selected="all" self-end> <paper-tab name="all">All</paper-tab> <paper-tab name="favorites">Favorites</paper-tab> </paper-tabs>
        </core-toolbar>
        <div class="container" layout vertical center> <post-list show="all"></post-list>
        <h2>And share it now</h2> <div class="social-likes" data-url="https://www.andreapernici.com/seo-web-component/finished/" data-title="The SEO test on Web Components: Start building a new web"> <div class="facebook" title="Share link on Facebook">Facebook</div> <div class="twitter" data-via="andreapernici" title="Share link on Twitter">Twitter</div> <div class="plusone" title="Share link on Google+">Google+</div> </div>
        </div> <div class="container" layout vertical center><a href="http://www.flaticon.com/packs/">SVG icon from FlatIcon</a></div>
      </core-header-panel>
      <script>  var tabs = document.querySelector('paper-tabs');  var list = document.querySelector('post-list');
      tabs.addEventListener('core-select', function() {    list.show = tabs.selected;  });  </script></body>
    </html>
    Questo quello che vede facendo rendering smartphone


    Questo quello che vede facendo rendering desktop



    Dopo il primo fetch e invio all'indice la pagina è stata immediatamente beccata, ma cercando
    https://www.google.com/search?q=PolyPoly666999XXhh81
    non veniva mostrata, ma i termini mostrati erano solamente per la ricerca dell'URL tramite site: mostrando il seguente testo

    "All Favorites And share it now Facebook Twitter Google+ SVG icon from FlatIcon"


    Dopo 4 giorni dal primo fetch e invio ecco però che il risultato è stato positivo


    Cosa possiamo imparare da questo test?
    A quanto pare c'è un lasso di tempo che passa tra la comprensione della pagina rendering based e la fase classica. È solo una mia supposizione e dovrei fare un'analisi più approfondita della cosa, ma è molto curiosa la dilazione. La pagina che ho realizzato è infatti basata su WebComponents, Polymer e il fetching di un file JSON per popolare le Card, quindi la pagina è completamente attiva nella ShadowDOM.

    La capacità di Googlebot di comprendere siti JS heavy sembra essere notevole.

    Ora aspetto i vostri test

  2. #2
    Moderatore L'avatar di overclokk
    Data Registrazione
    Jun 2010
    Località
    Persiceto (BO)
    Messaggi
    3,109
    Segui overclokk su Twitter Aggiungi overclokk su Google+
    Intanto seguo con interesse :-)

    Ciao
    Enea

  3. #3
    User Attivo L'avatar di must
    Data Registrazione
    Mar 2005
    Località
    Swieqi, Malta
    Messaggi
    4,327
    Segui must su Twitter Aggiungi must su Google+ Aggiungi must su Facebook Aggiungi must su Linkedin
    Ciao,
    non mi trovo a mio agio a parlare di tecnologie e programmazione, non essendo il mio campo. Penso però possa tornare comodo alla discussione "Google & JS" sapere che Google è in grado di capire un sito fatto interamente ed esclusivamente in angularJS, anche se ci ha messo tempi più lunghi del solito per portare in indice il tutto.

    Ad ogni modo, non mi sentirei di consigliare (ancora) una soluzione tecnologica in puro JS.

  4. #4
    Moderatore L'avatar di Juanin
    Data Registrazione
    Nov 2006
    Località
    Bologna
    Messaggi
    4,535
    Segui Juanin su Twitter Aggiungi Juanin su Google+ Aggiungi Juanin su Facebook Aggiungi Juanin su Linkedin Visita il canale Youtube di Juanin
    Grazie per il contributo must!

    Credo che oggi le tecnologie ci permettono di spingerci molto avanti e Google si comporta bene anche con pushstate. Node.js, Angular etc etc se ben fatti si comportano benone.

    Riguardo polymer avevo molti altri dubbi, ma è interessante vedere l'acquisizione in 2 fasi che non mi aspettavo.
    Credo che prima ancora di Google il problema di Polymer e WebComponents sia la compatibilità con Browser obsoleti che purtroppo in Italia sono ancora usati parecchio.

  5. #5
    Moderatore L'avatar di Juanin
    Data Registrazione
    Nov 2006
    Località
    Bologna
    Messaggi
    4,535
    Segui Juanin su Twitter Aggiungi Juanin su Google+ Aggiungi Juanin su Facebook Aggiungi Juanin su Linkedin Visita il canale Youtube di Juanin

  6. #6
    L'avatar di Giorgiotave
    Data Registrazione
    Oct 2004
    Località
    Monasterace
    Messaggi
    40,009
    Visita il canale Youtube di Giorgiotave
    Ottimo aggiornamento!
    Giorgio Taverniti Blog. FastForward: su YouTube ogni Martedì (SEO) e Giovedì (Social)!

    Tutta la SEO in 23 ore: 9 diversi moduli tematici, 34 lezioni, questo è il Videocorso SEO del 2017!


  7. #7
    Moderatore L'avatar di Juanin
    Data Registrazione
    Nov 2006
    Località
    Bologna
    Messaggi
    4,535
    Segui Juanin su Twitter Aggiungi Juanin su Google+ Aggiungi Juanin su Facebook Aggiungi Juanin su Linkedin Visita il canale Youtube di Juanin
    E questo http://updates.html5rocks.com/2015/0...nts-and-jsonld molto più pratico e interessante.

+ Rispondi alla Discussione

Tag per Questa Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.