Attributo name di HTML <meta>
Definizione e uso
name L'attributo specifica il nome dei metadati.
name L'attributo specifica Attributo content del nome del valore.
attraverso l'uso name e content l'attributo, può utilizzare coppie nome/valore per definire metadati per il documento. Tra cuiname L'attributo indica il tipo di metadati, mentre content L'attributo viene utilizzato per fornire valori.
La tabella seguente elenca diversi tipi di metadati predefiniti.
Attenzione:Se è impostato attributo http-equivse è impostato name Attributi.
Suggerimento:HTML5 ha introdotto un metodo che permette ai designer web di controllare il viewport (l'area visibile dell'utente) tramite il tag <meta> (vedi l'esempio di "Impostazione viewport" di seguito).
Esempio
Utilizzare l'attributo name per definire la descrizione, i termini chiave e l'autore del documento HTML. Inoltre, definire il viewport per controllare la dimensione della pagina e le proporzioni di zoom per diversi dispositivi:
<head> <meta name="description" content="Gratis Web Tutorial"> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="YK Investment"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
Sintassi
<meta name="value">
Valore dell'attributo
| Valore | Descrizione |
|---|---|
| application-name | Definire il nome dell'applicazione Web rappresentata dalla pagina. |
| author |
Definire il nome dell'autore del documento. Ad esempio: <meta name="author" content="YK Investment"> |
| description |
Definire la descrizione della pagina. I motori di ricerca possono utilizzare questa descrizione per visualizzare i risultati di ricerca. Ad esempio: <meta name="description" content="Gratis Web Tutorial"> |
| generator |
Definire uno dei pacchetti utilizzati per generare i documenti (non utilizzato per pagine scritte a mano). Ad esempio: <meta name="generator" content="FrontPage 4.0"> |
| keywords |
Definire l'elenco dei termini chiave relativi alla pagina, separati da virgola. Informare i motori di ricerca sul contenuto della pagina. Suggerimento:Includi sempre le parole chiave (i motori di ricerca devono classificare la pagina). Ad esempio: <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | Controlla il viewport (l'area visibile dell'utente nella pagina web). |
Spiegazione
Oltre ai sei tipi di metadati predefiniti nella tabella, è possibile utilizzare estensioni di metadati. Visita questa pagina per ottenere un elenco di estensioni aggiornato di volta in volta:
http://wiki.whatwg.org/wiki/MetaExtensions
Alcune estensioni sono usate molto spesso, mentre altre hanno un uso molto limitato, quasi mai utilizzate. I metadati robots appartengono al primo gruppo. Gli autori dei documenti HTML possono usarli per comunicare ai motori di ricerca come trattare il documento. Ad esempio:
<meta name="robots" content="noindex">
Questo tipo di metadati ha tre valori riconosciuti da molti browser:
- noindex - indica di non indicizzare la pagina
- noarchive - indica di non archiviare o memorizzare nella cache la pagina
- nofollow - indica di non seguire i link della pagina per la ricerca
Ci sono pochi estensioni di metadati disponibili, è meglio che gli sviluppatori leggano l'elenco online per vedere quali possono essere utilizzati nei propri progetti.
Suggerimento
Per comunicare ai motori di ricerca come classificare e classificare i contenuti, il metodo più importante in passato è stato l'uso dei metadati keywords. Oggi, la considerazione dei metadati keywords dai motori di ricerca non è più così importante, poiché possono essere utilizzati male per creare un'illusione di rilevanza tra il contenuto della pagina e il contenuto. Il modo migliore per i creatori di desiderare che il contenuto venga considerato diversamente dai motori di ricerca è utilizzare i suggerimenti forniti da loro stessi. La maggior parte dei motori di ricerca fornisce guide per ottimizzare le pagine web o l'intero sito.
Google: Guida di avvio SEO (Search Engine Optimization)
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
Baidu: Guida di ottimizzazione per motori di ricerca Baidu
Imposta il viewport
Il viewport è l'area visibile dell'utente nella pagina web. È variabile a seconda dell'attrezzatura – è più piccolo sui telefoni rispetto allo schermo dei computer.
Dovresti includere i seguenti elementi <meta> in tutte le pagine web:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Fornisce istruzioni al browser su come controllare le dimensioni della pagina e le proporzioni di ingrandimento.
width=device-width Impostazioni parziali della larghezza della pagina per seguire la larghezza dello schermo del dispositivo (variabile a seconda del dispositivo).
initial-scale=1.0 Impostazioni parziali del livello di ingrandimento iniziale del browser durante il caricamento della pagina.
Ecco un esempio di pagina web senza tag meta viewport e la stessa pagina con tag meta viewport:
Suggerimento:Se navighi questa pagina con uno smartphone o un tablet, puoi fare clic sui due link sottostanti per vedere le differenze.
Puoi trovare le nostreCorso di progettazione web responsiva - VisualizzazioneImpara di più sulla visualizzazione.
Supporto browser
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Supporto | Supporto | Supporto | Supporto | Supporto |
