• juanin
    Admin •

    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-web-component/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

    HTTP/1.1 200 OK
    Date: Fri, 21 Nov 2014 08:37:21 GMT
    Server: ApacheStrict-Transport-Security: max-age=63072000; includeSubDomains
    Vary: Accept-Encoding,User-Agent
    Last-Modified: Fri, 21 Nov 2014 08:35:34 GMT
    ETag: "a90-5085a541aa06a"
    Accept-Ranges: bytes
    Cache-Control: public, must-revalidate, proxy-revalidate
    Expires: Fri, 21 Nov 2014 09:37:21 GMT
    Content-Type: text/htmlPragma: public
    X-Powered-By: W3 Total Cache/0.9.4
    Content-Length: 2704
    Keep-Alive: timeout=5, max=100
    Connection: 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) { { 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

    Rendered Smartphone

    Questo quello che vede facendo rendering desktop

    Rendered 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

    PolyPoly

    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 😄

    0
  • overclokk
    Moderatore •

    Intanto seguo con interesse 🙂

    Ciao
    Enea

    0
  • must
    Super User •

    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.

    0
  • juanin
    Admin •

    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.

    0
  • juanin
    Admin •

    Vi aggiorno con questa storia
    http://googlewebmastercentral.blogspot.it/2015/03/easier-website-development-with-web.html

    0
  • giorgiotave
    Community Manager •

    Ottimo aggiornamento!

    0
  • juanin
    Admin •

    E questo http://updates.html5rocks.com/2015/03/creating-semantic-sites-with-web-components-and-jsonld molto più pratico e interessante.

    0
Effettua l'accesso per rispondere