Ottimizzazione del codice Html

Oggi andremo a parlare dell’ottimizzazione on-page di un sito web, esattamente ci concentraremo sull’html della nostra pagina. Ecco come possiamo ottimizzare il codice della nostra pagina Html, ecco le parti su cui è giusto prestare attenzione.
L’HTML (HyperText Markup Language) è un linguaggio di markup con il quale definiamo la struttura della nostra pagina, è il codice che c’è dietro ogni pagina che visitiamo. Il nostro browser legge e interpreta il codice HTML e ci mostra la pagina che abbiamo richiesto.

Ogni pagina Html si divide in due grandi sezioni, head e body.

Contents

Head: la parte invisibile

Nella parte head ci sono degli elementi non visibili agli utenti, ma alcuni di questi sono fondamentali per l’ottimizzazione nei motori di ricerca. Qui di certo regnano il tag title e la description, questi sono segnali importanti per il motore di ricerca, fosse anche semplicemente perchè è il testo che suggeriamo a Google per presentarci in serp. Programma utile per vedere se ci sono title e description duplicati è ScreamingFrog, utile anche per verificare se in qualche pagina sono mancanti.

Title

È l’elemento più importante, è il tag title. Non è da confondere con il titolo visibile della pagina, che vedremo essere all’interno del body e corrisponderà al nostro h1. Il tag title lo vediamo in alto sulla linguetta della scheda aperta del nostro browser. Vediamo l’icona (la nostra favicon) e poi il titolo.

È significativo anche perchè è quello che Google utilizzerà in serp per linkare la nostra pagina. È quindi il primo elemento che cattura l’attenzione dell’utente. Il title non deve essere ripetuto in diverse pagine, deve essere unico per ogni pagina.

Deve iniziare con la parola chiave ed è norma farlo seguire dal nome del brand fisso per tutte le pagine, questo in modo anche da far conoscere il nostro brand nella speranza che possa un giorno diventare anch’essa una query di ricerca. Fare in modo che il nome del brand venga letto e rimanga impresso ci dà questa possibilità. Inoltre se il brand inizia ad essere conosciuto gli utenti potrebbero scegliere di cliccare sul nostro sito proprio perchè già conoscono il brand. Chiaramente prima deve esserci la parola chiave e poi il brand, perchè Google assegna un’importanza anche all’ordine delle parole, le più importanti sono le prime, quindi lì deve esserci la parola chiave.

Il tag Title può avere una lunghezza massima di 70 caratteri meglio se rimaniamo sotto i 65. La serp di Google ha infatti una dimensione, quindi è meglio evitare che il testo possa essere tagliato. Questo più per un’attenzione all’utente che vede in serp un titolo tagliato che per il motore di ricerca, serve per agevolare il click dell’utente sul proprio sito nella battaglia con gli altri che compaiono vicino in serp. Infatti in questo caso, per far scegliere il nostro sito all’utente che lo trova in serp a fianco a molti altri, sono importanti i dettagli e i dettagli principali su cui abbiamo controllo sono titolo e descrizione. Il title e la description sono quelli con cui ci presentiamo in serp e con cui dobbiamo invogliare l’utente a scegliere il nostro sito.

Alcune volte già nel title si può mettere una call to action, qualcosa che spinga l’utente a cliccare sul nostro risultato.

<title>Ottimizzazione del codice Html - MsGraphic Design</title>

Meta tag Description

Il meta tag description viene utilizzato da Google per la descrizione del contenuto della pagina. Anch’esso è molto importante perchè è la prima presentazione all’utente, anche in questo caso, si tratta della nostra presentazione, qui dobbiamo inserire una piccola descrizione accattivante dell’argomento della pagina. Deve invogliare l’utente a cliccare sul nostro contenuto e favorirlo rispetto agli altri che gli sono prossimi in serp, quindi in questo caso la presenza di una call to action sarebbe molto vantaggiosa. A differenza del tag title non è un fattore diretto di ranking, ma può influenzare indirettamente la nostra Seo proprio invogliando il click dell’utente

Anche questa deve essere unica per ogni pagina, deve contenere le parole chiavi principali, sino al 2017 doveva essere di 160 caratteri ora si può arrivare sino a 320.

<meta name='description' content='Qui la descrizione'>

Siamo sempre nell’head e quindi anche questo contenuto non comparirà nella pagina.

Sia il title che la descritption a volte in serp potrebbero essere diverse da quelle da noi impostate. Google può decidere di scegliere una parte del testo che secondo lui descrive meglio l’articolo, rispetto a title e description scelte da noi.

Meta tag Keywords

Un elemento che in passato era molto utilizzato, serviva per far capire ai motori di ricerca le parole chiave di una pagina, si inseriva una lista di parole chiave divise da virgola. Questo elemento ora non è più utilizzato da Google, quindi è inutile perderci tempo. Dal 2009 in poi Google ha dichiarato ufficialmente che non ha più alcun effetto sul posizionamento di un sito internet.

Tag Canonical

Questo elemento è molto importante ad esempio in siti di e-commerce, sta ad identificare una serie di pagine che hanno contenuti uguali o molto simili. Ad esempio negli e-commerce spesso quando abbiamo la categoria prodotti abbiamo una tendina che ordina gli elementi, in ordine alfabetico o in base al prezzo ecc… Tutti questi diversi ordinamenti creano varianti della stessa pagina, dobbiamo far sapere a Google che sono varianti della stessa pagina in modo che Google possa indicizzarne solo una, visto che i contenuti sono gli stessi ed evitare di essere penalizzati per contenuti duplicati.

Quindi si sceglie quale debba essere la pagina canonica e in tutte le altre pagine che sono simili si va ad aggiungere il canonical in questo modo:

<link rel="canonical" href="http://urlpagina" />

hreflang

Questo tag riguarda i siti in più lingue, se abbiamo un sito multilingua, dobbiamo aiutare Google a comprendere quale sia la lingua che stiamo usando e soprattutto in quale pagina si trova la traduzione della pagina attuale.

Questo elemento si trova sempre nell’head e si scrive così:

<link rel="alternate" hreflang="it" href="www.nomesito.com/it">

Questo va fatto per ciascuna lingua che usiamo. Supponendo di avere un sito in italiano e inglese, in ogni pagina inglese dovremmo avere nell’head il rimando alla parte italiana e viceversa.

Body, il corpo: la parte visibile della pagina

Ora passiamo all’ottimizzazione del corpo, del body, la parte visibile agli utenti.

heading: tag di titolazione

Si tratta dei titoli visibili della pagina, questi elementi servono ad ordinare e suddividere i paragrafi. Vanno in ordine di importanza da h1 a h6. Chiaramente non è necessario usarli tutti e 6 anzi è molto raro, sarebbe il caso di un articolo pieno di approfondimenti con tanti sottoparagrafi. Tranne l’h1 gli altri possono essere usati più volte nella pagina, perchè sono paragrafi. L’importante è rispettare il loro ordine. Servono per dare una struttura chiara alla pagina, il titolo della nostra pagina sarà l’h1, i paragrafi saranno in h2, eventuali sottoparagrafi in h3 e così via.

Servono a Google per capire l‘ordine e la divisione dei nostri contenuti, ma servono in realtà anche all’utente per avere a disposizione qualcosa di ordinato. Ricapitolando, sono utili a molteplici cose:

All’autore dell’articolo, per attenersi a un certo ordine, per “forzarlo” a farsi una mappa mentale di ciò che vuole dire. L’essere ordinati e schematici aiuta a fare un articolo che sia semplice da seguire. Mantenere un articolo ordinato aiuta la lettura, un utente potrebbe scappare subito da un articolo che non mostra un certo ordine di esposizione.
Servono all’utente per capire l’ordine degli argomenti trattati nell’articolo e avere una mappa dei contenuti di cui tratta, in realtà alcuni utenti scansionano prima i titoli principali per vedere se il contenuto è proprio ciò che gli interessa e poi decidere se rimanere o abbandonare la pagina, quindi avere una buona titolazione aiuta a non avere un abbandono rapido della pagina.
Servono all’utente per poter riconoscere un punto dell’articolo che lo interessa particolarmente. Ancora una volta si leggono gli articoli sempre molto in fretta, c’è quindi bisogno di arrivare velocemente al punto, magari all’utente non interessa tutto ciò che abbiamo scritto nell’articolo ma solo una singola parte. Prendiamo come esempio questo articolo: immaginiamo un utente che stia cercando il significato dei tag heading a livello SEO, potrebbe non interessargli vedere l’ottimizzazione della parte head, potrebbe decidere di arrivare direttamente a questo punto dell’articolo. Ma senza titolazione diventa più complicato capire velocemente dove e se questo articolo tratta l’argomento. L’utente perderebbe tempo a capire dove si parla di questo argomento, quindi il rischio è che tornerebbe indietro su Google a cercare un articolo che dia immediatamente una risposta alla sua domanda.
Servono per ultimo anche a Google perchè lo aiutano a capire i temi principali di cui tratta l’articolo.

H1: il titolo principale

Tra queste titolazioni certamente ha bisogno di uno spazio dedicato, la più importante, cioè la prima, l’h1, il titolo principale della pagina, questo deve avere diverse caratteristiche:

Deve essere unico per ogni pagina, non ha senso che due pagine abbiano lo stesso titolo, semplicemente perchè ogni pagina tratterà un argomento diverso, quindi perchè due pagine dovrebbero avere lo stesso titolo?
Deve contenere la keyword principale della pagina, chiaramente è un punto essenziale in cui inserire la nostra keyword, questo è importante sia per Google che per l’utente per mostrare da subito quale sia l’argomento principale della nostra pagina.
Deve essere lungo un massimo di 70 caratteri

Link

Utilizzare molti link interni è importantissimo, il testo del link, l’anchor text, deve essere scelto con cura, da evitare ad esempio il classico “clicca qui”, per i link è utile utilizzare l’attributo title, qui si può inserire una piccola descrizione, che aiuta Google a capire ancora meglio il senso del link e della pagina linkata e fornirà all’utente maggiori dettagli quando passerà con il mouse sul nostro link.

I link esterni devono invece essere pochi ma buoni, infatti il link esterno è sempre una via di fuga dal nostro sito, quindi questi ultimi vanno usati con prudenza, il sito che linkiamo deve essere affidabile e arricchire il nostro contenuto. Potrebbe essere utile aprire il link in una diversa finestra del browser in modo che l’utente non abbandoni il nostro sito questo possiamo farlo semplicemente aggiungendo l’attributo target=”_blank”, questo ci permette di dire al browser di aprire questo contenuto in una nuova finestra.

<a href="index.html" title="Descrizione link"></a>
<a href="https://www.massimilianosalerno.it" title="Descrizione link" target="_blank"></a>

Importante evitare url lunghissime, l’utilizzo del carattere underscore (_), caratteri maiuscoli o non ascii (es. apostrofo, lettere accentate).

Immagini

Google ancora non riesce a capire il contenuto delle immagini quindi si aiuta con il testo:

il testo che circonda l’immagine, chiaramente un indizio del contenuto dell’immagine Google la cerca nel testo che è intorno all’immagine stessa
l’attributo alt aiuta a capire il contenuto dell’immagine, il suo obiettivo è la completa accessibilità delle immagini. Questo attributo serviva in origine per i non vedenti in modo che potessero avere una descrizione dell’immagine, e serve quando l’immagine per qualche motivo non viene caricata, al posto dell’immagine verrà infatti visualizzato il testo contenuto nell’attributo alt. Chiaramente questo è molto utile anche a Google, perchè si tratta proprio di ciò che cerca, cioè una descrizione del contenuto dell’immagine. Da tutto ciò è chiaro che la parola chiave principale è utile che sia utilizzata nell’attributo alt dell’immagine.
altro elemento importante è il nome del file, questo deve innanzitutto avere un senso, chiaramente anche in questo caso dovrebbe includere la keyword, di certo non dovrebbe essere una serie di numeri senza senso. Chiaramente anche qui si segue la regola degli url esposta sopra, per separare le parole usiamo il trattino (-), evitiamo lettere accentate o apostrofi.

Per quanto riguarda le immagini è molto importante l’ottimizzazione, è importante che queste abbiano la giusta dimensione, non ha senso usare immagini più grandi di quel che serve, ed è importante che abbiano la giusta compressione. Per questo argomento si può vedere il mio articolo sull’ottimizzazione della velocità di un sito web.

Grassetto e corsivo ( e )

È importante cercare di fare in modo che una pagina sia il meno piatta possibile. Anche quando parliamo e facciamo un discorso cambiamo il nostro tono quando qualche elemento è particolarmente importante, quando quello che stiamo dicendo ha bisogno di una sottolineatura, come a dire al nostro interlocutore che quello che stiamo dicendo in questo momento è importante per capire il senso del nostro discorso, perdendo questo punto sarebbe più complicato capire il seguito.

I tag strong ed em servono proprio a questo hanno affiancato i vecchi e , questi servono non solo a rendere grassetto o corsivo un testo ma a dare al motore di ricerca un significato di elemento importante, determinante. Quando quindi un elemento è importante utilizzo , quando invece a questo elemento voglio dare solo un aspetto evidenziato utilizzo semplicemente .

Ma torniamo all’esperienza dell’utente, perchè alla fine tutto parte da lì. Per un utente trovare una pagina piatta, senza paragrafi, senza elementi evidenziati, fa si che tutto risulti più difficile da leggere. C’è sempre meno tempo per leggere interi articoli per questo bisogna cercare il più possibile di consentire anche una lettura più veloce degli elementi più importanti. Evidenziando con il grassetto gli elementi più importanti della pagina dovremmo in qualche modo fornire una sintesi degli elementi principali. Qualche utente potrebbe viaggiare sui grassetti della pagina e fermarsi a leggere solo dove realmente i dettagli per lui siano più interessanti.

Tornando ora al motore di ricerca con strong ed em andiamo a dire al motore di ricerca che questa parte dei contenuti è molto importante ed è quindi più rilevante rispetto al testo che lo circonda, chiaramente quindi questo è il posto preferito per inserire le parole chiavi e soprattutto la parola chiave principale del nostro articolo.

La differenza a livello di significato tra i due è che mentre strong va a definire l’importanza della parte di testo, em serve a mettere enfasi in quella parte di testo.

HTML5: il tag semantico

L’avvento dell’HTML5 ha fornito nuove modalità di comunicare ai motori di ricerca il senso dei nostri elementi nella pagina. Questo serve ad aiutare Google a capire dove sui trova il nostro menu di navigazione, dove il nostro header e il nostro footer dove gli elementi principali.

L’HTML5 è stato pensato per definire e separare la struttura dai contenuti di una pagina web, la sua versione definitiva è stata rilasciata nell’ottobre del 2014 e ha portato diverse novità:

nuovi tag
memorizzazione locale di grosse quantità di dati: la possibilità di creare delle applicazioni off-line, il sistema del web storage(localStorage, sessionStorage)
Api e geolocalizzazione

Di questi quello che più ci interessa lato SEO è chiaramente il primo.

Nuovi tag HTML5

Abbiamo parlato della strutturazione della pagina HTML e di come risulti divisa in due grosse parti che sono head e body, abbiamo visto come la prima parte contenga i contenuti non visibili, mentre il corpo si occupa dei contenuti della pagina, ciò che poi viene visualizzato nel nostro browser. L’HTML5 si occupa soprattutto di strutturare questa seconda parte, i contenuti all’interno del body.

Gli sviluppatori con il tempo hanno iniziato a creare delle sezioni che ricorrevano all’interno dei siti internet, quindi con

un intestazione che conteneva il logo del sito, e il menu di navigazione,
Poi il contenuto del sito
Una sidebar con altri contenuti
e il footer in fondo alla pagina, con informazioni come contatti e link secondari.

È proprio questa standardizzazione che ha consentito lo sviluppo dell’HTML5. Si è pensato di creare quindi dei tag appositi, da affiancare ai semplici <div>, tag che esprimono anche il contenuto presente in quel blocco.

Questi nuovi tag servono quindi solo ad ordinare i contenuti evidenziando semanticamente i contenuti più importanti, questo permette al motore di ricerca di essere aiutato nell’indicizzazione della pagina. Da un punto di vista di visualizzazione grafica non cambia nulla. Una nuova pagina HTML5 sarà strutturata orientativamente in questo modo:

<header>
    <figure>
        <img src="logo.png" alt="descrizione" title="descrizione visibile">
    </figure>
    <nav></nav>
</header>
<main>
    <article>
        <section>

        </section>
        <section>

        </section>
    </article>
    <aside></aside>
    <article>
        <section>

        </section>
    </article>
</main>
<footer>
    
</footer>

Header

Iniziamo dal nuovo tag header, che al suo interno deve avere il contenuto introduttivo, si tratta normalmente della parte alta di un sito, contiene logo o nome del sito e menu principale. La maggior parte degli sviluppatori per identificare questa sezione andava a creare un div con id ‘header’, la nuova versione dell’HTML5 permette di creare direttamente un tag header.

<div id="header"></div>
<header></header>

Una pagina può contenere diversi header, ma quest’ultimo non può essere inserito in un footer in un address o in un altro elemento header

Nav

Questo identifica il menù principale del sito che il più delle volte è contenuto all’interno del tag header. Al suo interno quindi troveremo una serie di link di navigazione, e sono i link principali del nostro sito, quelli che ci consentono di raggiungere le sezioni più importanti (es. categorie di wordpress) del nostro sito. Quindi non tutti i link del nostro sito devono trovarsi dentro il tag nav ma solo quelli più importanti.

Una pagina potrebbe anche avere più nav, per esempio uno per la navigazione all’interno del sito e uno per la navigazione all’interno della pagina.

Main

Rappresenta tutto il contenuto della pagina, praticamente tutto ciò che normalmente si trova tra header e footer, questo tag dovrebbe essere presente una sola volta nella pagina. Inoltre non può essere figlio di un elemento article, aside, footer, header o nav

Article

Questo rappresenta un contenuto indipendente e autonomo, che può essere a sua volta diviso in sezioni. Questo è chiaramente il tag che contiene il contenuto della pagina quindi quello a cui il motore di ricerca presta più attenzione. L’article dovrebbe contenere un contenuto indipendente che dovrebbe avere senso da solo, anche slegato dal restante contenuto

Section

È una sezione del documento, un capitolo, serve a dividere il contenuto di article in blocchi, ma in realtà può trovarsi anche in altri elementi semplicemente per dividere il contenuto, lo possiamo ad esempio anche trovare nell’header o nel footer. Nonostante ciò section non deve essere inteso come un contenitore generico, per questo è meglio utilizzare un div, una sezione è una separazione logica. L’utilizzo più logico è quella della divisione di un article in capitoli che al loro interno hanno all’inizio un h2.

Aside

È una sezione della pagina che è connessa solo marginalmente con il resto della pagina, in qualche modo separato dal restante contenuto. È certamente il posto usato per banner e link, ma la sua funzione non è relegata esclusivamente a questo. I contenuti di questa sezione non dovrebbero comunque essere completamente estranei al contenuto della pagina, solamente più marginali. Anche un glossario o la biografia dell’autore potrebbero essere posizionate in un tag aside.

Footer

La parte che si trova generalmente in fondo al sito e che si occupa di mostrare i contatti del sito internet, numeri di telefono, email, informazioni di copyright e links secondari.

Ulteriori nuovi tag

Ci sono altri tag importanti che però mi sembra il caso di dividere dai precedenti che sono i principali e definiscono le sezioni di una pagina:

Video e Audio: sono due tag molto importanti, in questo caso non solo lato SEO, ma più che altro perchè hanno introdotto numerose funzionalità per la gestione degli audio e dei video
Figure: contenitore circa tutte le informazioni di un’immagine, un diagramma, un’illustrazione questa può avere all’interno una descrizione, una didascalia che ha un suo tag specifico che va inserito nel tag figure: figcaption.
Address: fornisce informazioni di contatto, tipicamente risiede nel tag footer. Non si limita al solo indirizzo inteso come via, ma anche ad informazioni relative ad indirizzo internet oppure email. Quindi le informazioni di contatto possono essere inserite tutte all’interno di questo tag
Time: questo contenitore serve per date e orari, questo tag può avere un attributo datetime che definisce la data in un formato valido
Progress: si tratta di un indicatore di avanzamento, può avere come attributi:
- max (che di default è a 1), questo è il valore massimo che può essere dato alla nostra barra,
- value che è il valore attuale, il valore selezionato

In sintesi

Abbiamo detto molte cose cerchiamo di fare una sintesi in modo da riepilogare tutto ciò che abbiamo detto. La keyword principale della nostra pagina deve essere presente in questi elementi:

Url, la parte finale del nostro url dovrebbe contenere l’argomento di cui stiamo trattando nella pagina
Tag title, abbiamo detto essere l’elemento principale della pagina, quello che dà il titolo del nostro sito sulla serp di Google
Description, abbiamo detto che anche se questa non ha grande importanza come fattore di ranking, in realtà è spesso utilizzata per la descrizione della pagina in serp, e quindi è utile per attirare l’utente, anche in questo caso è quindi importante che contenga la keyword principale, e quindi il contenuto principale della nostra pagina
Titolo visibile della pagina, h1. Perchè questo è utile sia all’utente sia a Google per capire l’argomento principale della nostra pagina
Attributo alt e Nome file dell’immagine principale. Infatti nonostante Google non riesca ad interpretare il contenuto delle immagini dà grande importanza alla presenza di immagini in un articolo e quindi è importante che ci sia un’immagine principale che contenga la keyword principale
Grassetto e corsivo. Abbiamo visto l’importanza dei nuovi tag strong e em, che consentono di evidenziare i contenuti più importanti

Per Approfondire

Approfondire determinati tematiche è molto importante, soprattutto è importante avere chiaro uno schema e i punti fondamentali per approcciarsi all’ottimizzazione SEO. A me hanno aiutato molto i corsi di Studio Samo, è un Academy online i cui corsi si possono tranquillamente seguire comodamente da casa. C’è un corso in cui si possono approfondire questi argomenti con l’aiuto di molti video e con la bravura e l’esperienza di Jacopo Matteuzzi, si chiama Corso Seo Completo, e oltre a dare ulteriori delucidazioni sull’ottimizzazione dei contenuti on page, si occupa anche, partendo dalle basi, di spiegare:

Cosa sia la seo e come funzioni
L’analisi delle parole chiave
L’ottimizzazione dei contenuti
L’ottimizzazione off-page
Il Monitoraggio dei risultati

Sono veramente molti e diversi i corsi Seo che ho seguito, ho seguito diverse e ottime scuole, ma quello che mi ha colpito di questo corso è la semplicità e la profondità di quanto viene detto. Tutto viene affrontato in maniera schematica in modo che tutto risulti più semplice poi da applicare.

di Massimiliano Salerno