Il <head> di una pagina HTML è invisibile agli utenti ma viene letto da tutto il resto: motori di ricerca, scraper di social media, browser e bot. Sbagliarlo ti costa posizionamenti e anteprime social brutte. Farlo bene sono circa 30 righe di markup che scrivi una volta e raramente tocchi di nuovo. Ecco cosa dovrebbero contenere quelle 30 righe.

Le Basi Irrinunciabili

Due tag che devono essere presenti in ogni singola pagina, senza eccezioni:

html
<!-- Character encoding: always first, always UTF-8 -->
<meta charset="UTF-8">

<!-- Viewport: required for responsive design to work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

La dichiarazione charset deve comparire entro i primi 1024 byte del documento affinché il browser possa determinare la codifica prima di analizzare il resto. UTF-8 gestisce ogni lingua ed emoji al mondo — non c'è motivo di usare altro. Il meta tag viewport dice ai browser mobile di non ridurre lo zoom per mostrare un layout da desktop. Senza di esso, l'indicizzazione mobile-first di Google penalizzerà la tua pagina.

Titolo e Meta Description

Questi due influenzano direttamente i tassi di clic dai risultati di ricerca:

html
<!-- Title: shown in browser tab and search result headlines -->
<title>HTML Forms Guide — Input Types, Validation & Accessibility | DevTools</title>

<!-- Meta description: shown as snippet text in search results -->
<meta
  name="description"
  content="A complete guide to HTML form input types, constraint validation, label association, and building accessible forms. Real examples with no library dependencies."
>
  • Lunghezza del titolo. Mantienilo sotto i 60 caratteri per evitare che venga troncato nelle SERP. Metti le parole chiave più importanti all'inizio — i motori di ricerca pesano maggiormente l'inizio.
  • Formato del titolo. Un pattern comune: Argomento Principale — Info Secondaria | Brand. Il brand alla fine mantiene il contenuto utile in primo piano.
  • Lunghezza della meta description. Google tronca intorno ai 155–160 caratteri. Scrivila pensando a un essere umano che la legge, non riempita di parole chiave — non influisce direttamente sul ranking, ma influisce su quante persone fanno clic.
  • Unicità. Ogni pagina ha bisogno di un titolo e una descrizione unici. Titoli duplicati nel tuo sito confondono i motori di ricerca su quale pagina classificare per una determinata query.

Open Graph — Anteprime Condivisione Social

Quando qualcuno condivide il tuo URL su LinkedIn, Slack, Facebook o Discord, queste piattaforme analizzano i tuoi tag Open Graph per costruire la scheda di anteprima. Senza di essi, l'anteprima è vuota o brutta. Con essi, appare professionale:

html
<!-- Open Graph: controls how pages appear when shared on social media -->
<meta property="og:type"        content="article">
<meta property="og:title"       content="HTML Forms Guide — Input Types, Validation & Accessibility">
<meta property="og:description" content="Build forms that work for everyone using HTML's built-in input types, constraint validation, and accessibility features.">
<meta property="og:url"         content="https://devtools.example.com/blog/html/html-forms-guide">
<meta property="og:image"       content="https://devtools.example.com/og/html-forms-guide.png">
<meta property="og:image:width"  content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name"   content="DevTools Blog">
  • og:type. Usa article per i post del blog. Usa website per homepage e pagine di categoria. Il tipo influisce su come alcune piattaforme visualizzano la scheda.
  • og:image. Il tag OG più importante per l'impatto visivo. Punta a 1200×630px (la dimensione canonica dell'immagine Open Graph). PNG o JPEG vanno bene entrambi. Facebook e LinkedIn richiedono che sia almeno 200×200px.
  • og:url. Impostalo all'URL canonico della pagina — non all'URL con cui l'utente è arrivato, che potrebbe includere parametri UTM.
  • og:title vs <title>. Possono differire. Il tuo <title> HTML è ottimizzato per la ricerca; il tuo og:title può essere un po' più umano e incisivo dato che è per il contesto social.
Testa i tuoi tag OG usando il Facebook Sharing Debugger o il Post Inspector di LinkedIn prima di pubblicare. Memorizzano aggressivamente nella cache i dati OG e il debugger ti permette di forzare un aggiornamento.

Tag Twitter Card

Twitter/X ha un proprio set di tag che funzionano in modo simile a Open Graph. Se i tag OG sono presenti, Twitter li usa come fallback per alcuni campi — ma dovresti comunque impostare quelli specifici di Twitter per i migliori risultati:

html
<meta name="twitter:card"        content="summary_large_image">
<meta name="twitter:site"        content="@devtoolsblog">
<meta name="twitter:creator"     content="@alicechen_dev">
<meta name="twitter:title"       content="HTML Forms Guide — Real Examples, No Libraries">
<meta name="twitter:description" content="Everything you need for HTML forms: input types, validation, accessibility. Working code throughout.">
<meta name="twitter:image"       content="https://devtools.example.com/og/html-forms-guide.png">
<meta name="twitter:image:alt"   content="Screenshot showing a styled HTML form with accessible error messages">

summary_large_image ti dà la scheda grande in stile banner. summary ti dà una piccola miniatura quadrata. Il tag twitter:image:alt viene spesso dimenticato ma è importante — è il testo alternativo per l'immagine della scheda, importante per gli utenti di Twitter che usano lettori di schermo.

URL Canonico

Se lo stesso contenuto è accessibile a più URL (con/senza barra finale, con parametri UTM, HTTP vs HTTPS, www vs non-www), hai bisogno di un tag canonical per dire ai motori di ricerca quale versione è quella "reale":

html
<!-- Canonical: tells search engines which URL is the authoritative version -->
<link rel="canonical" href="https://devtools.example.com/blog/html/html-forms-guide">

L'URL canonico dovrebbe essere sempre l'URL assoluto completo, incluso il protocollo. Senza un tag canonical, Google deve indovinare — e potrebbe scegliere una versione della tua pagina diversa da quella che intendevi, suddividendo i segnali di ranking tra più URL.

Meta Tag Robots

Il meta tag robots dice ai crawler dei motori di ricerca cosa possono fare con una pagina. La maggior parte delle pagine non ne ha bisogno — il comportamento predefinito è indicizzare e seguire i link. Ma lo vorrai per casi specifici:

html
<!-- Default (you don't need to write this, but it's the implicit behaviour) -->
<meta name="robots" content="index, follow">

<!-- Don't index this page (e.g. admin pages, thank-you pages) -->
<meta name="robots" content="noindex, follow">

<!-- Don't follow links on this page (rare) -->
<meta name="robots" content="index, nofollow">

<!-- Don't index, don't follow, don't cache, don't show snippet -->
<meta name="robots" content="noindex, nofollow, noarchive, nosnippet">

Buoni candidati per noindex: pagine dei risultati di ricerca, pagine di categoria filtrate con contenuto limitato, pagine degli account utente, pagine di conferma ordine, ambienti di staging. Se stai bloccando con robots.txt, nota che noindex nel meta tag è più affidabile — Google lo rispetta anche quando analizza la pagina direttamente.

hreflang per Siti Multilingua

Se il tuo sito ha contenuti in più lingue, hreflang dice ai motori di ricerca quale versione di una pagina mostrare agli utenti in diverse aree geografiche. Senza di esso, Google sceglie una versione e le tue pagine non in inglese potrebbero non classificarsi mai nei loro mercati target:

html
<!-- hreflang: tells Google which language version to show per region -->
<link rel="alternate" hreflang="en"    href="https://example.com/blog/html-forms">
<link rel="alternate" hreflang="es"    href="https://example.com/es/blog/html-forms">
<link rel="alternate" hreflang="fr"    href="https://example.com/fr/blog/html-forms">
<link rel="alternate" hreflang="de"    href="https://example.com/de/blog/html-forms">
<link rel="alternate" hreflang="x-default" href="https://example.com/blog/html-forms">

x-default è il fallback per gli utenti la cui lingua non corrisponde a nessuna specifica impostazione locale. Ogni pagina nel set hreflang deve includere l'elenco completo, compresa una voce autoreferenziale. È verboso, ma omettere qualsiasi voce fa sì che Google ignori l'intera annotazione.

Dati Strutturati con JSON-LD

I dati strutturati in formato JSON-LD consentono a Google di visualizzare risultati avanzati — valutazioni a stelle, metadati degli articoli, FAQ, passaggi how-to — direttamente nei risultati di ricerca. Per un articolo del blog, questo è lo schema minimo utile:

html
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML Forms Guide — Input Types, Validation & Accessibility",
  "description": "A complete guide to HTML form input types and built-in validation.",
  "author": {
    "@type": "Person",
    "name": "Alice Chen",
    "url": "https://devtools.example.com/authors/alice-chen"
  },
  "publisher": {
    "@type": "Organization",
    "name": "DevTools Blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://devtools.example.com/logo.png"
    }
  },
  "datePublished": "2026-04-16",
  "dateModified": "2026-04-16",
  "image": "https://devtools.example.com/og/html-forms-guide.png",
  "url": "https://devtools.example.com/blog/html/html-forms-guide"
}
</script>

JSON-LD va in un blocco <script type="application/ld+json"> ovunque nell'<head> o nel <body> — nell'head è la convenzione. Non influisce sulla velocità di rendering della pagina ed è completamente separato dal markup della pagina, rendendolo facile da generare lato server.

Cosa NON Usare — Il Meta Tag Obsoleto

Un meta tag che vedi nei vecchi tutorial e nei codebase legacy che non fa assolutamente nulla:

html
<!-- This does nothing for modern SEO. Google stopped using it in 2009. -->
<meta name="keywords" content="html, forms, validation, accessibility">

Google ha annunciato ufficialmente nel 2009 che ignora il meta tag keywords a causa del diffuso abuso di spam. Bing e altri motori di ricerca principali hanno seguito l'esempio. Puoi rimuoverlo senza alcun impatto sulla SEO. L'unico posto in cui ha ancora qualche utilità è nei sistemi di ricerca interna del sito — e solo se il tuo software di ricerca è configurato specificamente per leggerlo.

Un Template head Completo

Ecco un <head> pronto per la produzione che puoi usare come template di partenza per qualsiasi articolo o pagina:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Encoding and viewport: always first -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Core SEO -->
  <title>HTML Forms Guide — Input Types, Validation & Accessibility | DevTools</title>
  <meta name="description" content="A complete guide to HTML form input types, built-in constraint validation, and accessible form patterns. Real examples, no libraries.">
  <link rel="canonical" href="https://devtools.example.com/blog/html/html-forms-guide">
  <meta name="robots" content="index, follow">

  <!-- Open Graph (Facebook, LinkedIn, Discord, Slack) -->
  <meta property="og:type"         content="article">
  <meta property="og:title"        content="HTML Forms Guide — Input Types, Validation & Accessibility">
  <meta property="og:description"  content="Build forms that work for everyone using HTML's built-in features.">
  <meta property="og:url"          content="https://devtools.example.com/blog/html/html-forms-guide">
  <meta property="og:image"        content="https://devtools.example.com/og/html-forms-guide.png">
  <meta property="og:image:width"  content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:site_name"    content="DevTools Blog">

  <!-- Twitter / X Card -->
  <meta name="twitter:card"        content="summary_large_image">
  <meta name="twitter:site"        content="@devtoolsblog">
  <meta name="twitter:title"       content="HTML Forms Guide — Input Types, Validation & Accessibility">
  <meta name="twitter:description" content="Real form examples with no library dependencies.">
  <meta name="twitter:image"       content="https://devtools.example.com/og/html-forms-guide.png">
  <meta name="twitter:image:alt"   content="An accessible HTML form with inline error validation">

  <!-- hreflang (only needed for multilingual sites) -->
  <link rel="alternate" hreflang="en" href="https://devtools.example.com/blog/html/html-forms-guide">
  <link rel="alternate" hreflang="x-default" href="https://devtools.example.com/blog/html/html-forms-guide">

  <!-- Structured data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "HTML Forms Guide",
    "author": { "@type": "Person", "name": "Alice Chen" },
    "datePublished": "2026-04-16",
    "image": "https://devtools.example.com/og/html-forms-guide.png"
  }
  </script>

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
  <link rel="icon" type="image/png"     href="/favicon.png">
</head>
Verifica la tua implementazione con il Rich Results Test di Google per i dati strutturati, e metatags.io per un'anteprima visiva rapida di come appariranno i tuoi tag OG e Twitter card quando condivisi.

Strumenti per il Lavoro HTML

Se stai lavorando con markup HTML, HTML Formatter mantiene il tuo <head> leggibile e correttamente indentato, e HTML Validator individua errori strutturali prima che raggiungano la produzione. Per modificare e visualizzare in anteprima l'HTML in tempo reale, HTML Editor ti permette di vedere le modifiche istantaneamente.

Conclusione

I meta tag che fanno la differenza sono: charset e viewport come base, un <title> ben scritto e una meta description per i clic dalla ricerca, tag Open Graph e Twitter Card per le anteprime social, un link canonical per prevenire problemi di contenuto duplicato e dati strutturati JSON-LD per i risultati avanzati. Salta il meta tag keywords — è morto da 15 anni. Fai bene il resto e le tue pagine appariranno perfette in ogni contesto.

← All HTML articles Browse all categories →