Il tag <meta>: charset, viewport, description, og:tags

Il <head> di una pagina, l'abbiamo visto, non mostra nulla a schermo. Ma dentro ci vivono i tag <meta>: righe brevissime che però decidono se il tuo sito si legge bene su un telefono,  come si vedrà nei risultati dei motori di ricerca e se il link che condividi su una piattaforma, per esempio di messaggistica,  mostra un'anteprima o un rettangolo vuoto.

1. charset: le fondamenta, già viste

Lo abbiamo incontrato nella pillola sulla struttura HTML5: <meta charset="utf-8"> dice al browser quale alfabeto usare per leggere i byte del file. Va messo tra i primi tag del <head>, perché il browser deve saperlo prima di interpretare qualunque altro carattere. Qui lo richiamiamo solo perché fa parte della stessa famiglia di tag: tutti <meta>, ciascuno con un compito diverso.

Fonte: MDN Web Docs: elemento «<meta>», attributo charset.

2. viewport: far entrare il sito nello schermo del telefono

Un telefono ha lo schermo stretto, ma il browser mobile, per default, finge di avere una finestra larga (circa 980px), così le pagine non responsive non si rompono, ma appaiono minuscole, e l'utente deve pizzicare per zoomare. Il meta viewport rompe questa finzione:

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

• width=device-width è la larghezza della finestra virtuale, segue quella reale dello schermo
• initial-scale=1.0 nessuno zoom applicato al primo caricamento: 100%

Attenzione a user-scalable=no: impedisce del tutto lo zoom, e MDN avvisa che questo crea problemi di accessibilità per chi ha una vista ridotta. Evitalo.

Fonte: MDN Web Docs: «Using the viewport meta tag to control layout on mobile browsers».

3. description: il tuo annuncio nei risultati di ricerca

<meta name="description" content="Un riassunto chiaro di una o due frasi sul contenuto della pagina.">

È il testo che può comparire sotto il titolo nei risultati di una ricerca. E' necessario usare il  condizionale: per esempio Google Search Central spiega che questa description è trattata come un suggerimento, non un comando, Google la usa quando la ritiene più utile del testo estratto direttamente dalla pagina, altrimenti genera lui stesso lo snippet.

Fonte: MDN Web Docs: «<meta> name attribute» (description); Google Search Central: «How to Write Meta Descriptions».

4. og:tags: come appari quando qualcuno ti condivide

Quando incolli un link su Facebook, LinkedIn o WhatsApp e appare un'anteprima con immagine, titolo e testo, quella è Open Graph: un protocollo, non uno standard HTML, con la sua fonte ufficiale su ogp.me. Definisce quattro proprietà richieste per ogni pagina:

<meta property="og:title" content="Titolo della pagina"> 
<meta property="og:type" content="article"> 
<meta property="og:image" content="https://esempio.it/copertina.jpg"> 
<meta property="og:url" content="https://esempio.it/pagina">

Senza questi tag, il social genera comunque un'anteprima, ma a modo suo, spesso pescando la prima immagine o frase che trova, con risultati imprevedibili. Con og:description e og:site_name (opzionali ma raccomandati) il controllo aumenta ulteriormente.

Fonte: ogp.me: The Open Graph protocol: le quattro proprietà richieste (og:title, og:type, og:image, og:url).

In sintesi

Quattro righe invisibili, quattro pubblici diversi: il browser, il telefono, il motore di ricerca, il social: insieme decidono la prima impressione che il tuo sito lascia, ovunque venga incontrato.