Meta

Torna alla home Torna al cap. 8

Spiegazione dettagliata dei meta nel tuo snippet

• metacharset="utf-8"> -
  
  Cosa fa: specifica la codifica dei caratteri della pagina
  (UTF‑8 consigliato perché supporta tutti i caratteri internazionali).
  - Dove metterlo: il più in alto possibile dentro `head` (idealmente nelle prime 512–1024 byte)
  così il browser interpreta correttamente il markup/il testo. -
  Perché è importante: evita problemi con caratteri accentati, emoji, simboli speciali.
• meta name="viewport" content="width=device-width, initial-scale=1">
  - Cosa fa: istruisce il
  browser mobile su come calcolare larghezza e scala della viewport; essenziale per siti responsive. -
  Parametri comuni: - width=device-width — usa la larghezza del dispositivo. - initial-scale=1 —
  scala iniziale (1 = 100%). - maximum-scale, minimum-scale, user-scalable — controllano zoom utente (attento ad accessibilità).
  - viewport-fit=cover — per gestire aree “notch” su iOS (usato con CSS env()). - Consiglio: usare sempre;
  non includere restrictions di zoom se non necessario per accessibilità.
• meta name="description" content="...">
  - Cosa fa: breve descrizione della pagina usata
  dai motori di ricerca e da alcune anteprime social. - Lunghezza consigliata: 120–160
  caratteri (Google può ritagliare descrizioni più lunghe). - Best practice: unica per
  ogni pagina, descrittiva e persuasiva (call-to-action leggera), evitare duplicati.
• meta name="author" content="Nome Autore">
  - Cosa fa: dichiara autore del contenuto; utile
  per documentazione interna e alcuni strumenti, ma non ha grande impatto SEO.
• meta> name="robots" content="index, follow">
  - Cosa fa: istruisce i crawler (motori di ricerca) su
  indicizzazione e follow dei link. - Valori utili: - index / noindex - follow / nofollow - noarchive
  (non mostrare copia cache) - noodp / noydir (ignorare descrizioni da directory esterne) -
  Nota: direttive nel file robots.txt e gli header HTTP possono anche influenzare l’indicizzazione.
• meta name="theme-color" content="#0a84ff">
  - Cosa fa: colore della UI del browser su mobile
  (Chrome Android) — barra superiore, task switcher. - Valido per personalizzare l’esperienza su dispositivi moderni.
• meta name="referrer" content="no-referrer-when-downgrade">
  - Cosa fa: controlla quale valore `Referer` viene inviato nelle
  richieste originate dalla pagina. - Valori comuni: - no-referrer — mai inviare Referer. - no-referrer-when-downgrade —
  (vecchio default) invia referer su https→https ma non su https→http. - origin — invia solo origine (https://example.com).
  - strict-origin-when-cross-origin — comportamento più sicuro raccomandato nei browser moderni. -
  Consiglio: usare `strict-origin-when-cross-origin` o `no-referrer-when-downgrade` a seconda della privacy voluta.
• Open Graph (social sharing)
  • meta property="og:title" content="...">
  • meta property="og:description" content="...">
  • meta property="og:image" content="https://example.com/preview.png">
  • meta property="og:url" content="https://example.com/pagina">
    Cosa fanno: definiscono come la pagina appare quando condivisa su Facebook, LinkedIn, WhatsApp, ecc.
  • Consigli per og:image:
    
    URL assoluto, immagine accessibile pubblicamente. dimensione raccomandata: 1200×630 px (min 600×315), aspect ratio ~1.91:1.
    formato: JPG/PNG/WebP; tenere il peso moderato (200–300 KB se possibile).
    Altri property utili: og:type (es. website, article), og:site_name, og:locale.
    meta che spesso servono ma non li avevi inclusi (consigliati)
    Rel canonical (link)
• link rel="canonical" href="https://example.com/pagina">
  
  Serve a indicare la URL canonica per evitare contenuti duplicati (SEO).
• Twitter Card
  
  meta name="twitter:card" content="summary_large_image">
  meta name="twitter:title" content="...">
  meta name="twitter:description" content="...">
  meta name="twitter:image" content="...">
  Usare insieme a Open Graph per miglior preview su Twitter.
  
• Content-Security-Policy (meglio come header HTTP)
  
  meta http-equiv="Content-Security-Policy" content="default-src 'self'; ...">
  Nota: è preferibile impostare CSP come header HTTP (più sicuro e applicabile anche
  alle risorse caricate prima del meta).
• meta per caching / refresh (meno usati)
  
  http-equiv="X-UA-Compatible" content="IE=edge"> (vecchio).
  http-equiv="refresh" content="5;url=https://example.com/"> (redirect automatico; usare con cautela). Lingua/locale
• meta http-equiv="content-language" content="it">
  — meglio usare header HTTP o `lang` nell’elemento ``.

  Cose che NON puoi (o non dovresti) fare con meta

• puoi impostare X-Frame-Options in modo affidabile via meta> — X-Frame-Options è un header HTTP
  e va inviato dal server.
• Alcune direttive di sicurezza sono efficaci solo se inviate come header HTTP (CSP in header è più sicuro di (meta)).

Buone pratiche e checklist rapida

• meta charset="utf-8"> per prima dentro head
.
• Usa sempre meta name="viewport"> per siti responsive.
• Mantieni description unica per pagina, 120–160 caratteri.
• Usa URL assoluti per immagini e URL in Open Graph.
• Aggiungi rel="canonical" per pagine con varianti (pagine con parametri, paginazione).
• Testa le preview social con:
Facebook Sharing Debugger
Twitter Card Validator
• Controlla con gli strumenti di sviluppo (Network → Response headers) per verificare
  che gli header HTTP (CSP, X-Frame-Options) siano impostati correttamente sul server.