Ottimizzare il codice sorgente per posizionare un sito su Google

Quando ci si rivolge ad un’agenzia di consulenza sul marketing digitale o ancor più ad un’agenzia SEO (come a Milano la DYNAMICS WEB) per inserirsi nell’universo online, creare un sito web ed estendere così il proprio business anche alla Rete, il primo step è sicuramente quello di sedersi a tavolino e ragionare sul da farsi.

Uno scenario alternativo è quello in cui ci si presenta all’agenzia con un obiettivo diverso dalla creazione di un sito da zero, ossia quello di far crescere la propria attività sul Web. Anche in questo caso è necessario mettersi comodi, stavolta per riflettere e valutare quale sia la strategia più adatta per lavorare su quanto già fatto. Si procede quindi ad individuare potenziali gap che non hanno permesso al sito web di funzionare al meglio o, comunque, di non portare i risultati sperati.

In entrambi i casi, le attività di SEO rappresentano il tema centrale del discorso, in quanto si tratta proprio di stabilire, a livello di ottimizzazione per i motori di ricerca, cosa sia più opportuno fare (v. anche cos’è SEO e perché rappresenta un valore aggiunto per l’azienda).

Ecco allora che, in tale contesto, l’agenzia SEO di Milano DYNAMICS WEB vi spiegherà anche la questione dell’ottimizzazione del codice sorgente HTML che, insieme a molte altre attività, risulta fondamentale per puntare a posizionare il sito su Google, aspirando alla prima pagina.


Cos’è il Codice HTML

 

Per posizionare un sito su Google in maniera ottimale è necessario guardare ad ogni singolo dettaglio, anche minimo.

In realtà, il codice sorgente HTML di un sito non è certo una minuzia, tutt’altro: si tratta della struttura che lo compone in ogni sua parte, la vera natura del sito e ciò che viene letto ed interpretato dal browser, qualunque esso sia (Chrome, Safari, Internet Explorer ecc.), restituendo all’utente pagine, link, immagini e tabelle ben formattate.

Ogni pagina web è infatti basata su una struttura di tab e script che, se ben definiti, puliti e curati, costruiscono quella che si trasformerà in un’esperienza online piacevole per il lettore.

Google (e i motori di ricerca in generale) leggono il codice sorgente HTML per stabilire dove appariranno le pagine web nei loro indici rispetto ad una query di ricerca specifica. Per questo motivo, è intuibile quanto sia fondamentale ottimizzare il codice sorgente per posizionare un sito su Google.


Come visualizzare il Codice HTML

 

Chiarita l’importanza di questo elemento, vediamo allora come visualizzare il codice HTML di una pagina web, indipendentemente dal browser che si sta utilizzando:

  • Dal MOUSE: cliccare con il tasto destro in un punto qualsiasi della pagina web e selezionare la voce “Visualizza sorgente pagina”;
  • Dalla TASTIERA: per accedere al codice sorgente direttamente tramite i comandi della tastiera, è necessario suddividere tra PC e Mac.

Nel primo caso, la combinazione è: CTRL + U (valida sia per Chrome che per Internet Explorer e Firefox); nel secondo caso, la combinazione è: Option + Command + U (sia per Safari che per Chrome e Firefox).

Naturalmente, una volta avuto accesso al codice sorgente HTML della pagina, è necessario sapere come leggerlo (quantomeno la parte visibile all’utente) e nel prossimo paragrafo vedremo le componenti.

Dato che si tratta di una pagina ricca di contenuto non propriamente di facile lettura, è utile utilizzare la funzione “Trova” per cercare le informazioni in maniera rapida. È possibile accedere facilmente a questo comando utilizzando la combinazione da tastiera: CTRL + F.


Gli elementi del Codice HTML

 

Come anticipato, per creare un sito web che funzioni perfettamente per i motori di ricerca (quindi in ottica di posizionare il sito su Google, aspirando alla prima pagina) è necessario definire e curare tutte le componenti delle singole pagine che lo compongono. Per farlo, è necessario far riferimento al codice sorgente.

Ma quali sono gli elementi o tag del codice HTML?

Questo linguaggio non ha variabili da dichiarare ma alcune regole da rispettare, di cui la più importante è la struttura, all’interno della quale vengono collocati i singoli tag.

La struttura “tipo” di base è composta da alcuni elementi principali, oltre ad altri che potremmo definire “accessori” e ad una serie di attributi che servono come specifiche.

Di seguito i tag più importanti:

  1. <!DOCTYPE>: è la primissima dichiarazione presente che identifica un documento come HTML. Si tratta dell’unico tag che dev’essere scritto in maiuscolo;
  2. <html>: identifica un documento che contiene elementi HTML. Dev’essere inserito a seguito dell’identificatore DOCTYPE e contiene tutto il resto del contenuto del documento per cui, a fine codice, sarà presente il tag di chiusura </html>;
  3. <head>: elemento utilizzato per inserire tutti i tags utili per dare informazioni sul documento. I tag verranno letti dal browser, ad esempio: titolo e meta comandi (o meta tag), script, richiamo a fogli di style esterni (link) ecc. Si chiude con il tag </head>;
  4. <link>: tag che ha diverse funzioni ma la più frequente è quella di richiamare fogli style esterni;
  5. <meta>: abbreviazione per meta comando, individua anch’esso diverse informazioni che corrispondono a funzioni differenti. Tra le più importanti ci sono sicuramente il titolo, la descrizione e le parole chiave;
  6. <title>: è il tag utilizzato per assegnare un titolo alla pagina e rispecchia ciò che l’utente vedrà come risultato sui motori di ricerca. La relativa chiusura è il tag </title>;
  7. <script>: elemento che serve per inserire codice di programmazione utile per ottenere effetti grafici o, in generale, controllo sui vari moduli. Si chiude con </script> e può essere inserito sia all’interno del tag <head> che di <body>, a seconda della funzione per cui viene aggiunto;
  8. <body>: è ciò che identifica il vero e proprio corpo della pagina, tutto quello che l’utente vedrà. Il tag si chiude con </body>.

Elementi del codice HTML importanti per la SEO

Abbiamo dunque individuato i principali tag del codice HTML. Ma quali sono veramente importanti per la sorgente di una pagina in relazione al lavoro di SEO, ossia per l’ottimizzazione utile a posizionare un sito su Google, puntando alla prima pagina?

Vediamoli insieme, prendendo come esempio il codice sorgente della home page del sito di DYNAMICS WEB, agenzia di consulenza sul marketing digitale e agenzia SEO di Milano:

1- TAG TITLE: forse l’elemento in assoluto più rilevante per la SEO a livello di codice sorgente. Dev’essere correttamente definito, in quanto è ciò che vedranno gli utenti (deve quindi aver senso e far capire di cosa si parla).

Inoltre, Google individua le parole presenti nel tag title come parole chiave importanti a seconda delle ricerche effettuate dagli utenti, per cui è fondamentale a livello SEO per posizionare un sito su Google;

2- META DESCRIPTION: insieme al title, è l’elemento visualizzato nei risultati sui motori di ricerca, di conseguenza riveste molta importanza in particolare per l’utente che, davanti ad una serie di risultati, leggerà la descrizione per individuare quello più adatto a soddisfare la propria ricerca.
Una buona descrizione può portare ad aumentare il cosiddetto click-through rate (ossia il rapporto tra semplici visualizzazioni e click effettivi alla pagina);

3- INTESTAZIONI o TAG HEADING: H1 e seguenti, per individuare il titolo della pagina (H1) che rappresenta la frase più importante in essa contenuta. Dev’essere presente un solo H1 per pagina ed è importantissimo per posizionare un sito su Google.

Inoltre, H2 per i titoli delle varie sezioni (o paragrafi), H3 per sottotitoli e così via fino agli H6, in caso di pagine dalla struttura complessa;

4- ALT TAG: gli alt tag si usano per indicare elementi aggiuntivi diversi dal testo. Solitamente sono utilizzati per le immagini che, altrimenti, non verrebbero lette da Google (nell’esempio, è stata utilizzata per poter leggere il logo presente nella pagina).

Un caso in cui sicuramente un errore a livello di alt tag risulterebbe fatale è quello degli e-commerce dove sarebbe opportuno che il tag di ogni prodotto sia descritto con il marchio ed il nome del prodotto stesso;

Questi quattro tag corrispondono agli elementi fondamentali, quelli senza i quali non si può sperare di posizionare un sito su Google, tantomeno in prima pagina.

Ma cosa significa, in tutto ciò, ottimizzare il codice sorgente HTML?


Ottimizzare il Codice sorgente HTML

 

Ottimizzare il codice sorgente rientra nelle attività di SEO on-page (ancora a: SEO PER IL TUO SITO – paragrafo ATTIVITA’ SEO), ossia tutte quelle svolte direttamente online, sul sito web.

Parallelamente all’ottimizzazione dei link interni al sito, all’ottimizzazione dei contenuti (attività di SEO copywriting) e ad una serie di altre azioni, quella di ottimizzare il codice sorgente riveste un ruolo fondamentale.

In questo senso, verificare che il sito web abbia un codice sorgente HTML pulito e in ordine, quindi controllare elementi strutturali come codice superfluo, sintassi, reindirizzamenti ecc., prima di ogni altra cosa contribuisce a livello di tempistiche: in rapporto a fattori di latenze e tempi di caricamento, ottimizzare il codice sorgente corrisponde infatti a velocizzare i tempi di caricamento (oltre a godere di pagine ben fatte a livello di grafica, carattere, immagini ecc.).

N.B. È noto che un utente che incontra difficoltà ad aprire la pagina di un sito tenderà ad uscire e cercare risposte altrove. A livello statistico, un utente attende in media dai 3 ai 7 secondi prima di abbandonare e, già dopo i 4, insorge una sensazione di stress o noia in grado di pregiudicare l’esperienza di navigazione sul sito web (che potrebbe portare, in estremo, alla decisione di non tornarvi più).

Di seguito, alcuni consigli per ottimizzare il codice sorgente, da considerare quando si voglia creare un sito web o si decida di avviare un lavoro di SEO su un sito già presente online:

  • A livello di TITOLO (tag title): assicurarsi che le parole chiave che descrivono l’oggetto della pagina siano incluse nel tag title, così da permettere di posizionare il sito su Google in maniera ottimale per l’argomento trattato.

Il titolo dev’essere uno solo per ogni pagina e unico, quindi verificare che non esistano duplicati in altre pagine del sito web;

  • A livello di META DESCRIPTION: anche in questo caso, le descrizioni devono essere una per pagina e uniche;
  • A livello di ALT TAG: è importante utilizzarli per elementi quali, ad esempio, immagini di prodotti, logo del sito, diagrammi, tabelle ecc., per permettere al robot di Google (e in generale dei motori di ricerca) di leggerli.

Questi sono alcuni degli elementi principali da verificare in ottica di attività di SEO. Nell’insieme, fanno sì che un sito risulti pulito e, di conseguenza, gli spider dei motori di ricerca possano muoversi liberamente tra le pagine, indicizzandole al meglio e consentendo di posizionare il sito su Google in maniera ottimale rispetto alle query degli utenti.

Posizionare un sito su Google con Dynamics Web

Abbiamo voluto approfondire con voi cosa significa ottimizzare il codice sorgente HTML di un sito web, cercando di chiarire l’importanza di questa attività di SEO per quello che è lo scopo finale del nostro lavoro, ossia posizionare un sito su Google e sui motori di ricerca.

Se dunque avete deciso di far crescere la vostra realtà aziendale estendendo il business all’universo online, non esitate a contattarci per maggiori informazioni scrivendo sul nostro form, anche per richiedere un preventivo indicativo, gratuito e senza impegno, in merito al lavoro da fare.

Noi di DYNAMICS WEB, agenzia di consulenza sul marketing digitale e agenzia SEO di Milano, siamo sempre attenti ai bisogni e alle esigenze dei nostri clienti, reali e potenziali.

Insieme, potremo valutare se e come è il caso di intervenire, per permettervi di raggiungere gli obiettivi prefissati.