fatti trovare dai tuoi clienti
Corso SEO & HTML: #16 Tag Article
Dove vanno scritti gli articoli del Blog nel formato HTML5? Come sfruttare al massimo la SEO per essere in prima pagina su Google?
« Corso SEO & HTML: #15 Tag Section
- Tag Article, cos'è?
- Dove scrivere gli articoli del Blog 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 Article
Dove vanno scritti gli articoli di Blog nelle pagine web HTML5
Con l'avvento di HTML5 è stato potenziato tantissimo il concetto di web semantico e la volta scorsa abbiamo parlato della parte centrale di una pagina web spiegando come usare il tag <section>.
Oggi vediamo il suo omologo, il tag <article>, che ha esattamente le stesse caratteristiche del tag <section>, ma è particolarmente adatto alla scrittura di un articolo di Blog o per un articolo di un giornale online o rivista elettronica.
Come per il tag <section>, anche stavolta — dal punto di vista puramente sintattico e funzionale — un tag <article> è 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 <article>
"Article" o in italiano "articolo" è quel luogo in cui deve essere inserito un testo, eventualmente condito con elementi multimediali, dove viene trascritto un articolo, quindi tipicamente sarà predominante la presenza di testo scritto e paragrafi <p>, e in qualità di articoli troveremo alcuni elementi distintivi che nella sezione tag <section> non comparivano:
- il titolo dell'articolo, tipicamente scritto in un tag <h1> o <h2>, tipicamente è anche presente nella URL per potenziare le parole chiave della pagina web. Il titolo è spesso condito con Power Words ed è molto evocativo (e poco descrittivo);
- il sottotitolo, tipicamente scritto in un tag <h2> o <h3>, può essere anche una tag-line, serve a potenziare il messaggio portato dal titolo, ha il compito di dare completezza al titolo e — in parte — deve "spoilerare" il finale dell'articolo;
- una breve didascalia per fare un breve riassunto di ciò che verrà trattato nell'articolo, cosicché il lettore si farà un'idea più precisa se leggere l'articolo o meno;
- la data e ora (timestamp) di pubblicazione di quell'articolo;
- l'autore, eventualmente collegato tramite tag <a href="..."> a una pagina di presentazione dell'autore dell'articolo;
- categoria di appartenenza dell'articolo: solitamente i Blog raccolgono in diverse categorie i vari articoli. Anche la categoria è cliccabile mediante tag <a href="..."> per consentire di approfondire il significato di quella categoria.
I crawler dei motori di ricerca cercheranno qui — nell' article — 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 <article> 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 <article>, innanzitutto usandolo! poi facendo attenzione a non inserire nel tag <article> argomenti non pertinenti con l'argomento centrale trattato nella pagina. Per esempio devi evitare di inserire nel tag <article> il menu principale, i banner pubblicitari, titoli di articoli correlati, che potrebbero distrarre il crawler!
Immagini nel tag <article>
Puoi certamente inserire immagini, video o elementi multimediali all'interno del tag <article>, a patto che siano pertinenti e di supporto nel racconto, nella spiegazione, nel contenuto principale dell'articolo 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!
Gli articoli hanno poi una immagine privilegiata, che è anche utilizzata Open Graph Protocol, a volte chiamata "immagine in evidenza" che caratterizza l'articolo stesso, a volte viene situata nella Hero Section della pagina web a tutto schermo, e viene utilizzata in home page o nella sidebar per creare i link alla apgina dell'articolo.
Wordpress ha uno spazio dedicato per inserire l'immagine in evidenza nell'editor di ogni articolo.
Cam Tv richiede di inserire una immagine di copertina (o video) per ogni nuovo contenuto che si desidera pubblicare sul proprio Blog.
Impaginare il tag <article>
Proprio come avviene per i tag <section>, anche il tag <article> 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 <article>
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 <article> — per dare in pasto al motore di ricerca le informazioni già "impacchettate".
Dal portale schema.org puoi ricavare una serie di metadati davvero esauriente, ti accenno i principali metadati adatti a un articolo di Blog:
- Schema.org > Article
- about: ciò di cui parla l'articolo
- author: autore dell'articolo
- datePublished: data di pubblicazione
- headline: intestazione dell'articolo
- keywords: parole chiave usate o relative all'articolo
- text: corpo dell'articolo, la parte testuale
- ...
Conclusioni
Hai capito l'importanza di scrivere gli articoli del Blog o del tuo notiziario in un tag <article> — introdotto con HTML5 — usando in modo opportuno i Microdata o RDFa! La prossima settimana in questo Corso SEO continueremo a parlare di web semantico per sfruttare al massimo tutti i Tag HTML5, 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.