MetaTags 101: una guida semplice per i designer
Se Google ti dice di fare qualcosa, è meglio che tu lo faccia. E quando si tratta di utilizzare meta tag HTML per SEO, nessuno di noi dovrebbe fare casino.
Detto questo, sai com’è con la ricerca di Google. Gli algoritmi cambiano sempre e ciò che Google ritiene importante un anno cade facilmente il successivo. Ecco perché alcuni dei meta tag che potresti incontrare non sono altro che i resti di ciò che un tempo interessava a Google.
Questa guida ti aiuterà a concentrarti sui meta tag che devi assolutamente usare e su cosa puoi fare con loro.
Cosa sono i meta tag HTML?
La testa di una pagina web contiene molte informazioni sul contenuto trovato lì. Qui troverai i meta tag HTML insieme a tutti i collegamenti CSS o JavaScript che si applicano alla pagina.
Questi sono tutti meta-tag. Il più delle volte, sono scritti in HTML come coppia nome / valore. Per esempio:
<meta property="og:title" content="15 migliori librerie del 2019 | G.B. WebDesign " />
In sostanza, i meta tag non sono altro che dati della tua pagina web. Non vengono mai visualizzati nella pagina. Sono solo in background, in attesa che i bot di ricerca rilevino l’HTML e lo utilizzino per migliorare i risultati di ricerca della pagina. Sono inoltre utili per browser, feed RSS e piattaforme di social media che forniscono agli utenti questi dettagli (e visualizzano il contenuto).
Quali meta tag devi usare?
Si potrebbe sostenere che vale la pena utilizzare tutti i metatag riconosciuti da Google e da altri motori di ricerca. Ma come per tutto ciò che fai nel web design e nello sviluppo, dovresti scegliere saggiamente le tue battaglie.
Quindi, piuttosto che dedicare il tuo tempo a riempire le tue pagine web con ogni meta tag possibile, familiarizza con quali sono disponibili e quali valgono la pena utilizzare.
TITOLO
Esempio HTML
<title>5 modi per rafforzare la sicurezza di WordPress</title>
Che cosa fa?
Questo indica il nome della pagina.
Ne hai davvero bisogno?
Sì, questo non è negoziabile in quanto indica ai motori di ricerca quale sia il nome della pagina.
Questo tag è utile se si desidera personalizzare il titolo in modo specifico anche per i risultati di ricerca. Quindi, supponiamo che tu abbia scritto un titolo cliccate-qui in modo che i visitatori che lo vedono sul sito siano costretti a fare clic. Qualcosa di simile a:
Come guadagnare uno stipendio a sei cifre con nient’altro che il tuo laptop, passaporto e il tuo migliore amico
La stringa del titolo ha una lunghezza di 98 caratteri e non è mai possibile che Google la visualizzi per intero. Invece di riscrivere il titolo del tuo sito, puoi utilizzare il tag del titolo per dare a Google uno che sia più all’altezza dei suoi standard, come:
<title>Guadagna 6 cifre con laptop, passaporto e il tuo amico</title>
Sono 56 caratteri, entro il limite del titolo di Google, e funzionano esattamente come l’originale
DESCRIZIONE
Esempio HTML
<meta name="description" content="Stanco di correre sul tapis roulant a stipendio fisso? Impara a diventare uno scrittore di viaggi e un influencer e guadagna oggi uno stipendio a sei cifre.">
Che cosa fa?
Questo è un breve riassunto di ciò che si trova nella pagina. Nella ricerca, questa è la descrizione della pagina che appare sotto il titolo e l’URL della pagina.
Ne hai davvero bisogno?
Sì, questo è un altro meta tag essenziale.
Se lasci a Google l’elaborazione di una descrizione per la pagina, molto probabilmente non sarà altro che i primi 160 caratteri di ciò che trova lì. E se nella parte superiore della pagina sono presenti annunci pubblicitari, testo alternativo all’immagine o qualsiasi altra cosa che le sue macchine possano leggere, potresti rimanere bloccato con una meta descrizione scadente.
Quindi, prenditi il tempo per scriverne uno.
SET DI CARATTERI
Esempio HTML
<meta charset="UTF-8">
Che cosa fa?
Questo metatag definisce quale set di caratteri deve essere utilizzato dal browser per interpretare il contenuto.
Ne hai davvero bisogno?
UTF-8 non è l’unico set di caratteri né è universalmente accettabile. Quindi, assicurati di aver definito il set di caratteri predefinito per il tuo sito Web utilizzando questo meta tag.
Se non siete sicuri se il vostro sito web ha bisogno di un carattere diverso, fate riferimento a questo elenco. Si può dire con certezza che se il sito web deve essere tradotto per un pubblico internazionale, dovrete sicuramente utilizzare un tag charset diverso da UTF-8.
HREFLANG
Esempio HTML
<link rel="alternate" href="http://mywebsite.com/en-au/" hreflang="en-au" />
Che cosa fa?
Questo tag indica a Google in quale lingua o dialetto regionale è scritto il contenuto della pagina, in modo da poterlo mostrare agli utenti giusti.
Ne hai davvero bisogno?
Esistono alcuni motivi per utilizzare questo meta tag:
- Quando hai creato un sito Web internazionale con diverse versioni tradotte;
- Quando hai scritto il contenuto in un dialetto specifico, come en-us vs. en-gb;
- Quando la tua pagina contiene un mix di lingue o dialetti e vuoi che vengano rilevati tutti.
VIEWPORT
Esempio HTML
<meta name="viewport" content="width=device-width, initial-scale=1">
Che cosa fa?
Fornisce indicazioni su come Google dovrebbe visualizzare la tua pagina su tutti i dispositivi, ma è particolarmente importante in questo mondo mobile-first.
Ne hai davvero bisogno?
Sì. Il meta tag viewport è uno che Google ha fatto di tutto per spiegarlo . Fondamentalmente, se non lo includi o viene utilizzato in modo errato, potresti interrompere l’esperienza di visualizzazione per gli utenti su dispositivi mobili.
Ecco perché Google consiglia di impostare il contenuto su width=device-width, initial-scale=1, ogni volta. Se provi a introdurre variabili come la scala minima, potresti danneggiare l’aspetto del tuo sito Web in quanto si trasforma da qualcosa di semplice come l’orientamento verticale in orizzontale.
COLLEGAMENTO CANONICO
Esempio HTML
<link rel="canonical" href="https://mywebsite.com/blog/7-modi-per-rafforzare-la-sicurezza-di-wordpress" />
Che cosa fa?
Quando hai contenuti duplicati sul tuo sito web o pagine molto simili tra loro, il meta tag canonico indica a Google quale pagina è l’originale e dovrebbe essere indirizzato al traffico.
Ne hai davvero bisogno?
Google non accetta gentilmente di duplicare i contenuti. Ma diciamo che il tuo pezzo “5 modi per rafforzare la sicurezza di WordPress” è una riscrittura di un post chiamato “7 modi per rafforzare la sicurezza di WordPress” del 2015.
Invece di lasciare che Google ti penalizzi per avere contenuti simili al tuo sito web (e, quindi, cercando di classificarti due volte per la stessa cosa), utilizzerai questo metatag per mostrare a Google dove vive l’originale.
Ciò sarebbe utile anche se hai cambiato la struttura dell’URL e vuoi assicurarti che tutto il traffico passi al collegamento più attuale.
ROBOT
Esempio HTML
<meta name="robots" content="noindex,nofollow">
Che cosa fa?
I meta tag robot indicano a tutti i robot di ricerca (“robot”) o specifici robot crawler (“googlebot”, “bingbot”, “duckduckbot”, ecc.) Come trattare una pagina. Di solito ha a che fare con il modo in cui una pagina deve essere indicizzata.
Ne hai davvero bisogno?
Per impostazione predefinita, i motori di ricerca indicizzano e seguono i collegamenti su ogni pagina creata sul tuo sito Web.
Ci sono alcuni motivi per cui potresti indirizzare i motori di ricerca a fare diversamente:
- noindex: usalo quando vuoi nascondere una pagina dalla ricerca. (Non fare affidamento su questo per motivi di sicurezza, ricorda: è solo un suggerimento.)
- nofollow: è utile per i blog che accettano contenuti dai collaboratori ma non ne controllano il contenuto. In questo modo, se i link di affiliazione sono inseriti nella pagina, Google non li seguirà.
- nosnippet o max-snippet: controlla il modo in cui il tuo snippet di testo, immagine o video viene visualizzato nella ricerca.
- noarchive: se ci sono versioni precedenti di una pagina memorizzate nella cache, utilizzate questa opzione impedirà ai motori di ricerca di mostrarle.
- unavailable_after: [data]: questa è una buona idea per una promozione limitata, come nelle vendite del Black Friday. Mentre potresti voler indirizzare il traffico sulla pagina da ottobre a dicembre, ha senso uscire dalla ricerca una volta che le vacanze sono terminate e le offerte non sono più valide.
VERIFICA DEL SITO DI GOOGLE
Esempio HTML
<meta name="google-site-verification" content="https://mywebsite.com" />
Che cosa fa?
Questo è uno dei metodi che puoi utilizzare per verificare la proprietà del tuo sito per Google Search Console .
Ne hai davvero bisogno?
Non hai bisogno di questo meta tag se hai scelto una delle altre opzioni. Ad esempio, puoi verificare la proprietà del sito tramite il codice di monitoraggio di Google Analytics o aggiornando il tuo record DNS. Se preferisci, puoi semplicemente aggiungere il meta tag HTML all’intestazione.
Questo non è affatto un elenco esaustivo di tutti i meta tag esistenti.
Ad esempio, potresti imbatterti in pagine web che contengono meta tag legacy come quelli che dichiarano l’autore, il copyright o la valutazione. Questi non sono più necessari e non dovresti perdere tempo con loro.
Quindi, concentrati sul far sapere ai motori di ricerca esattamente ciò di cui hanno bisogno per indicizzare la tua pagina, evitando che i tuoi documenti HTML vengano superati da tag non necessari.
