fbpx

Come realizzare un sito web di qualità che sarà premiato da Google

Google premia i siti di qualità e per poter raggiungere questo risultato è importante utilizzare un linguaggio Html corretto perché ti permette di ridurre tempo e di creare pagine leggere e veloci; questo farà si che successivamente ci saranno pochi problemi sia per te che l’hai sviluppato, sia per gli utenti che lo visiteranno. Vediamo perché.

Il linguaggio html è la base di ogni sito web e determina il modo in cui i contenuti vengono visualizzati dagli utenti ed anche il comportamento che devono avere questi ultimi; inoltre esso viene costantemente aggiornato, viene modificata la sintassi che progressivamente cambia e per questo il codice che un tempo era raccomandato adesso potrebbe non essere più valido. Google acquisisce continuamente dati per la ricerca dei siti web e per analizzare i suoi dati cerca tag come <h1> e <article> per il calcolo dell’algoritmo di Google che non è altro che la formula che analizza e determina la posizione di un sito web all’interno di una ricerca, cioè è quello che decide se la tua pagina si vede nella prima o seconda posizione, o nella seconda pagina del motore di ricerca.
Questo algoritmo cambia circa 500 volte l’anno ed è difficile tenere traccia. Per recuperare posizioni è importante tenere conto degli elementi che Google prende in considerazione nella ricerca per poter fornire agli utenti la migliore esperienza.
Molti elementi se utilizzati, permettono di dar luogo a dei comportamenti come per esempio i pulsanti <button> che danno l’idea di un’interattività e spingono l’utente a compiere un’azione quando viene cliccato. Se invece, al posto di questi elementi si utilizzassero elementi non interattivi come il <div> google non potrebbe mai capire se l’utente può ciccarlo e può effettuare un’interazione. Questo penalizza l’accessibilità e può rallentare la navigazione delle pagine spingendo gli utenti a navigare su altri siti web più efficienti.
Per scrivere un codice corretto bisogna tener conto della semantica. Una semantica corretta utilizza la struttura che vede nell’immagine seguente:

Un elemento semantico, fornisce significato al suo contenuto; viceversa un elemento non semantico è utilizzato per dare stile ma non da nessun significato. Prima che l’html introducesse una nuova collezione di elementi semantici, gli sviluppatori utilizzavano i <div> con una classe descrittiva per poter ottenere alcuni effetti e per poter dare l’idea chiara di cosa conteneva quell’elemento ma, come detto prima non permetteva ai computer di capire il suo significato ed il suo comportamento.
Ora invece abbiamo a disposizione diversi elementi semantici che aiutano a strutturare una pagina di un sito web e che ci permettono di comprendere cosa stiamo realizzando soltanto guardando i tag utilizzati. Ecco il codice semantico corretto per la foto precedente:

<html>
<head>
<title>Esempio codice semantico della struttura di una pagina</title>
</head>
<body>
<header>
Qui ci va il logo e la navigazione
<nav>Navigazione</nav>
</header>
<main>
Nella sezione main si inserisce il contenuto principale
<article>
<section>Sezione 1</section>
<section>Sezione 2</section>
<section>Sezione 3</section>
<section>Sezione 4</section>
</article>
<aside>Nella sezione "aside" si inseriscono informazioni collegate con il contento principale della pagina.</aside>
</main>
<footer>
Qui si inseriscono le informazioni, i link, navigazione secondaria ecc;
</footer>
</body>
</html>

Alla fine dell’articolo troverai la risorsa con il codice che ho creato per te che contiene la struttura corretta in Html di una pagina web.

#1 HEADER
L’header ha al suo interno dei contenuti che si ripetono in ogni ogni pagina non direttamente riferite al resto della pagina. Secondo le specifiche, le informazioni contenute nell’header sono come un “gruppo di aiuto introduttivo o di navigazione” che potrebbe includere un logo, navigazione o una funzione di ricerca. Ci possono essere header multipli come per esempio nel blog che contiene un header per ogni post o articolo.

#2 NAV
Molti siti hanno un’area dedicata alla navigazione e può includere dei link a delle aree specifiche del sito o il percorso gerarchico della pagina.

#3 MAIN
L’elemento “main” è l’elemento fondamentale di ogni pagina. Fuori dell’header e del footer tutto il resto del contenuto deve essere aggiunto in questa area. Ci può essere solo un elemento “main” nella pagina. Questo elemento è fondamentale perché permette d alcuni utenti particolari, grazie alle tecnologie assistita, di localizzare adi andare dritto al contenuto centrale e di saltare il resto.

#4 ASIDE
Come suggerisce il nome stesso l’elemento “aside” contiene le informazioni che sono collegate con il contento principale della pagina. È un contenuto che può esistere separatamente e per conto proprio. Di solito viene utilizzata per creare una navigazione “sidebar” oppure per inserire degli elementi pubblicitari.

#5 ARTICLE
Article e section sono definite dalle specifiche nella stessa maniera ma mentre l’elemento “Article” è unico, gli elementi “section” possono essere diversi. Pensiamo per esempio ad un blog che contiene diversi articoli o ad un sommario o ad un elenco di tweet.

#6 SECTION
La sezione quindi, raggruppa diversi elementi di una pagina, che altrimenti singolarmente non avrebbero significato. Per esempio un gruppo di paragrafi in relazione tra di loro, un capitolo di un libro.

#7 FOOTER
Il footer è un elemento che contiene ogni informazione sommaria sulla pagina, come indirizzo, informazioni sui diritti d’autore, o link supplementari della pagina. Questo elemento non ha delle regole ma di solito viene inserito alla fine della pagina; in realtà può essere inserito ovunque anche all’interno di altre sezioni oppure può anche non essere inserito.

La semantica nell’HTML ha un significato che va al di là della struttura di una pagina e aiuta e migliora la ricerca e  l’accessibilità; se invece utilizzi solo “div” e “span” niente di tutto questo avverrà.

Nello specifico vediamo il tag “input” di tipo “text” che usato correttamente può risparmiare un sacco di lavoro.
L’utilizzo del tag “input” è frequente nella realizzazione dei form e dei moduli per la richiesta di informazioni di un utente e permette di interagire con l’utente che deve inserire dei dati, per esempio per effettuare una registrazione. Se cambiamo l’attributo “type” l’elemento può avere un’aspetto completamente differente. Elementi comuni come i “Checkbox” e i “radio button” ancora sono utilizzati nonostante siano stati introdotti nel 1993. Il primo elemento ad essere introdotto è stato il tag input type “text” che permette di controllare che il valore inserito sia corretto attraverso Javascript. Successivamente ne sono stati introdotti molti altri soprattutto con le nuove specifiche del 2011 e dopo ancora, sono stati introdotti tanti elementi, ognuno con il proprio tag con un proprio significato semantico e attributo che ci aiuta a customizzare il suo aspetto senza l’utilizzo di Javascript. Per esempio lo strumento di un form cosiddetto “data-picker” richiederebbe tanto Javascript, configurazione e validazione per impostarlo, ma con il nuovo attributo “data” che offre un interfaccia propria del tag, Javascript non è più necessario. Molti input nuovi includono anche forme di validazione di default come quello di tipo “url” riconoscerà se qualcuno ha inserito un indirizzo web errato allertando l’utente di inserire il dato corretto. Una validazione maggiore può essere aggiunta con l’attributo “pattern”. Lasciando al browser la cura dei meccanismi di questi input, essendo i test già stati effettuati, le pagine sono più accessibili e più facilmente utilizzabili.
L’aspetto negativo di questi tag è che hanno così tanti elementi di interfaccia che sono difficili da modificare con lo stile Css. Infatti non si può garantire un controllo facile per l’utente per cui è importante utilizzare questi tag solo quando realmente ce n’è bisogno.

#1 – COLOR
Input utilizzato all’interno di un form per scegliere un colore fornendo una interfaccia molto efficace per l’utente per la scelta di un colore. I browser che non supportano questo input mostrano comunque un valore che è possibile modificare.

#2 – DATE
L’input date permette di scegliere da un calendario per impedire di inserire una data errata. Possiamo inserire una data limite iniziale e data limite finale.

#3 – EMAIL
L’input email assicura l’inserimento delle sole email valide. Le email sappiamo che hanno delle strutture specifiche e utilizzando l’attributo “pattern” possiamo restringere il tipo di indirizzi email, come per esempio solo le email che finiscono per .com

#4 – NUMBER
L’input number mostra un interfaccia appropriata per l’inserimento di numeri. Per esempio i dispositivi touch riceverebbero un tastierino numerico.

#5 – RANGE
L’input range è utilissimo quando non è richiesto un valore specifico, per esempio per il volume o per il controllo dello zoom quando l’utente può cambiare valore tra 2 valori.

Ti è stato utile l’articolo? Spero di essere ancora più utile con la risorsa che ho creato per te e che puoi scaricare inserendo nome ed email. Ti invierò il link nell’email che inserirai nel modulo qui sotto.

— SCARICA LA RISORSA “STRUTTURA PAGINA HTML” e “UTILIZZO DEL TAG INPUT ED I SUOI ATTRIBUTI”—

Risorsa dell’articolo: “HTML NOW! scritto da Matt Crouch sulla rivista Web Designer N° 292.

Nessun Commento

Pubblica un commento