7 tag html fondamentali per la SEO, vedrai nel dettaglio come ottimizzarli per farli funzionare al meglio e rendere il massimo per il posizionamento del tuo sito web.
di Antonio Lamorgese
Lo sapevi che sono solo 7 i tag HTML, essenziali ottimizzare la SEO? Questi 7 tag se presenti tra i tag <head> & <body> del tuo documento HTML influenzano notevolmente le prestazioni del tuo sito agli occhi dei motori di ricerca?
I tag HTML sono comandi testuali racchiusi tra parentesi angolari è sempre presenti in un file HTML. Sono invisibili agli utenti (a meno che non li cerchino nel codice sorgente della pagina) e forniscono dati sui tuoi motori di ricerca. Pertanto, aiutano i motori di ricerca a capire di cosa tratta il tuo contenuto.
Mettono in evidenza quelle che sono le parti più importanti della tua pagina e consente agli utenti di ricercare e trovare più facilmente i tuoi contenuti nel web. Quindi, è naturale presumere che i tag HTML debbano essere una parte cruciale dell’ottimizzazione on-page, assolutamente vitale per il SEO.
È stato così fino a quando i motori di ricerca hanno deciso di non guardare sempre e solo i tag per ottenere informazioni. Ma i tag HTML sono ancora importanti nel 2019?
È vero che negli anni precedenti l’influenza dei tag HTML sulle classifiche è diminuita. E ora i webmaster possono anche scegliere di non utilizzare alcuni tag nel loro codice HTML, tuttavia, ci sono ancora alcuni tag che: migliorano l’esperienza dell’utente fornendo una migliore navigazione e la migliore corrispondenza con le query di ricerca; forniscono indicazioni ai motori di ricerca su dove trovare le parti più importanti del sito e quali parti trascurare. Adesso vedrai ciascun tag nel dettaglio.
1. Tag del titolo.
I tag <title> vengono generalmente utilizzati dai motori di ricerca per determinare l’oggetto di una determinata pagina e visualizzarlo nella SERP. In HTML un tag <title> è simile al seguente codice:
<title>Il tuo titolo</title>
I tag <titile> erano di enorme importanza per i motori di ricerca. questo tag è una delle prime cose che le persone vedono nella SERP. Pertanto, questi tag vengono riempiti con frasi contenenti parole chiave fino all’esasperazione.
Oggi i motori di ricerca comprendono ancora di cosa tratti una pagina web dal suo tag <title>. Tuttavia, con il passaggio di Google alla ricerca semantica, il valore di questo tag è leggermente diminuito. Ad esempio, alcuni ricercatori hanno scoperto che un tag title ottimizzato per parole chiave è associato ad un miglior posizionamento, ma la correlazione è meno importante di una volta.
Ora il motore di ricerca è in grado di interpretare l’argomento di una pagina web senza parole chiave esatte nel titolo ma sulla base di tutti gli elementi della pagina: meta description, immagini, e naturalmente, il contenuto stesso.
Nonostante tutte queste prove, non possiamo che concordare sul fatto che i tag title vengono utilizzati in tre posti e con la massima visibilità:
a) SERP : Il luogo in cui l’utente decide di fare clic o meno;
b) Le schede del browser Web : la visibilità in questo luogo è particolarmente importante quando gli utenti hanno molte schede aperte nel browser;
c) I social network : il tag title viene utilizzato quando la pagina viene condivisa.
Di tanto in tanto, però, Google sceglie di non utilizzare il tag del titolo ma ne visualizza uno diverso. Questo è abbastanza fastidioso, ad esempio esistono alcuni motivi per cui questo problema può verificarsi:
a) Il titolo è pieno di parole chiave : è ovvio ottimizzare il titolo per le parole chiave di destinazione, tuttavia è importante non esagerare. Altrimenti, Google riscriverà il titolo nel modo che ritiene più appropriato.
b) ll titolo non corrisponde ad una determinata ricerca: Google può scegliere la tua pagina per una determinata ricerca anche se il titolo non corrisponde alla ricerca. In questo caso, il titolo può essere talvolta riscritto per ottimizzare la SERP. È ovvio che non è possibile scrivere un titolo che corrisponda a tutte le possibili ricerche. Tuttavia, se vedi che Google riscrive il tuo titolo, allora considera di rivederlo.
c) Esistono alcuni titoli alternativi : Facebook e Twitter hanno i propri tag nella sezione <head>, quindi se utilizzi i titoli alternativi per questi social network, Google potrebbe anche usarli al posto del tuo tag title.
Come ottimizzare il tag title? Penso che dovresti saperlo. Comunque è davvero facile ottimizzare i titoli! Ci sono alcuni consigli su come scrivere quelli che sicuramente piaceranno di più a Google:
1.1 Lunghezza del titolo
Si consiglia di mantenerlo lungo meno di 70 caratteri , altrimenti può essere tagliato in SERP e alcune delle tue parole chiave importanti potrebbero essere omesse. Inoltre, tieni presente che la lettera W occupa più spazio rispetto, ad esempio, alla lettera I o ad alcune lettere minuscole.
Pertanto, se il tuo titolo è piuttosto lungo, è consigliabile evitare le lettere maiuscole tenendo presente quanto spazio esse occupino. Ad ogni modo, un titolo lungo non è un errore grave, non c’è nessuna penalizzazione per questo. Ma sono sicuro che vorresti che i tuoi titoli fossero completamente visualizzati nei risultati di ricerca.
Se usi wordpress puoi verificare facilmente la SERP prodotta con il tuo ttiolo, basta installare il plugin Yoast SEO, per analizzarne il contenuto. .
1.2 Parole chiave del titolo
Se non desideri che Google riscriva i tuoi titoli o ti punisca per aver causato un’esperienza utente scadente, ti preghiamo di non riempire i tuoi titoli con un milione di parole chiave .
Tuttavia, è ancora importante ottimizzare i titoli per le parole chiave target, basta farlo in modo intelligente. Prova a incorporare una o due parole chiave per creare un titolo descrittivo e unico. Scrivi per i tuoi clienti. È chiaro che vuoi attirare più visitatori, ma sicuramente vorresti che rimanessero e si convertissero, senza rimbalzare immediatamente.
Usa le tue parole chiave più vicino all’inizio del titolo. In questo modo, gli utenti che sfogliano i risultati della ricerca noteranno prima le informazioni importanti.
Consiglierei anche di evitare titoli duplicati , poiché Google potrebbe pensare di avere contenuti duplicati e penalizzare il tuo sito Web.
1.3 Marchio in un titolo
Nel caso in cui tu abbia un marchio noto, è una buona idea usarlo nel titolo. Sarà una sorta di approvazione dei tuoi contenuti da parte della qualità e del riconoscimento associati al tuo marchio. Tuttavia, ricorda di usarlo alla fine del titolo (a meno che non sia una home page o una pagina Informazioni che dovrebbe essere naturalmente più focalizzata sul marchio), in modo che informazioni uniche siano più visibili.
2. Tag meta description.
La meta description è contenuta nella sezione HTML <head> di una pagina. Di solito viene visualizzato nella SERP dopo il titolo e l’URL del sito Web. In HTML è così:
<meta name=”description” content=”descrizione breve del contenuto della pagina web“>
Il valore SEO della meta description è molto vicino a quello del titolo. È un elemento importante di una pagina che aiuta i motori di ricerca a determinare l’oggetto della pagina e consente agli utenti di capire se la pagina corrisponde alla loro ricerca.
Sebbene la meta description non sia un fattore di classificazione, determina comunque se l’utente farà clic sulla tua pagina influenzando così il posizionamento e la visibilità. Inoltre, una descrizione accurata che corrisponde ai tuoi contenuti ridurrà significativamente la frequenza di rimbalzo ed eventuali penalizzazioni da parte dei motori di ricerca.
La meta description può essere vista in due modi:
a) SERP : la meta description occupa la maggior parte della SERP;
b) I social network : la meta description di solito appare quando le persone condividono il tuo URL attraverso i canali dei social media.
Analogamente all’uso deliberato dei titoli da parte di Google, la meta description visualizzata in SERP potrebbe differire da quella specificata nella sezione <head>.
Sembra che le meta description siano persino più dipendenti dalle ricerche dei titoli. Di norma, Google utilizza la meta description specificata in <head>, ma quando sono necessarie ulteriori informazioni o più contesti per abbinare la query, possono essere necessarie anche alcune parti del contenuto della pagina web. Ci sono alcuni modi per risolvere questo problema. La cosa più corretta che puoi fare è scrivere la meta description che corrisponde meglio al contenuto della tua pagina.
Come ottimizzarla?
Tieni sempre d’occhio la lunghezza della meta description. Non molto tempo fa, per essere completamente visualizzata nella SERP, la lunghezza della meta- description doveva essere di circa 160 caratteri. Quindi gradualmente questo valore è aumentato fino a 300 caratteri. Infine, a dicembre 2017 la lunghezza della meta description ha superato i 300 caratteri.
Cosa dovresti fare in una situazione del genere? Molte persone hanno condotto alcuni esperimenti per capire qual è la miglior lunghezza per la meta description. Bene, la risposta a questa ricerca è che non c’è una lunghezza sicura.
Innanzitutto, è consentita la descrizione di qualsiasi lunghezza. Se troppo lunga, Google la taglierà. Penso che il modo più sicuro sia ancora attenersi ai 300 caratteri e tenere d’occhio glie ultimi aggiornamenti su questo argomento.
Se usi wordpress, puoi controllare le tue meta description avvalendoti sempre di Yoast SEO.
2.1 Crea una meta description che funga da annuncio per la tua pagina
Nella situazione in cui Google giochi con le tue meta-description, prova a creare una descrizione che pubblicizzi i contenuti della tua pagina html nel modo migliore e conciso possibile. Evitando descrizioni duplicate: i motori di ricerca penalizzano fortemente eventuali contenuti duplicati sul tuo sito web.
Inoltre, ricorda che eventuali parole in grassetto attirano di più l’attenzione degli utenti. Pertanto, ottimizzare la tua meta descrizione per le parole chiave è ancora importante.
2.2 Nessuna virgoletta nella meta descrizione
Quando usi le virgolette doppie nell’HTML della meta description, Google taglierà questo testo tra virgolette quando lo visualizzi nella SERP. Pertanto, è meglio rimuovere tutti i caratteri alfanumerici dalle meta description.
2.3 Markup dello schema
Non scherzo, puoi effettivamente arricchire la SERP. Utilizzando un markup speciale , puoi aggiungere elementi al tuo HTML che renderanno le tue descrizioni più attraenti per gli utenti. Ad esempio, possono essere adornati da stelline, valutazioni dei clienti, immagini, informazioni aggiuntive sul prodotto, ecc…
Grazie a Google, non è necessario essere uno sviluppatore web esperto. È possibile utilizzare l’Assistente per il markup dei dati strutturati . Prima di aggiungere il blocco di markup dello schema HTML alle tue pagine, ricorda di visualizzare in anteprima i frammenti di SERP copiando e incollando il codice sorgente della tua pagina nello strumento di test di Google.
3. I tag OpenGraph.
I tag Open Graph (OG) sono metatag aggiuntivi inseriti nella sezione HTML <head> di una pagina che consentono a qualsiasi pagina Web di diventare un oggetto ghiotto per i social network. È stato introdotto per la prima volta da Facebook nel 2010 e ulteriormente riconosciuto da altre principali piattaforme di social media (LinkedIn, Google+, ecc.)
In HTML un tag OpenGraph si presenta così:
<meta name=”og:title” property=”og:title” content=”Open Graph Title“>
I tag OG ti consentono di controllare come sono rappresentate le informazioni sulla tua pagina quando vengono condivise tramite i canali social. Questa possibilità può aiutarti a migliorare le prestazioni dei tuoi collegamenti sui social media, aumentando così le conversioni e le condivisioni.
Come ottimizzare questo tipo di tag? Prima di decidere di implementare i tag OG nel tuo HTML, prendi in considerazione alcune ottimizzazioni. Ci sono molti tag Open Graph, io ti darò alcuni consigli su quelli più importanti e popolari.
3.1 Titolo Open Graph
È chiaro, qui specifichi il titolo del tuo contenuto. Puoi copiare e incollare il tag del titolo se ritieni che sia abbastanza convincente per i canali dei social media.
Tieni presente che dovrebbe contenere tra 60 e 90 caratteri, altrimenti potrebbe essere troncato.
3.2 Tipo Open Graph
Con l’aiuto di questo tag, puoi descrivere il tipo di oggetto che sei pronto a condividere: un sito Web, un post, un video, un’azienda, ecc. Puoi controllare l’elenco completo qui .
Questo tag è considerato importante se nella tua pagina fosse presente il pulsante “Like”. Può essere utile determinare se i tuoi contenuti verranno visualizzati nella sezione di interesse dell’utente di Facebook nel caso in cui “Piaccia”.
Nella maggior parte dei casi, il tipo è “sito Web”, poiché si condividono principalmente collegamenti a siti Web. In tal caso, non è necessario specificare il tipo nel codice, verrà letto come tale per impostazione predefinita.
3.3 Descrizione Open Graph
Questo è molto simile al tag meta description. Tuttavia, non verrà visualizzato nella SERP, verrà mostrato come riepilogo quando la tua pagina verrà condivisa. Per questo motivo, non ha senso inserire abilmente le tue parole chiave in questa particolare descrizione.
Il tuo compito principale ,qui, è quello di parlare al tuo potenziale pubblico, generando più clic. Per quanto riguarda la lunghezza, è considerata una buona pratica mantenerlo di circa 200 caratteri.
3.4 Immagine Open Graph
Questo è un vero asso nella manica. Un’immagine renderà il tuo link condivisibile più attraente del 500%. Quindi fai del tuo meglio.
È chiaro che l’immagine dovrebbe attirare l’attenzione, richiedere associazioni adeguate. Puoi inserire del testo sull’immagine OG per richiamare qualsiasi azione da parte dell’utente. La risoluzione consigliata per l’immagine OG è 1200×627 pixel, la dimensione – fino a 5 MB.
Una volta che hai finito con i meta tag OG, puoi controllare come appare tutto con l’aiuto di Open Graph Object Debugger , uno strumento creato da Facebook.
3.5 Schede Twitter
Le schede Twitter sono molto simili ai tag OG (titolo, descrizione, immagine, ecc.), Ma sono utilizzate esclusivamente da Twitter. Sebbene ora i tweet possano superare i 140 caratteri storici, queste cards sono una piacevole estensione che consente al tuo tweet di distinguersi tra la folla di tweet di testo comuni.
Esistono alcuni tipi di cards twitter:
Scheda riepilogativa: oltre al tweet originale, è disponibile un’anteprima del contenuto della pagina, utile per evidenziare post di blog, prodotti, notizie, ecc.
Titolo: 70 caratteri
Descrizione: 200 caratteri
Immagine: 120x120px, fino a 1 MB
Scheda di riepilogo con un’immagine grande: questa scheda è simile alla precedente, ma contiene un’immagine più grande. L’immagine può anche includere del testo che trasmette il punto principale del contenuto della tua pagina, un invito all’azione o qualcosa di veramente stimolante a fare clic.
Titolo: 70 caratteri
Descrizione: 200 caratteri
Immagine: 280x150px, fino a 1 MB
Card Player: tali cards consentono agli utenti di riprodurre video o audio all’interno di un tweet.
Descrizione: 200 caratteri
Video: H.264, profilo di base, livello 3.0, fino a 640 x 480 pixel a 30 fps.
Audio: AAC, profilo a bassa complessità
Cards app : tali schede consentono agli utenti di scaricare app mobili direttamente da un tweet. Presentano un nome, una descrizione, un’icona, una valutazione e un prezzo.
Titolo: rendering dall’ID app
Descrizione: 200 caratteri
Immagine: rendering dall’ID app
Nota: è supportato solo un tipo di card per pagina.
Quando sei pronto con gli elementi della tua card Twitter, devi fare due cose:
Imposta le cards per le tue pagine. Inizia qui.
Convalida le tue cards qui. Lo strumento di validazione ti permetterà di verificare se ci sono errori e ti permetterà di vedere in anteprima le tue carte.
Le cars player devono essere ulteriormente approvate da Twitter. Usa questa guida per scoprire come farlo.
4. Il meta tag robot.
Un tag robot è un elemento nel codice HTML di una pagina che informa i motori di ricerca quali pagine del tuo sito dovrebbero essere indicizzate e quali no. Le sue funzioni sono simili a quelle di robots.txt. Ma viene generalmente utilizzato per impedire ai motori di ricerca di indicizzare singole pagine, mentre robots.txt impedisce loro di indicizzare un intero sito o parte di esso.
In HTML può apparire così:
<meta name=”robots” content=”index, follow“>
Non è che un tag robot possa aiutarti a migliorare le tue classifiche, ma puoi usarlo per salvare le tue classifiche nel caso in cui devi bloccare alcune pagine dall’indicizzazione.
Ad esempio, puoi avere alcune pagine con contenuti piuttosto sottili che non ti interessano essere indicizzati nella ricerca, ma che vorresti conservare. In questo caso, puoi semplicemente aggiungere un tag noindex per questa pagina.
Se non aggiungi questo tag al tuo HTML, i motori di ricerca eseguiranno la scansione e indicizzeranno tutte le tue pagine per impostazione predefinita. Ha senso utilizzare un tag robot solo se si desidera modificare uno di questi parametri.
5. Etichetta canonical.
Quando hai poche pagine con contenuto identico, puoi utilizzare un tag canonical per indicare ai motori di ricerca quale pagina deve essere prioritaria.
In HTML appare così:
<link href=”URL” rel=”canonical“>
Un tag canonical è importante per la SEO per due motivi.
Prima di tutto , non solo dice ai motori di ricerca quale pagina tra quelle simili è più importante, ma mostra anche che tali pagine non sono duplicate. Poiché i contenuti duplicati sono fortemente penalizzati dai motori di ricerca.
In secondo luogo , impedisce la cannibalizzazione che si verifica quando le pagine meno importanti tra quelle simili ottengono classifiche più alte.
Apri il progetto e presta attenzione ai titoli duplicati e alle meta description duplicate.
Nel caso in cui tu abbia alcuni URL con contenuto identico, specifica un elemento <link rel = “canonical”> nell’HTML della pagina.
6. Tag di intestazione.
I tag di intestazione sono i titoli (h1-h6) che usi per strutturare la tua pagina. In HTML un tag di intestazione può apparire così:
<h1>una tua intestazione qui…</h1>
Non è un segreto che è del tutto lecito usare i tag <h>. Tuttavia, questi tag aiutano i motori di ricerca a leggere i tuoi contenuti in modo più efficiente. L’ordine dei tag di intestazione (da h1 ad h6) mostra il livello di importanza di ogni sezione.
Inoltre, quando una pagina è strutturata a livello, è molto più facile per i visitatori leggerla e comprendere le parti più importanti in breve tempo.
Inoltre, di volta in volta, a Google piace creare contenuti in primo piano di tipo ad elenco prelevati dai titoli di una determinata pagina (di solito funziona per guide e istruzioni). L’h1 della tua pagina corrisponderà alla query di ricerca e i tuoi sottotitoli (h2, ad esempio) creeranno un elenco cronologico in uno snippet in primo piano. Il risultato verrà visualizzato in questo modo:
La gerarchia dei titoli consentirà ai motori di ricerca di comprendere meglio i tuoi contenuti. Come sai, ora vengono presi in considerazione tutti i fattori per fornire le migliori risposte corrispondenti alle nostre domande.
È consigliabile utilizzare una h1 per pagina e suddividere logicamente i contenuti in sezioni con h2. Se necessario, è possibile segmentare ulteriormente le sezioni h2 con h3, h4 e così via. Basta non riempire la tua pagina con una serie di intestazioni diverse. Usali strategicamente per introdurre
Poiché le intestazioni introducono i punti principali di ciascuna sezione della pagina, è consigliabile includere in esse le parole chiave target e i loro sinonimi. Inoltre, di solito il tuo h1 (se lo usi una volta come titolo di una pagina) sarà simile al tag del titolo in HTML. Pertanto, sarà già ottimizzato in linea con il tag del titolo.
Un consiglio, non abusare con le parole chiave! Scegli però, una bella parola chiave a coda lunga, composta da almeno 3 o 4 parole.
Mentre i motori di ricerca leggono i tuoi meta tag, i tuoi visitatori leggono il testo. Pertanto, non devi solo migliorare l’indicizzazione dei tuoi contenuti, ma anche l’esperienza dell’utente.
Quando usi il tag h1 per il titolo della tua pagina, cerca di renderlo visibile ai visitatori, dato che, questo tag trasmette l’argomento principale del contenuto della tua pagina. Pertanto, dovrebbe essere:
a) più grande di tutti gli altri elementi di testo della tua pagina;
b) evidente a colpo d’occhio: usa elementi di formattazione e stile diversi per farlo risaltare.
7. Attributo Alt.
L’attributo alt fa parte di un tag immagine e fornisce una descrizione per un’immagine. In HTML potrebbe apparire così:
<img src=”url” alt=”La descrizione della tua imagine qui…“>
Il testo alternativo ha un ruolo importante nell’ottimizzazione delle immagini. Rende le tue immagini accessibili sia ai motori di ricerca (dicendo loro cosa significa una particolare immagine) sia alle persone (visualizzando un testo alternativo nel caso in cui una particolare immagine non venga visualizzata correttamente).
I testi alternativi sono un’altra opportunità per utilizzare le parole chiave target. Scrivi la descrizione che fornisce il contesto ai tuoi contenuti e usa una parola chiave dove è più adatta. Le immagini ottimizzate per parole chiave funzioneranno perfettamente in combinazione con i fattori che i motori di ricerca prendono in considerazione quando classificano le pagine.
Inoltre, cerca di mantenere le tue descrizioni piuttosto brevi – circa 125 caratteri, poiché gli screen reader tagliano i testi alternativi attorno a questo segno.
Nessuno di questi tag può influenzare direttamente il tuo successo nella SEO, ma possono influenzarlo indirettamente. È strettamente necessario sapere cosa hai tra i tag <head> & <body>, come funziona e cosa puoi fare per farli funzionare al meglio.
