Tecniche SEO per ottimizzare le prestazioni del sito web

Ho consultato i siti Google Webmasters, Google search for developers, il Centro di Assistenza di Search Console, Bing Webmaster tools e YSlow dove ho trovato interessanti indicazioni e risorse per migliorare le prestazioni dei siti web.

Linee guida generali per webmaster e SEO

Di seguito propongo i criteri che migliorano o non penalizzano la posizione del sito, nei risultati delle ricerche:

1. Ogni pagina del sito deve essere collegata ad almeno un’altra pagina del sito; il link deve avere un testo rappresentativo del contenuto della pagina collegata e, nel caso di immagini, il testo deve essere scritto nell’attributo alt.
2. Il numero di link presenti in una pagina deve essere ragionevole (al massimo alcune migliaia)
3. Il server web deve supportare l’intestazione HTTP If-Modified-Since in modo da comunicare a Google se la pagine web è stata modificata dall’ultima volta che è stata indicizzata.
4. Usare il file robots.txt per limitare le risorse da indicizzare.
5. Creare contenuti utili, ricchi di informazioni e pagine che li descrivono chiaramente ed accuratamente.
6. I contenuti devono includere le parole che le persone useranno per le ricerche.
7. I tag title e gli attributi alt devono essere descrittivi, specifici ed accurati.
8. Il sito deve presentare i contenuti secondo una chiara struttura gerarchica.
9. Ottimizzare le immagini, i video ed i dati strutturati.
10. Usare robots.txt ed attributi rel=”nofollow” del tag anchor (a) per impedire l’indicizzazione di link pubblicitari.
11. Assicurarsi che tutti i link conducano a pagine web attive e convalidare il codice HTML delle pagine.
12. Ottimizzare la velocità di caricamento delle pagine web.
13. Progettare il sito per essere consultato da ogni tipo di dispositivo e risoluzione.
14. Assicurarsi che il sito venga visualizzato correttamente con browser diversi.
15. Proteggere la connessione al sito con il protocollo HTTPS
16. Verificare il funzionamento del sito per non-vedenti con gli screen-reader.
17. Creare pagine web ottimizzate per gli utenti e non per i motori di ricerca.
18. Evitare tecniche per raggirare gli algoritmi di indicizzazione dei motori di ricerca (generazione automatica di contenuti, scambio di link, pagine con contenuti che si differenziano in maniera minima, generare pagine specifiche per motori di ricerca che sono diverse da ciò che viene proposto agli utenti fisici, re-indirizzamenti a pagine diverse da quanto richiesto dagli utenti, testi e link nascosti, pagine doorway, copiare contenuti da altri siti, inserire programmi di affiliazione con scarso valore aggiunto, installazione di programmai dannosi).
19. Progettare URL semplici per accedere alle pagine ed indicare link canonici con l’attributo rel=”canonical”.
20. Usare gli attributi rel=”next” and rel=”prev” per contenuti suddivisi su più pagine.
21. Il sito deve essere raggiungibile si digitando l’indirizzo con “www.” che senza; per ottenere questo risultato occorre configurare opportunamente il server http.
22. Il sito dovrebbe essere reso disponibile anche nella versione AMP per dispositivi mobile.

Risolvere gli errori dei microformats

Ho controllato la registrazione delle mie pagine con la Google Search Console ed ho trovato alcuni errori da correggere; la sezione Search Appareance/Structured Data mostrava circa 20 pagine avevano errori riguardo l’elemento hentry (markup: microformats.org).

Così, ho consultato la pagina Wiki per il microformato h-entry, ed ho corretto i template Jinja index.html ed article.html in modo da correggere gli attributi dei marcatori come nel seguente modello HTML.

<article class="h-entry">
  <header>
    <h1 class="p-name">...TITOLO...</h1>
  </header>
  <footer>
    Pubblicato <time class="dt-published" datetime="...DATA_PUBBLICAZIONE..."><strong>..DATA_PUBBLICAZIONE...</strong></time>
    <a class="p-author h-card" href="...URL_AUTORE...">...AUTORE...</a>
    in <a href="...URL_CATEGORIA..." class="p-category">...CATEGORIA...</a>.
    Aggiornato <time class="dt-updated" datetime="...DATA_AGGIORNAMENTO..."><strong>...DATA_AGGIORNAMENTO...</strong></time>.
    <br>
    Tag: <a href="...TAG_URL..." class="p-category">...TAG...</a>
    <a href="...PERMALINK_URL..." class="u-url permalink">#PERMALINK</a>.
  </footer>
  <div class="e-content">...CONTENUTO...</div>
</article>

Dopo qualche giorno, con i successivi passaggi del Robot di Google, il report di Search Console ha cominciato a mostrare risultati migliori.

Correggere meta description e titoli

Rimanendo in Google Search Console, ho trovato alcuni errori da correggere anche nella sezione Search Appareance / HTML Impromentents: diverse pagine avevano il medesimo valore nel tag meta description o valori troppo brevi. Inoltre, alcune pagine del blog avevano lo stesso titolo. Per correggere, è bastato compilare i tag meta description e title in maniera più significativa ed univoca per le diverse pagine web.

Indicare la lingua alternativa del sito

La sezione Search Traffic / International Targeting di Google Search Console segnala che non è definito l’attributo hreflang per il targeting internazionale. Per correggere, ho impostato il seguente tag nel template Jinja usato da Pelican con il plugin I18N_SUBSITES attivo.

{% if DEFAULT_LANG != main_lang %}
  <link rel="alternate" hreflang="{{ main_lang }}" href="{{ main_siteurl }}">
{% else %}
  {% for lang, values in I18N_SUBSITES.iteritems() if DEFAULT_LANG != lang|e %}<link rel="alternate" hreflang="{{ lang|e }}" href="{{ values.SITEURL|e }}">{% endfor %}
{% endif %}

Caricare il sito più velocemente

Il test del mio sito con Google PageSpeed Insights ha fornito dei risultati scadenti circa la velocità di caricamento per Mobile (punteggio 58/100), e discreti nel contesto Desktop (punteggio 70/100). Il rapportino di PageSpeed Insights fornisce diversi suggerimenti per ottimizzare e migliorare le prestazioni.

Minificazione dei file CSS e JS

Per prima cosa, cerco di ottimizzare la dimensione dei files JavaScript e CSS; utilizzo il programma Java YUI Compressor per minificare i miei script e fogli di stile. Per esempio, lancio questi comandi:

yuicompressor -o primary.min.css primary.css
yuicompressor -o cookieconsent.min.js cookieconsent.js

Ora, i nuovi file CSS e JavaScript ottimizzati da usare nel sito si riconoscono per il “.min” nel nome e risultano essere circa il 20-30% più piccoli dei file originali.

I file “.min.css” devono essere controllati per aggiornare le direttive @import con il nuovo nome dei file. Per esempio:

@import url("reset.min.css");

Per i file “min.js” controllo ed aggiorno i tag script nel template html; per esempio:

<script src="/javascript/cookieconsent.min.js"></script>

Infine, non dimentico di impostare il foglio di stile principale, nel file di configurazione di Pelican (pelicanconf.py). Per esempio:

CSS_FILE = 'primary.min.css'

Caricamento asincrono di JavaScript e fogli stile CSS

Occorre correggere il caricamento degli script Javascript ed i fogli stile CSS, in modo che non ritardino la visualizzazione delle pagine web.

Quindi, imposto l’attributo async=”async” per caricare gli script javascript in modo asincrono; in pratica, basta impostare gli script come nell’esempio seguente:

<script async="async" src="..."></script>

Riguardo i CSS, Google suggerisce di caricare inline i codici CSS necessari a visualizzare ciò che appare above-the-fold (cioè nel riquadro superiore della finestra del browser, ovvero non nascosto dal bordo inferiore della finestra); il resto dovrebbe essere caricato alla fine, inserendo nel tag body del documento html, uno script JavaScript in grado di caricare il codice dei fogli stile. In pratica, nel mio caso, ho diviso i fogli stile in due file:

1. primary.css, contiene le direttive principali dei fogli stile CSS necessari a visualizzare il layout della pagina e viene caricato nella sezione head.
2. secondary.css, contiene le direttive di formattazione dei testi e layout secondari e viene caricato con il codice seguente inserito dopo i contenuti della pagina web (prima del tag di chiusura body).

Ad esempio:

<noscript id="deferred-styles">
  <link rel="stylesheet" href="/css/secondary.min.css">
</noscript>
<script>
  var loadDeferredStyles = function() {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener('load', loadDeferredStyles);
</script>

Ps. il codice Javascript riportato sopra è suggerito dalle pagine di aiuto di Google.

Immagini responsive

Google pone molta attenzione all’ottimizzazione di immagini web e ricorda che il 96% del traffico internet dipende da file gif, png e jpeg; così, per ridurre il tempo di caricamento delle pagine, e ridurre il traffico di dati, si possono creare più versioni di una certa immagine, con dimensioni adatte per specifici dispositivi. Così, usando l’attributo srcset di img è possibile specificare ai vari dispositivi, quale immagine usare.

Ho usato questa strategia per tutte le immagini di copertina degli articoli, ed ho quindi creato, con ImageMagick, diverse versioni con le seguenti larghezze: 1170px, 970px, 750px, 620px, 400px e 300px. L’istruzione che ho usato per processare tutte le immagini in una certa cartella è simile alla seguente:

magick convert "*.jpg" -strip -quality 60 -sampling-factor 4:2:0 -interlace JPEG -colorspace RGB -resize 1170 -set filename:f "%%t-1170" .\optimized\%%[filename:f].jpg

In questo modo, ottengo tutte le immagini che mi servono, ottimizzate e ridimensionate. Per usarle, sfrutto il tag picture che è in grado di specificare le diverse versioni delle immagini ed in quali contesti vanno usate. Per esempio:

<picture>
  <source class="source-1" media="(min-width: 1100px)" srcset="{{ IMAGES_DOMAIN }}/images/covers/{{ article.cover }}-1170.jpg">
  <source media="(min-width: 900px)" srcset="{{ IMAGES_DOMAIN }}/images/covers/{{ article.cover }}-970.jpg">
  <source media="(min-width: 700px)" srcset="{{ IMAGES_DOMAIN }}/images/covers/{{ article.cover }}-750.jpg">
  <source media="(min-width: 500px)" srcset="{{ IMAGES_DOMAIN }}/images/covers/{{ article.cover }}-620.jpg">
  <source media="(min-width: 300px)" srcset="{{ IMAGES_DOMAIN }}/images/covers/{{ article.cover }}-400.jpg">
  <source media="(min-width: 200px)" srcset="{{ IMAGES_DOMAIN }}/images/covers/{{ article.cover }}-300.jpg">
  <img src="{{ IMAGES_DOMAIN }}/images/covers/{{ article.cover }}-970.jpg" srcset="{{ IMAGES_DOMAIN }}/images/covers/{{  article.cover }}-1170.jpg 2x" class="image-process-cover img-responsive" alt="{{ article.title|striptags }}">
</picture>

Ottimizzazioni del server http

Ho impostando queste direttive nel file .htaccess del server web Apache, per impostare la scadenza dei contenuti.

# Scadenza (richiede mod_expires)
ExpiresActive on
ExpiresDefault                                "access plus 10 days"
ExpiresByType text/css                        "access plus 1 week"
ExpiresByType text/plain                      "access plus 1 week"
ExpiresByType application/x-javascript        "access plus 1 month"
ExpiresByType application/javascript          "access plus 1 week"
ExpiresByType application/font-woff           "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject   "access plus 1 month"
ExpiresByType application/x-font-ttf          "access plus 1 month"
ExpiresByType font/opentype                   "access plus 1 month"
ExpiresByType image/svg+xml                   "access plus 1 month"
ExpiresByType image/x-icon                    "access plus 1 year"
ExpiresByType image/gif                       "access plus 1 month"
ExpiresByType image/png                       "access plus 1 month"
ExpiresByType image/jpg                       "access plus 1 month"
ExpiresByType image/jpeg                      "access plus 1 month"
ExpiresByType video/ogg                       "access plus 1 month"
ExpiresByType audio/ogg                       "access plus 1 month"
ExpiresByType video/mp4                       "access plus 1 month"
ExpiresByType video/webm                      "access plus 1 month"

Inoltre, ho attivato la compressione gzip del server http, dal pannello di controllo di WebFaction: Domain / Websites > Websites > sito > Enable gzip compression.

Alla fine delle ottimizzazione indicate sopra, ho migliorato la velocità di caricamento per mobile ottenendo un punteggio di 70/100, e quello per desktop con un punteggio di 87/100.

Ottimizzazione dei link a risorse esterne

Per cercare di migliorare ulteriormente la velocità di caricamento delle pagine, ho rinunciato ai collegamenti a risorse esterne disponibili via CDN ed ho salvato localmente i file di Bootstrap ed i font di Google. Inoltre, ho creato una versione ad-hoc di Bootstrap con l’apposito tool online.

Ho cercato di ottimizzare il codice, eliminando le direttive ridondanti ed ho unito tutto il codice CSS e Javascript del sito in pochi file opportunamente minificati (primary.min.css, secondary.min.css e secondary.min.css).

Alla fine, ho minificato con l’apposito plugin di Pelican (minification) anche il codice HTML delle pagine web.

Verifica del codice HTML e CSS

Per verificare la correttezza delle pagine web di un sito, ho usato il W3C Markup Validation Service; il report online ha rilevato ben 30 errori nella pagina index del sito che ho provveduto a sistemare.

Per i fogli stile, ho usato il W3C CSS Validation Service e non sono stati rilevati errori.

Per rimanere nel tema della verifica del markup, ho usato anche il W3C Feed Validation Service, che fortunatamente non ha evidenziato errori nel mio feed ATOM.

Risultato finale…

Riferimenti

1. Wikipedia Web search engline
2. Structured Data
3. Microformats
4. Get your content on Google
5. Image publishing guidelines
6. Secure your site with HTTPS
7. Use rel=”nofollow” for specific links
8. Sneaky redirects
9. Meta tags that Google understands
10. PageSpeed Tools Insights
11. YUI Compressor
12. HTML5 BoilerPlate
13. Optimising the Critical Rendering Path

Libri suggeriti