Nello scorso articolo del blog (se te lo sei perso lo puoi leggere qui) abbiamo parlato di markup, di tag semantici e non semantici e abbiamo visto alcuni esempi pratici di strutture HTML per le nostre pagine web.
Tutto ciò si trova all’interno del tag <body>
Oggi, invece, spostiamo l’attenzione all’interno del tag <head> per parlare di meta tags spiegando cosa sono, perché sono importanti e come utilizzarli.
Innanzitutto i meta tags non modificano il contenuto di una pagina ma contengono alcune informazioni che vengono utilizzate dai crawler dei motori di ricerca o dei social network per raccogliere ulteriori informazioni.
Alcuni di essi sono strettamente legati al seo come il meta title, la meta description, il canonical url, etc…
Altri vengono utilizzati da Facebook o Twitter per sapere quali informazioni mostrare nel box di anteprima quando condividiamo una pagina web su uno di questi social network.
Ecco alcuni dei tag dall’importante valore seo.
I più semplici da spiegare e utilizzare sono meta title e meta description:
<title>My website title </title>
<meta name="description" content="Meta description here" />
Hanno un importante valore per il seo e vengono utilizzati da Google per generare lo snippet di anteprima che vediamo nella SERP:
Inoltre il title viene anche riportato nella tab della scheda del browser.
Oltre a questi, esistono anche il canonical url e l’alternate url:
<link rel="canonical" href="https://www.thumbsupagency.com/it" />
<link rel="alternate" href="en" hreflang="https://www.thumbsupagency.com/en">
L’url canonico (o canonical url in inglese) deve riportare l’url della pagina attuale senza querystring o altri parametri per fare in modo che Google e altri motori di ricerca sappiano che queste due pagine, per esempio, non sono un contenuto duplicato, ma sono la stessa pagina con solamente parte dei contenuti che cambiano (l'elenco dei post in questo caso=:
https://www.thumbsupagency.com/it/blog
https://www.thumbsupagency.com/it/blog?p=2
L’url alternativo (o alternate url, in inglese) indica, invece, la stessa versione della pagina attuale ma in una lingua diversa.
Se avete un sito multilingua è molto importante utilizzare questo tag, indicando tutte le versioni alternative della vostra pagina per evitare che vengano viste come pagine duplicate.
Un altro meta tag che merita di essere citato è il meta viewport.
Il viewport è l’area disponibile all’interno della finestra del browser dove vengono mostrate le pagine web.
Non corrisponde alla grandezza totale dello schermo perché solitamente, se non si utilizza il full screen, è un'area inferiore e varia in base al dispositivo utilizzato.
Il meta tag viewport ci permette di informare il browser su come gestire le dimensioni e lo scaling del nostro sito web all’interno del viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
width=device-width dice al browser che il nostro sito web deve seguire la grandezza del device utilizzato.
initial-scale=1 imposta il livello di zoom iniziale quando la pagina viene caricata
maximum-scale=5 indica il massimo livello di zoom che un utente può usare
Per concludere, è utile citare anche gli og tags.
Come abbiamo anticipato nell’introduzione di questo articolo, vengono utilizzati dai social network per creare e mostrare uno snippet di anteprima quando condividiamo una pagina.
Quelli utilizzati da Facebook e Whatsapp, ad esempio, sono og:title, og:description, og:url, og:image, og:image:width, og:image:height.
Twitter, invece, utilizza twitter:card, twitter:site, twitter:description, twitter:image, twitter:image:alt.
Author :Francesco Guidi
Sono uno sviluppatore web da molteplici anni.
Ho lavorato sia in Italia che all'estero in agenzie web e aziende di prodotto e ciò mi ha permesso di sviluppare una forte conoscenza sia nello sviluppo di siti web ed e-commerce con particolare focus sul SEO che di Single Page Application.