0Pricing
HTML Academy · Lezione

title e il suo ruolo nella SEO

Scrivere titoli di pagina efficaci, ben posizionati nei motori di ricerca

title e il suo ruolo nella SEO è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

L'elemento title

L'elemento <title> imposta il titolo del documento, uno degli elementi HTML più importanti:

  • Viene visualizzato nella scheda del browser
  • Viene mostrato nei risultati dei motori di ricerca (SERP)
  • Viene utilizzato come nome predefinito dei segnalibri
  • Viene letto ad alta voce dai lettori di schermo quando viene caricata una pagina

Dove inserire title

L'elemento title appartiene a <head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Learn HTML5 — CoddyKit</title>
  </head>
  <body>...</body>
</html>

Buone pratiche SEO per title

Come scrivere titoli efficaci per la SEO:

  • Lo mantenga al di sotto dei 60 caratteri (Google tronca i titoli più lunghi)
  • Includa la parola chiave principale vicino all'inizio
  • Includa il nome del sito (di solito alla fine)
  • Lo renda unico per ogni pagina del sito
  • Lo renda descrittivo e convincente: è la prima cosa che leggono gli utenti nei risultati di ricerca

Schema del titolo: Pagina — Sito

Strutture comuni dei titoli:

<!-- Page name first, site name last -->
<title>HTML Forms — CoddyKit</title>
<title>Contact Us — My Company</title>
<title>Search Results for "html" — CoddyKit</title>

<!-- For the homepage: site name first -->
<title>CoddyKit — Learn to Code</title>

<!-- Avoid: -->
<title>Untitled Document</title>  <!-- terrible -->
<title>Page 1</title>             <!-- not descriptive -->

Titoli dinamici nelle SPA

Le applicazioni a pagina singola devono aggiornare il titolo durante la navigazione:

// React / Next.js:
// <title> is set in document.head or via framework

// Vanilla JavaScript:
function navigateTo(page) {
  const titles = {
    home: 'Home — MyApp',
    about: 'About Us — MyApp',
    blog: 'Blog — MyApp',
  };
  document.title = titles[page] || 'MyApp';
  history.pushState({}, '', '/' + page);
}

title e Open Graph

L'elemento title è integrato da Open Graph per la condivisione sui social:

<head>
  <title>HTML5 Semantic Elements Guide — CoddyKit</title>

  <!-- Override title for social sharing: -->
  <meta property="og:title" content="Master HTML5 Semantic Elements">
</head>
<!-- If og:title is absent, social networks may fall back to <title> -->

Verificare la lunghezza di title

Come controllare la lunghezza di title in DevTools:

  • Apra Chrome DevTools → il pannello Elements
  • Individui <head> → <title>
  • Conteggi i caratteri, inclusi gli spazi
  • In alternativa: audit Lighthouse → SEO → Document has a title

Nome Schema.org e title

Titolo della pagina e nome Schema.org:

<!-- HTML title: shown in tabs and search results -->
<title>Widget Pro Review — Best Widgets 2025</title>

<!-- Schema.org: machine-readable name for structured data -->
<script type="application/ld+json">
{
  "@type": "Product",
  "name": "Widget Pro"
}
</script>

Accessibilità di title

Il titolo è la prima cosa che sentono gli utenti di lettori di schermo quando aprono una nuova pagina:

  • Inserisca sempre un titolo significativo
  • Per pagine modal/dialog o SPA: aggiorni il titolo per descrivere lo stato corrente
  • I lettori di schermo leggono il titolo al caricamento della pagina e a ogni cambio di route
  • Crei titoli comprensibili anche senza il contesto della pagina

Titoli internazionalizzati

Per i siti multilingue, imposti i titoli nella lingua della pagina:

<!-- French page: -->
<html lang="fr">
  <head>
    <title>Apprendre HTML5 — CoddyKit</title>
  </head>

<!-- Hreflang tells Google about language variants: -->
<link rel="alternate" hreflang="en" href="https://example.com/en">
<link rel="alternate" hreflang="fr" href="https://example.com/fr">

title negli iframe

Quando una pagina viene caricata in un iframe, il titolo dell'iframe è importante:

<!-- The iframe should have a descriptive title attribute: -->
<iframe src="/map" title="Interactive store locator map"></iframe>
<!-- The page inside the iframe also has its own <title> element -->
<!-- Screen readers read the iframe's title attribute, not the inner title -->

Misurare l'impatto SEO di title

Strumenti per verificare l'ottimizzazione di title:

  • Lighthouse → audit SEO
  • Google Search Console → Performance (per vedere i titoli effettivi nei risultati di ricerca)
  • SEMrush / Ahrefs → verificare l'anteprima dello snippet SERP
  • Estensioni di Chrome: MozBar, SEO Meta in 1 Click

Verifica rapida

Qual è il numero massimo di caratteri consigliato per il titolo di una pagina HTML?

Riepilogo: title e SEO

Elementi essenziali di title:

  • In <head>; unico per ogni pagina; obbligatorio
  • Meno di 60 caratteri; parola chiave vicino all'inizio; nome del sito alla fine
  • Da aggiornare nelle SPA a ogni navigazione
  • Completa og:title per la condivisione sui social
  • I lettori di schermo annunciano il titolo al caricamento della pagina

Domande Frequenti

La lezione «title e il suo ruolo nella SEO» è gratuita?

Sì — il testo completo di «title e il suo ruolo nella SEO» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «title e il suo ruolo nella SEO»?

Scrivere titoli di pagina efficaci, ben posizionati nei motori di ricerca Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «title e il suo ruolo nella SEO»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. title e il suo ruolo nella SEO
  2. meta charset viewport author e description
  3. URL canonici e meta robots
  4. Favicon e Apple Touch Icon
← Torna a HTML Academy