Corso SEO & HTML: #15 Tag Section

2021-09-15 11:01:17

Dove vanno scritti i contenuti di una pagina HTML nel formato HTML5? Come sfruttare al massimo la SEO per essere in prima pagina su Google?

« Corso SEO & HTML: #14 Tag Nav

  • Tag Section, cos'è?
  • Dove inserire i contenuti di una pagina web in HTML5?
  • Come sfruttare al massimo la SEO per essere in prima pagina su Google?

In questa rubrica sulla SEO dedicata alla scrittura di codice HTML ti spiego con parole semplici quali sono i tag HTML fondamentali di ogni pagina web per farti capire come è fatto un sito web in modo da sfruttare al meglio le conoscenze sulla SEO ed essere in prima pagina su Google, senza farti necessariamente diventare un webmaster o un hacker!

Tag Section

Dove vanno inseriti i contenuti delle pagine web in HTML5

Con l'avvento di HTML5 si è creato uno standard per introdurre il concetto di web semantico nelle pagine WEB.

Abbiamo già visto nelle scorse "puntate" alcuni Tag che hanno utilità solo per il browser e per il motore di ricerca, poi abbiamo visto i tag <header> e <nav> che riguardano la Hero Section, ovvero la prima schermata (di impatto) che il visitatore apprezza per prima appena attera nel nostro sito.

Oggi vediamo dove si devono inserire i contenuti centrali della pagina web: nel tag <section>!

"Section" o in italiano "sezione" è quel luogo in cui deve essere inserito un testo, eventualmente condito con elementi multimediali, dove viene trattato l'argomento  principale della pagina web in questione.

Una volta non esisteva una sezione apposita per questo genere di contenuto, ovvero per il contenuto principale della pagina web, e si tendeva a inserire i paragrafi <p> direttamente nel <body>, nel corpo della pagina web.

Se c'era bisogno di impaginare opportunamente la pagina, era probabile che il paragrafo venisse inserito in una tabella (tag <table>, per favore non fatelo più, a meno che non dobbiate inserire una tabella!)  o in un <div> il generico blocco che può assumere qualunque sembianza nel classico HTML.

Anche stavolta — dal punto di vista puramente sintattico e funzionale — un tag <section> è del tutto identico a un tag <div>, la grossa differenza la fa il significato intrinseco del ruolo che quel blocco ricopre all'interno della pagina: la semantica.

Cosa scrivere nel tag <section>

Dato che nel tag <section> vanno inseriti gli argomenti principali della pagina web in questione, è proprio qui che dovranno abbondare le parole chiave e le frasi chiave!

I crawler dei motori di ricerca cercheranno qui — nella section — il filo del discorso e l'argomento di cui si parla in questa pagina! 

Dal punto di vista semantico, ogni volta che inseriamo un tag <section> in una pagina HTML, stiamo dicendo ai motori di ricerca che è lì che ci sono i dati importanti della pagina, in cui prelevare le informazioni utili per l'indicizzazione sui motori di ricerca.

Dunque fai buon uso del tag <section>, innanzitutto usandolo! poi facendo attenzione a non inserire nel tag <section> argomenti non pertinenti con l'argomento centrale trattato nella pagina. Per esempio devi evitare di inserire nel tag <section> il menu principale, i banner pubblicitari, titoli di articoli correlati, che potrebbero distrarre il crawler!

Immagini nel tag <section>

Puoi certamente inserire immagini, video o elementi multimediali all'interno del tag <section>, a patto che siano pertinenti e di supporto nel racconto, nella spiegazione, nel contenuto principale della pagina web in questione.

Ricordati di inserire sempre gli attributi title e alt nelle immagini, più avanti in questo Blog li tratteremo nel dettaglio, perciò fai click su "Seguimi" per ricevere una notifica!  

Impaginare il tag <section>

Proprio come avviene per i tag <div>, anche il tag <section> può essere correttamente impaginato e decorato usando i fogli di stile CSS e anche questo lo vedremo più nel dettaglio in seguito.

Ricordati tuttavia che qui ci sono le informazioni principali della pagina e se ricordi che la SEO si basa fortemente anche sul fattore umano, cerca di mettere in risalto questa sezione della pagina web, usando un layout pulito, un tipo di carattere (Font) facile da leggere e di dimensioni opportune a non affaticare la vista, un paragrafo con i giusti spazi compatibilmente con lo stile di narrazione della tua pagina web.

Ti ricordo che è sempre bene avvalersi della consulenza di un esperto UX (user experience) o di un grafico professionale, per creare una veste grafica in linea con il messaggio che stai trasmettendo e gradevole da consultare per il tuo pubblico.


Schema.org e metadati

Come inserire i metadati nel tag <section>

Amplificare al massimo il potere SEO dei metadati e dei dati strutturati è il compito di un bravo webmaster SEO oriented. Quale miglior posto se non la parte centrale della pagina web — e dunque il tag <section> — per dare in pasto al motore di ricerca le informazioni già "impacchettate".

Esempio pratico di schema.org nel tag Section è la scheda della azienda nella pagina di presentazione, usando Microdata o RDFa come rappresentato nelle seguenti figure:

Altro esempio può essere la scheda di un prodotto venduto in eCommerce:


Si può continuare così per qualunque contenuto che contenga informazioni strutturate: ricette di cucina, biografie di persone, coordinate geografiche, titoli di studio, eventi...


Conclusioni

Hai capito l'importanza di inserire i contenuti centrali delle pagine web in una sezione — introdotte con HTML5 — usando in modo opportuno i Microdata o RDFa! La prossima settimana in questo Corso SEO  approfondiremo ulteriormente questo argomento per sfruttare al massimo tutti i Tag HTML5 di descrizione semantica delle pagine web, con particolare attenzione al tema SEO, in modo da portare i tuoi siti web in prima pagina su Google, quindi fai click su "Seguimi" per ricevere una notifica!

Ti do appuntamento alla prossima settimana, nel frattempo metti un like 👍🏻 se questo articolo ti è stato utile e condividilo con tutti i tuoi amici che — come te — vogliono essere in prima pagina su Google, te ne saranno immensamente grati.

Se qualcosa non ti è chiaro, fammi le tue domande nei commenti, risponderò a tutti, oppure scrivimi in privato.

Iscriviti al Corso SEO Operativo per poter entrare nel gruppo privato dove parliamo ogni giorno di SEO e di come fare per essere in prima pagina su Google, a presto.

Corso SEO & HTML: #16 Tag Article »

Corso SEO Operativo: come funziona l'algoritmo di Google
Impara come funziona l'algoritmo di Google per creare i giusti contenuti e sarai sempre in prima pagina sui motori di ricerca!
by Emanuele Frisoni
2  
28