Cosa sono i Meta tag? Quali utilizzare e come

Condividi

L’utilizzo dei Meta Tag HTML per il SEO è qualcosa di abbastanza serio; gli algoritmi di Google cambiano frequentemente e quello che viene considerato importante quest’anno verrà dimenticato il prossimo. Ma nello specifico, cosa sono i meta tag? Di seguito ti aiuteremo a capire su quali Meta Tag concentrarti, quali devi assolutamente utilzzare e, sopratutto, cosa puoi farci.

Meta tags

Cosa sono i meta tag?

Partiamo dalla cosa basilare: cosa sono i Meta Tag HTML? L’intestazione di una pagina contiene una miriade di informazioni sul suo contenuto, qui troveremo infatti i Meta Tag, CSS, JavaScript che ad essa vengono applicati; di seguito un piccolo esempio delle informazioni che possiamo raccogliere da questa stringa

<!doctype html>
<html>

 <head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML, CSS, JavaScript">
  <meta name="author" content="John Doe">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> 

<body>
</body>
</html>
  • Charset
  • Description
  • Keywords
  • Author
  • Viewport

Questi sono tutti i Meta Tag che, in sostanza, non sono altro che informazioni dei dati della nostra pagina web come autore, contenuto, eccetera. Ovviamente non compaiono mai sulla pagina, sono soltanto in background in attesa che gli spider rilevino l’HTML e lo utilizzino al fine di migliorare i risultati di ricerca della nostra pagina.

Si rendono utili anche per Feed RSS, browser e social media, che visualizzano il contenuto e forniscono i vari dettagli all’utenza. Ma quali sono quelli da utilizzare? Beh si potrebbe sostenere che il suo utilizzo dovrebbe essere totale ma in realtà non è esattamente così.

Quali sono i tag fondamentali?

Quindi, invece che riempire la pagina web con ogni Meta Tag esistente, cerchiamo di familiarizzare con quelli cui vale davvero la pena utilizzare. Esempio:


<title>5 Ways to Beef Up Your WordPress Security Today</title>

Il tag <title>

Cos’è? Cosa fa? E’ il titolo ed indica il nome della pagina. Ovviamente non si discute, visto che indica ai motori di ricerca il nome della nostra pagina e si rende ancor più utile nel caso volessimo personalizzare il titolo, in modo specifico, anche per i risultati della ricerca.

Ipotizziamo di aver scritto un titolo clickbait al fine che il visitatore, attratto dal titolo, fosse “invogliato” a cliccarvi sopra, qualcosa del genere: “Come guadagnare uno stipendio con cifre a sei zeri con soltanto un laptop, il tuo documento e il tuo amico fidato”.

Naturalmente, con 92 caratteri di titolo, non vi è possibilità alcuna che Google la visualizzi per intero. Invece di andare a riscrivere il titolo andiamo ad utilizzare dei tag che siano più all’altezza degli standard di Google, tipo:

<title>Cifre a sei zeri con il tuo laptop,il tuo migliore amico</title>

NOTA: ricordate che questo è soltanto un esempio. Sul discorso clickbait correlato al SEO ci sarebbe da aprire un intero libro, ma la cosa da tenere a mente è che Google, che come ben sappiamo non è stupido, riesce a confrontare il contenuto della vostra pagina con il titolo per capire se c'è una correlazione. Quindi occhio!

I caratteri sono 56, entro il limite del titolo di Google e la sua funzione non viene intaccata.

Qual è la sua funzione? Un breve riassunto di ciò che gli utenti troveranno all’interno della pagina e sì, ne abbiamo bisogno. Si tratta di un altro Meta Tag essenziale.

Se lasciassimo fare a Google, se fosse quest’ultimo a creare la desrizione, probabilmente verranno fuori le prime centinaia di caratteri che troverà. E se nella parte superiore della pagina avessimo testo alternativo dell’immagine, annunci o simili, che possono essere comunque lette dagli spider di Google, ci ritroveremmo con mezza descrizione, con un pastrocchio. Quindi, scriviamone una.

Charset

Il Charset (di cui abbiamo un esempio nei codici riportati sopra) è il Meta Tag che indica il set di caratteri che il browser dovrà utilizzare per interpretare il contenuto. In buona sostanza, visto che l’UTF-8 non soltanto non è universalmente accettabile ma non è il solo set di caratteri esistente, sarà necessario utilizzarne uno diverso affinchè il sito web venisse tradotto per un pubblico internazionale.

Hreflang

Il Hreflang è un Meta Tag atto ad indicare a Google in quale lingua o dialetto è scritto il contenuto della nostra pagina al fine di mostrarlo all’utenza giusta. Diversi sono i motivi per cui dovremmo utilizzare il tag sopra citato

  • Quando abbiamo creato una pagina con un dialetto specifico, esempio: lingua inglese dialetto Stati Uniti o lingua inglese dialetto britannico
  • Se il nostro sito web è internazionale con diverse versioni tradotte
  • Quando la nostra pagina contiene diversi dialetti e lingue e vogliamo che vengano tutti rilevati.

Viewport

Viewport, un Meta Tag che Google si è impegnata e non poco a spiegare, offre indicazioni su come Google visualizza la nostra pagina su tutti i dispositivi. Se non lo includessimo, o venisse visualizzato nel modo sbagliato, interromperemmo di fatto la visualizzazione degli utenti sui dispositivi mobili. Google consiglia infatti di impostare il tag come segue

<meta name="viewport" content="width=device-width, initial-scale=1">

Ricordiamo che l’includere qualunque variabile – come il tag minimum-scale – danneggerebbe l’aspetto del nostro sito trasformando l’orientamento verticale in orizzontale.

Canonical url

Il Canonical Link serve, nel momento in cui sul nostro sito vi sono pagine simili tra loro o contenuti duplicati, ad indicare a Google qual è la pagina principale ove indirizzare il traffico. Diciamo che Google non accetta calorosamente la duplicazione dei contenuti e quindi, al fine di evitare una penalità da parte loro (provando a classificarci due volte per la stessa cosa), utilizzeremo questo Meta Tag mostrando a Google l’originale. Utile anche nel caso in cui modificassimo la struttura dell’url e volessimo assicurarci che tutto il traffico vada al più recente link.

Robots

<meta name="robots" content="noindex,nofollow">
OPPURE
<meta name="googlebot" content="noindex,nofollow">

serve ad indicare a tutti i robot di ricerca o ai crawler bot (come bingbot o googlebot per ciarne alcuni) come trattare una pagina e, solitamente, con il modo in cui la pagina dovrebbe essere indicizzata.

Diciamo che, per impostazione predefinita, i motori di ricerca seguiranno ed indicizzeranno i collegamenti su ogni pagina presente sul nostro sito ma, per diversi motivi, potremmo dover indirizzare i motori di ricerca a comportarsi diversamente:

  • nofollow – Con questo Google non seguirà i link di affiliazione inseriti nella pagina, utile per quei blog che accettano contenuti dai contributor senza esaminarne il contenuto
  • noindex – da utilizzare nel caso si volesse nascondere una pagina dalla ricerca.
  • nosnippet o max-snippet – controlla il modo in cui immagine, snippet video o il testo vengono visualizzati nella ricerca.
  • unavailable_after: [date]: – viene utilizzato per promozioni limitate nel tempo (come durante il Black Friday di Amazon, tanto per fare un esempio)

Google site verification

Google Site Verification, da utilizzare per verificare la proprietà del sito, accedere ai relativi dati e influire sul SEO

<meta name="google-site-verification" content="https://mywebsite.com" />

Open graph

Twitter Cards and Open Graph (Social Media) – Possiamo utilizzare gli Open Graph che indicano a Linkedin o Facebook come visualizzare i metadati per un post condiviso per la pagina delle piattaforme social sopra citate. Quelli di Twitter invece permettono diverse funzionalità tra le quali: possibilità di estendere il limite dei caratteri per tweet, inserire immagini con link e descrizioni, e altro ancora.

Siamo arrivati alla fine di un elenco, di certo non esaustivo di tutti i Meta Tag esistenti e per quello che è l’infinito mondo di SEO e SEM, ma raggruppa alcuni Tag base, fondamentali per lo sviluppo delle nostre pagine.

Informazioni Autore

Maniscalco Filippo

Blogger, copywriter, project manager. Propositivo e dedito al lavoro, gestisce ogni progetto con passione e dedizione. Appassionato di lettura, scrittura e musica. contatti
DESIGNTEGRATOR.COM | © 2020 | Cookie e Privacy | Agenzia Grafica - Sede di Palermo