Metadati HTML: elementi inclusi e best practice

Pubblicato: 2021-01-08

Elementi e best practice nei metadati HTML

I meta tag sono brevi estratti di un codice che informano i motori di ricerca su informazioni cruciali sulla tua pagina web. Controllano anche il modo in cui i browser Web vengono visualizzati dai visitatori. I meta tag sono presenti in ogni pagina web e puoi vederli solo nel codice HTML. Ecco un elenco di esempi di meta tag per SEO.

  • Meta Description
  • Meta robot
  • Meta titolo
  • Meta set di caratteri
  • Reindirizzamento meta
  • Meta vista

Meta titolo

Il titolo della pagina mostrato da Google e da altri motori di ricerca nei risultati della ricerca è il meta titolo. Un titolo HTML fornisce agli utenti una rapida panoramica del contenuto di un risultato e della sua rilevanza per la query. Di solito è la forma base di informazioni che determina su quale risultato fare clic. L'utilizzo di titoli di alta qualità sulle tue pagine web è molto importante per la SEO. Ecco un esempio di meta titolo:

Metadati HTML: elementi inclusi e best practice

Migliori pratiche

  • Usa un tag title speciale per le tue pagine
  • I titoli devono essere brevi e descrittivi
  • Evita di usare titoli generici e vaghi
  • Usa il titolo o la frase maiuscola
  • Non usare click-bait ma piuttosto qualcosa di degno di click
  • Abbina l'intento di ricerca
  • Usa 60 caratteri o meno
  • Includi parole chiave target ove necessario

Trovare e correggere gli errori dei tag del titolo

Assicurati che il tag del titolo non sia né troppo lungo né troppo corto. Evita titoli inutilmente lunghi o prolissi mantenendoli concisi e descrittivi. Assicurati che ogni pagina abbia un tag title. Evita più tag del titolo HTML sulla pagina poiché i motori di ricerca potrebbero mostrare un tag del titolo irrilevante se sono presenti più pagine web. Titoli duplicati su più pagine. È molto importante che ciascuna delle pagine del tuo sito abbia un titolo univoco e descrittivo.

Metti alla prova la SEO e le prestazioni del tuo sito in 60 secondi!

Un buon design del sito Web è fondamentale per il coinvolgimento e le conversioni dei visitatori, ma un sito Web lento o errori di prestazioni possono compromettere le prestazioni anche del sito Web meglio progettato. Diib è uno dei migliori strumenti di monitoraggio delle prestazioni del sito Web e SEO al mondo. Diib utilizza la potenza dei big data per aiutarti ad aumentare rapidamente e facilmente il traffico e le classifiche. Come si vede in Imprenditore!

  • Strumento SEO automatizzato facile da usare
  • Monitoraggio parole chiave e backlink + idee
  • Garantisce velocità, sicurezza, + monitoraggio di Core Vitals
  • Suggerisce in modo intelligente idee per migliorare la SEO
  • Oltre 250.000.000 membri globali
  • Benchmarking integrato e analisi della concorrenza

Ad esempio “www.diib.com”

Utilizzato da oltre 250.000 aziende e organizzazioni:

  • logo
  • logo
  • logo
  • logo

Sincronizza con statistiche di Google

Costruendo collegamenti

Meta Description

Una meta descrizione fornisce una breve descrizione di una pagina web. I motori di ricerca lo utilizzano per visualizzare una pagina web nei risultati della ricerca. Informa e conquista l'interesse degli utenti utilizzando un breve e accurato riassunto dei contenuti di una determinata pagina. Una meta descrizione rassicura l'utente che si trova sulla pagina giusta e esattamente quello che sta cercando. Tuttavia, non vengono utilizzati da Google come fattore di ranking diretto. L'immagine seguente mostra una meta descrizione:

Metadati HTML: elementi inclusi e best practice

Migliori pratiche

  • Scrivi una descrizione univoca e comprensibile per ogni pagina
  • Fornire un riepilogo accurato
  • Non utilizzare descrizioni generiche
  • Usa le parole chiave principali in modo appropriato in una frase significativa
  • Usa il caso della frase
  • Non usare click-bait ma scrivi qualcosa di degno di click
  • Abbina lo scopo della ricerca
  • Usa 160 caratteri o meno

Errori comuni nella descrizione della meta

Gli errori più comuni nella scrittura di una meta descrizione sono quasi simili a quelli dei tag title. Una meta descrizione troppo lunga o troppo corta. Di solito non c'è limite alla lunghezza di una meta descrizione. Per adattarsi alla larghezza del dispositivo, i risultati della ricerca estratti vengono generalmente accorciati. Un altro errore è dove una pagina web manca completamente di una meta descrizione.

Assicurati di scriverlo sul tuo sito. Puoi anche avere una pagina con più di una meta descrizione, tuttavia, questo potrebbe confondere i motori di ricerca. Anche avere meta descrizioni simili su più pagine è un errore comune. Assicurati che ogni pagina abbia la sua descrizione univoca.

Meta robot

I meta robot consentono al motore di ricerca di eseguire la scansione delle pagine Web e offrono anche istruzioni su come farlo. La presenza del tuo sito nei risultati di ricerca può avere un impatto negativo se non utilizzi gli attributi corretti nel tag meta robots. Comprendere questo tag e usarlo in modo efficace avrà un grande impatto sulla tua SEO.

I valori dell'indice indicano ai bot di eseguire l'indicizzazione della pagina, mentre il valore noindex indica ai bot di non eseguire l'indicizzazione della pagina. Il valore seguente indica ai bot di eseguire la scansione dei collegamenti sulla pagina per garantirli, mentre il valore nofollow indica loro di non eseguire la scansione dei collegamenti sulla pagina per evitare qualsiasi approvazione.

Migliori pratiche

Utilizza i meta tag robot solo quando limiti le scansioni di Google su una pagina ed evita di bloccare le pagine con meta tag robot nei robot.

Errori comuni dei meta robot

Alcuni dei tipici errori dei meta robot includono i robot che non bloccano le pagine di indice. Ciò rende difficile per Google vedere il tag noindex robots e potrebbe continuare a indicizzare l'URL. Un meta noindex canaglia riduce il traffico organico della pagina impedendo a Google di indicizzarla. Il metanofollow canaglia impedirà a Google di eseguire la scansione dei collegamenti della pagina e ridurrà le possibilità di scoprire e indicizzare contenuti cruciali. Questo può anche impedire il flusso di PageRank alle pagine importanti.

Meta Viewport

Una meta viewport imposta l'area visibile della pagina Web e fornisce istruzioni su come la pagina verrà visualizzata dal browser su schermi di dimensioni diverse. Questo è importante poiché le pagine web ottimizzate per i dispositivi mobili sono classificate più in alto nei risultati di ricerca per dispositivi mobili di Google.

Migliori pratiche

È fondamentale utilizzare meta viewport su tutte le pagine Web e con il tag standard.

Meta Charset

Questo tag determina la codifica dei caratteri per la tua pagina o semplicemente indica al browser come visualizzare i caratteri e il testo sulla pagina. Esistono due set di caratteri comuni tra cui UTF-8 utilizzato per la codifica Unicode e ISO-8859-1 utilizzato per la codifica dell'alfabeto latino. La codifica con il carattere sbagliato comporterà una visualizzazione errata del browser.

Metadati HTML: elementi inclusi e best practice

Sarai interessato

(Credito immagine: impara tutorial web)

I problemi di formattazione dei caratteri determinano un'esperienza utente negativa e le tue pagine possono sembrare rotte. Altri problemi che può causare includono un minor numero di persone che si collegano alla tua pagina, tempo di permanenza ridotto, tempo sulla pagina ridotto, frequenza di rimbalzo elevata e il motore di ricerca potrebbe non comprendere i tuoi contenuti.

Migliori pratiche

  • Usa sempre il meta tag charset su tutte le tue pagine web
  • Usa Unicode/UTF-8 ove possibile

È importante controllare tutte le pagine Web per assicurarsi che utilizzino la codifica UTF-8.

Reindirizzamento aggiornamento meta

Questo tag reindirizza l'utente a un altro URL dopo un certo periodo di tempo. Google comprende e rispetta i tag di reindirizzamento del meta refresh, ma è meglio non usarli in SEO. Questo perché la maggior parte dei browser non li supporta e può causare confusione all'utente sollevando problemi di sicurezza. Inoltre, richiede tempo poiché le pagine richiedono l'analisi prima che l'URL di destinazione sia visibile. Ecco come apparirà quel tag:

Metadati HTML: elementi inclusi e best practice

(Credito immagine: HostPapa)

Migliori pratiche

  • Utilizza i tag di reindirizzamento del meta refresh solo quando necessario

È meglio evitare di utilizzare i reindirizzamenti di meta refresh, ove possibile, poiché sono una cattiva pratica. Se li hai sulle tue pagine web, puoi invece utilizzare reindirizzamenti 301 o 302, ove possibile.

Meta parole chiave

Le meta keyword sono un buon esempio di meta tag che viene usato spesso in questi giorni. Non è consigliabile aggiungere il tag delle meta keywords con un elenco di parole chiave target poiché Google ha smesso di utilizzare le parole chiave per le classifiche. Questo perché molte persone hanno inserito parole chiave irrilevanti senza che gli utenti abbiano mai visto quelle parole chiave. Google ha ignorato il meta tag delle parole chiave poiché è stato spesso abusato.

Bing ora utilizza il meta tag delle parole chiave per segnalare lo spam, quindi questo potrebbe funzionare contro di te. È meglio rimuovere il tag dal tuo sito.

I metadati sono dati che forniscono informazioni su altri dati. I metadati HTML riepilogano le informazioni di base sui dati rendendo più facile trovare e lavorare con quei dati particolari. Può essere creato manualmente per una maggiore precisione o automaticamente per offrire più informazioni di base. I dati Mata vengono utilizzati per file di documenti, immagini, video, fogli di calcolo e pagine Web.

Che cos'è un generatore di meta tag?

Un generatore di meta tag ti consente di sviluppare i meta tag HTML necessari e più utili per la SEO.

Procedure consigliate per l'utilizzo di metadati HTML

Dichiara sempre un Doctype

Una dichiarazione doctype dovrebbe essere la prima cosa nei tuoi meta tag HTML per SEO. Notifica al browser gli standard XHTML utilizzati. È consigliabile utilizzare il doctype XHTML 1.0 strict, sebbene sia considerato una scelta difficile da alcuni sviluppatori. Si assicura che il codice sia rigorosamente conforme agli standard più recenti.

Usa tag titolo significativi

I tag del titolo consentono alla pagina Web di essere più significativa e di facile ricerca.

Usa un elenco descrittivo di meta tag

Un elenco di meta tag aggiunge più significato alla tua pagina web per gli user agent come gli spider dei motori di ricerca. È importante che la descrizione non contenga parole e frasi ripetute poiché i motori di ricerca lo rileveranno. Usa descrizioni semplici e dirette quando spieghi lo scopo della tua pagina web.

Dividi il tuo layout in sezioni principali usando i div

Quando costruisci il design di un sito web, considera di dividere la pagina web in sezioni nel primo passaggio. Ciò promuoverà un codice pulito e ben intenzionato, aiutandoti a prevenire confusione e utilizzando eccessivamente i div durante la scrittura di un markup complesso e lungo.

Evita di mescolare i contenuti dalla presentazione

Non mischiare il tuo contenuto HTML con la presentazione visiva del contenuto fornita dai CSS. La creazione di un file CSS separato per i tuoi stili anziché utilizzare gli stili in linea nel tuo HTML è molto essenziale. Ciò consentirà a te e ad altri sviluppatori che lavorano sul codice di apportare modifiche rapide e garantire che i tuoi contenuti siano più comprensibili per gli interpreti.

Minimizza e unifica CSS

I siti Web tipici hanno un file CSS principale e probabilmente altre cose come correzioni specifiche del browser e ripristino CSS. Quando ogni file C effettua una richiesta HTTP, rallenta i tempi di caricamento del sito Web. Estrarre caratteri che non sono necessari come newline, spazi e tabulazioni da tutto il codice e unificare i file che possono essere integrati insieme. Questo può aiutare a risolvere il problema e migliorare i tempi di caricamento del tuo sito web.

Riduci a icona, unifica e sposta verso il basso JavaScript

Evita di utilizzare JavaScript inline, ma prova invece a minimizzare e unificare le tue librerie JavaScript per ridurre il numero di richieste HTTP necessarie per generare una delle tue pagine. Tuttavia, non puoi avere download paralleli nella maggior parte dei browser, il che significa che il browser non scaricherà nient'altro durante il download di JavaScript, facendo apparire la pagina come se si stesse caricando lentamente.

Per evitare ciò, puoi caricare il tuo JavaScript dopo aver caricato il tuo CSS posizionando il JavaScript alla fine del tuo documento HTML ove applicabile, preferibilmente prima di chiudere il tag body.

Usa saggiamente gli elementi di intestazione

L'utilizzo di elementi da h1 a h6 per indicare l'ordine del contenuto HTML rende il contenuto più intuitivo per user agent, motori di ricerca e software di lettura dello schermo. Quando si utilizzano i blog, è meglio utilizzare l'elemento h1 per il titolo del post del blog anziché il nome del sito poiché è l'ideale per i motori di ricerca.

Usa i tag HTML giusti al posto giusto

È importante conoscere i tag HTML disponibili e come utilizzarli accuratamente per evitare confusione e creare una struttura di contenuto pertinente.

Ci auguriamo che tu abbia trovato utile questo articolo.

Se vuoi saperne di più sulla salute del tuo sito, ricevere consigli e avvisi personali, scansiona il tuo sito web da Diib. Ci vogliono solo 60 secondi.

Entra nel tuo sito web

Ad esempio “www.diib.com”

Non ne ho mai abbastanza di DIIB!! Il miglior strumento e sono così grato per averlo trovato. Lo adoro assolutamente!! Incrociamo le dita non alzi i prezzi perché è così perfetto.
Testimonianze
Caterina Gage
Direttore delle operazioni in ahoymatey.com.au

Evita di usare i div in modo eccessivo

Alcuni sviluppatori avvolgono i tag div su altri tag div che hanno più tag div creando numerosi div. Il div è considerato un elemento privo di significato che dovrebbe essere utilizzato solo quando non sono disponibili altri elementi adatti secondo le specifiche HTML del W3C. Evita di avere numerosi div utilizzandoli in modo responsabile e solo quando è necessario.

Usa un elenco non ordinato per la navigazione

L'elemento di navigazione è un fattore molto essenziale nella progettazione di siti Web se combinato con CSS. Aiuta i tuoi menu di navigazione a essere semantici e belli. Ecco due modi per farlo:

Metadati HTML: elementi inclusi e best practice

(Credito immagine: Studytonight)

Chiudi i tuoi tag

Le specifiche del W3C richiedono la chiusura di tutti i tag. Altri browser potrebbero visualizzare correttamente le tue pagine anche se la mancata chiusura dei tag non è valida secondo gli standard normali.

Usa il markup minuscolo

Mantenere il markup in minuscolo è una pratica standard nel settore. La capitalizzazione del markup influisce sulla leggibilità del codice ma non modifica la visualizzazione delle tue pagine web.

Usa le correzioni di IE modulari

Se riscontri problemi con le tue pagine, puoi utilizzare i commenti condizionali per concentrarti su Internet Explorer. Assicurati di rendere le correzioni modulari per garantire che il tuo lavoro sia a prova di futuro in modo che la versione precedente di IE non richieda alcun supporto.

Convalida il tuo codice

Non dovresti considerare la convalida come la valutazione finale di un buon lavoro contro un lavoro cattivo. Un'opera che convalida non è necessariamente codice valido e, in alternativa, un'opera che non viene convalidata completamente non è necessariamente codice errato.

Puoi utilizzare i servizi di convalida automatica come utili debugger per identificare gli errori di rendering. Convalida frequentemente il tuo lavoro quando scrivi HTML per evitare problemi che potrebbero essere difficili da identificare una volta completato il tuo lavoro.

Scrivi codice formattato in modo coerente

Scrivere una base di codice pulita e ben intenzionata mette in risalto la tua professionalità e rende più facile per gli sviluppatori che potrebbero lavorare sul tuo codice. Aumenterai anche la leggibilità del tuo lavoro quando scrivi un markup adeguatamente rientrato dall'inizio. Per esempio:

Metadati HTML: elementi inclusi e best practice

(Credito immagine: html.com)

Evita commenti eccessivi

Lo scopo della documentazione del codice è renderlo comprensibile e commentare il codice è ragionevole e logico per linguaggi di programmazione come Java, PHP e C#. Tuttavia, il markup è molto autoesplicativo e non è necessario commentare ogni riga in XHTML/HTML. Rivedere il tuo lavoro per la semantica ti aiuterà se stai commentando molto nel tuo HTML per spiegare il processo.

Diib: Ottieni qui le tue statistiche sui metadati HTML!

Utilizzare questi elementi e seguire le linee guida ti aiuterà nei tuoi sforzi SEO.

Elementi come una buona meta descrizione aumenteranno le tue percentuali di clic dalle ricerche anche se non miglioreranno il tuo posizionamento. I meta tag vengono ora utilizzati nelle piattaforme di social media come Twitter e Facebook. Puoi utilizzare i tag per verificare come i tuoi dati vengono condivisi su Facebook. La collaborazione con Diib Digital ti fornirà le metriche vitali relative ai tuoi metadati in modo da poter prendere decisioni efficaci sulla salute del tuo sito web.

Ecco alcune delle funzionalità della nostra Dashboard utente che sicuramente apprezzerai:

  • Obiettivi personalizzati progettati per migliorare le prestazioni del sito web
  • Avvisi che ti informano sulla tua autorità di dominio e su altri problemi SEO tecnici
  • Pagine rotte in cui hai backlink (controllo 404)
  • Strumenti di monitoraggio e monitoraggio di parole chiave, backlink e indicizzazione
  • Ottimizzazione dell'esperienza utente e della velocità mobile
  • Ottimizzazione del titolo dell'immagine

Fai clic qui per la scansione gratuita o chiama semplicemente il numero 800-303-3510 per parlare con uno dei nostri esperti di crescita.