meta charset viewport author e description
Aggiungere i meta tag essenziali per il rendering e la reperibilità
meta charset viewport author e description è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 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 meta
L'elemento <meta> fornisce metadati sulla pagina. È un elemento vuoto, senza tag di chiusura:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Learn HTML5 from scratch.">
<meta name="author" content="Jane Smith">
</head>meta charset
Dichiara la codifica dei caratteri:
<meta charset="UTF-8">
<!-- Must be:
- Inside <head>
- Within the first 1024 bytes of the file
- Best: the first tag inside <head>
- Always use UTF-8 for web pages
-->meta viewport
Il meta tag viewport controlla il rendering sui dispositivi mobili:
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Without this, mobile browsers render at desktop width (900-980px)
then scale down — everything looks tiny -->
<!-- width=device-width: viewport width = device width -->
<!-- initial-scale=1: start at 1:1 zoom -->
<!-- This is REQUIRED for responsive design to work -->Valori del contenuto di viewport
Altri valori di viewport che potrebbe incontrare:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<!-- maximum-scale: max zoom level users can reach -->
<!-- minimum-scale: min zoom level -->
<!-- AVOID: user-scalable=no
It prevents users from zooming, which is a WCAG 1.4.4 violation -->
<!-- <meta name="viewport" content="user-scalable=no"> BAD -->meta description
Il meta tag description fornisce un riepilogo utilizzato nei risultati di ricerca:
<meta name="description" content="
Learn HTML5 semantic elements, forms, accessibility,
and modern web APIs. Practical lessons for real-world developers.
">
<!-- Recommended: 150-160 characters -->
<!-- Google may show this in the SERP snippet -->
<!-- Not a direct ranking factor, but affects click-through rate -->
<!-- Make every page's description unique and compelling -->meta author
Il meta tag author identifica l'autore della pagina:
<meta name="author" content="Jane Smith">
<!-- Rarely used by search engines today -->
<!-- Schema.org Person is more semantic for author attribution -->
<!-- Still good practice for internal content management -->meta keywords (deprecato)
Il meta tag keywords era un tempo importante, ma ora viene ignorato:
<!-- Old and ignored by Google since 2009: -->
<meta name="keywords" content="html5, web development, tutorial">
<!-- Don't waste time on this -->
<!-- Focus on quality content and real on-page keywords instead -->meta http-equiv
L'attributo http-equiv simula le intestazioni della risposta HTTP:
<!-- Redirect after 5 seconds: -->
<meta http-equiv="refresh" content="5; url=/new-page">
<!-- Set Content Security Policy: -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Cache control (mostly superseded by real HTTP headers): -->
<meta http-equiv="cache-control" content="no-cache">meta robots
Il meta tag robots controlla il crawling dei motori di ricerca:
<meta name="robots" content="index, follow">
<!-- index: allow indexing (default) -->
<!-- follow: follow links (default) -->
<!-- noindex: don't add to search index -->
<!-- nofollow: don't follow links -->
<!-- noarchive: don't show cached version -->
<!-- Page you don't want indexed: -->
<meta name="robots" content="noindex">Anteprima Open Graph dei metadati
Una sezione head configurata correttamente:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Forms Guide — CoddyKit</title>
<meta name="description" content="Master HTML5 forms: inputs, validation, and accessibility.">
<meta name="author" content="CoddyKit Team">
<link rel="canonical" href="https://coddykit.com/html/forms">
</head>meta generator
Il meta tag generator identifica lo strumento che ha creato la pagina:
<!-- WordPress adds: -->
<meta name="generator" content="WordPress 6.4">
<!-- Jekyll adds: -->
<meta name="generator" content="Jekyll v4.3.2">
<!-- You can add your own: -->
<meta name="generator" content="MySSG v1.0">
<!-- Security note: this reveals your CMS version to attackers
Some recommend removing it -->Verifica rapida
Quale meta tag è essenziale per il responsive design sui dispositivi mobili?
Riepilogo: meta tag
Meta tag essenziali:
<meta charset="UTF-8">— sempre per primo in head<meta name="viewport" ...>— richiesto per il responsive design<meta name="description">— snippet SERP di 150-160 caratteri<meta name="author">— attribuzione dell'autore del contenuto- keywords è obsoleto; robots controlla i crawler
Domande Frequenti
La lezione «meta charset viewport author e description» è gratuita?
Sì — il testo completo di «meta charset viewport author e description» è 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 «meta charset viewport author e description»?
Aggiungere i meta tag essenziali per il rendering e la reperibilità 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 2 di 4.
Quanto tempo richiede la lezione «meta charset viewport author e description»?
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
- title e il suo ruolo nella SEO
- meta charset viewport author e description
- URL canonici e meta robots
- Favicon e Apple Touch Icon