Nella sezione relativa alla struttura del documento, hai esaminato i componenti che trovi (quasi) sempre nel <head> di un documento HTML. Sebbene tutti gli elementi in <head>, inclusi <title>, <link>, <script>, <style> e i valori <base> meno utilizzati, siano in realtà "meta dati", esiste un tag <meta> per i metadati che non possono essere rappresentati da questi altri elementi.
La specifica include diversi meta tipi, ma esistono molti altri meta tipi supportati dalle applicazioni che non sono presenti in nessuna specifica ufficiale. In questa sezione, illustreremo gli attributi e i valori inclusi nelle specifiche, alcuni meta nomi e valori dei contenuti comuni e alcuni meta tipi incredibilmente utili per l'ottimizzazione per i motori di ricerca, i post sui social media e l'esperienza utente che non sono definiti ufficialmente da WhatWG o W3C.
I tag <meta> richiesti, rivisitati
Rivediamo i due tag <meta> necessari già trattati (la dichiarazione del set di caratteri e il meta tag dell'area visibile) e vediamo meglio il tag <meta>.
L'attributo charset dell'elemento <meta> ha avuto origine in un modo unico. Originariamente i metadati del set di caratteri erano scritti come <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" />, ma molti sviluppatori hanno sbagliato a digitare l'attributo content come content="text/html" charset="<characterset>" che i browser hanno iniziato a supportare il set di caratteri come attributo. Ora è standardizzato nello standard HTML vivente come <meta charset="<charset>" />, dove, per HTML,<charset> è la stringa senza distinzione tra maiuscole e minuscole "utf-8" .
Potresti aver notato la meta dichiarazione del set di caratteri originale utilizzata per includere l'attributo http-equiv. È l'abbreviazione di "http-equivalent", in quanto il meta tag sta fondamentalmente replicando ciò che potrebbe essere impostato in un'intestazione HTTP. A parte l'eccezione charset, tutti gli altri meta tag definiti nella specifica HTML WHATWG contengono l'attributo http-equiv o name.
Meta tag definiti ufficialmente
Esistono due tipi principali di meta tag: le direttive pragma, con l'attributo http-equiv, come il meta tag charset che avevate prima, e i meta tipi denominati, come il meta tag dell'area visibile con l'attributo name di cui abbiamo parlato nella sezione Struttura del documento. Entrambi i meta tipi name e http-equiv devono includere l'attributo content, che definisce i contenuti relativi al tipo di metadati elencato.
Istruzioni pragma
L'attributo http-equiv ha come valore un'istruzione pragma. Queste istruzioni descrivono la modalità di analisi della pagina. I valori http-equiv supportati abilitano le istruzioni di impostazione quando non puoi impostare direttamente le intestazioni HTTP.
La specifica definisce sette istruzioni pragma, la maggior parte delle quali prevede altri metodi di impostazione. Ad esempio, anche se è possibile includere un'istruzione relativa al linguaggio con <meta http-equiv="content-language" content="en-us" />, abbiamo già discusso dell'utilizzo dell'attributo lang nell'elemento HTML, che dovrebbe essere utilizzato al suo posto.
L'istruzione pragma più comune è l'istruzione refresh.
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
È sconsigliato impostare un'istruzione in modo che venga eseguito l'aggiornamento a un intervallo del numero di secondi impostato nell'attributo content e persino il reindirizzamento a un URL diverso. Aggiornare e reindirizzare i contenuti senza una richiesta esplicita da parte dell'utente comporta una scarsa usabilità e un impatto negativo sull'accessibilità. Non ti piace quando sei nel bel mezzo di un paragrafo e la pagina viene reimpostata? Immagina di avere problemi cognitivi o di visione e simili. Se intendi impostare un aggiornamento con un reindirizzamento, assicurati che l'utente abbia tempo a sufficienza per leggere la pagina, un link per accelerare il processo e, se necessario, un pulsante per "fermare l'orologio" e impedire il reindirizzamento.
Non la includeremo nel nostro sito perché non c'è motivo di interrompere una sessione utente se non infastidire i visitatori.
L'istruzione pragma più utile è content-security-policy, che consente di definire un criterio relativo ai contenuti per il documento corrente. I criteri relativi ai contenuti specificano principalmente le origini server e gli endpoint degli script consentiti, il che contribuisce a proteggerti dagli attacchi di cross-site scripting.
<meta http-equiv="content-security-policy" content="default-src https:" />
Se non hai accesso alla modifica delle intestazioni HTTP (o se è così), ecco un elenco di valori dei contenuti separati da spazi per le istruzioni content-security-policy.
Meta tag con nome
Il più delle volte include metadati denominati. Includi l'attributo name, in cui il valore dell'attributo è il nome dei metadati. Come per le istruzioni pragma, l'attributo content è obbligatorio.
L'attributo name è il nome dei metadati. Oltre a viewport, probabilmente vorrai includere description e theme-color, ma non keywords.
Parole chiave
I venditori di snake-oil per l'ottimizzazione per i motori di ricerca hanno abusato del meta tag delle parole chiave riempiendole di elenchi separati da virgole di parole spam anziché elenchi di termini chiave pertinenti, in modo che i motori di ricerca non considerino più utili questi metadati. Non c'è bisogno di sprecare tempo, impegno o byte per aggiungerlo.
Descrizione
Tuttavia, il valore description è utile per la SEO: il valore dei contenuti della descrizione è spesso ciò che i motori di ricerca visualizzano sotto il titolo della pagina nei risultati di ricerca. Diversi browser, ad esempio Firefox e Opera, utilizzano questa descrizione come descrizione predefinita delle pagine aggiunte ai segnalibri. La descrizione deve essere un breve e preciso riepilogo dei contenuti della pagina.
<meta name="description"
content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
Se la seconda metà della descrizione non ha senso per te, probabilmente non hai ancora visto il film Zoolander.
Robot.
Se non vuoi che il tuo sito venga indicizzato dai motori di ricerca, puoi comunicarglielo. <meta name="robots" content="noindex, nofollow" /> indica ai bot di non indicizzare il sito e di non seguire alcun link. I bot dovrebbero ascoltare la richiesta, ma non esiste una legge che richieda di ascoltarla. Non è necessario includere <meta name="robots" content="index, follow" /> per richiedere l'indicizzazione del sito e dei seguenti link, come impostazione predefinita, a meno che le intestazioni HTTP non indichino diversamente.
<meta name="robots" content="index, follow" />
Colore del tema
Il valore theme-color consente di definire un colore per personalizzare l'interfaccia del browser. Il valore del colore nell'attributo content verrà utilizzato dai browser e dai sistemi operativi supportati, in modo da poter fornire un colore suggerito agli user agent che supportano la colorazione della barra del titolo, della barra delle schede o di altri componenti di Chrome. Questo meta tag è particolarmente utile per le app web progressive. Tuttavia, se includi un file manifest, richiesto da una PWA, puoi invece includervi il colore del tema. La definizione di questo colore nel codice HTML, tuttavia, garantisce che il colore venga individuato immediatamente prima del rendering, il che potrebbe essere più veloce al primo caricamento rispetto all'attesa del manifest.
Per impostare il colore del tema sulla tonalità blu del colore di sfondo del nostro sito, includi:
<meta name="theme-color" content="#226DAA" />
Il meta tag colore del tema può includere un attributo media che consente l'impostazione di colori diversi del tema in base alle query supporti. L'attributo media può essere incluso solo in questo meta tag e viene ignorato in tutti gli altri meta tag.
Esistono diversi altri meta valori name, ma quelli di cui abbiamo discusso sono i più comuni. Tranne che devi dichiarare valori theme-color diversi per query supporti diverse, includi solo uno di ogni meta tag. Se devi includere più di un tipo di meta tag per supportare i browser precedenti, i valori precedenti devono essere inseriti dopo i valori più recenti, poiché gli user agent leggono le regole successive finché non trovano una corrispondenza.
Apri grafico
Puoi usare Open Graph e protocolli di meta tag simili per controllare il modo in cui i siti di social media, come Twitter, LinkedIn e Facebook, mostrano i link ai tuoi contenuti. Se non inclusi, i siti di social media acquisiranno correttamente il titolo della pagina e la descrizione dal meta tag description, le stesse informazioni che presenteranno i motori di ricerca, ma potrai impostare intenzionalmente ciò che vuoi che gli utenti visualizzino quando viene pubblicato un link sul tuo sito.
Quando pubblichi un link a MachineLearningWorkshop.com o web.dev su Facebook o Twitter, viene visualizzata una scheda con un'immagine, il titolo e la descrizione del sito. L'intera scheda è un link ipertestuale all'URL che hai fornito.
I meta tag Open Graph hanno due attributi ciascuno: l'attributo property anziché l'attributo name e il contenuto o il valore di quella proprietà. L'attributo property non è definito nelle specifiche ufficiali, ma è ampiamente supportato dalle applicazioni che supportano il protocollo Open Graph. La creazione di attributi "nuovi" come property garantisce che i valori degli attributi creati per l'attributo del protocollo non siano in conflitto con i valori futuri degli attributi name o http-equiv.
Creare una scheda multimediale su Facebook:
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
Includi un titolo per la visualizzazione del post. Questo titolo viene generalmente visualizzato sotto l'immagine e sopra la descrizione. La descrizione deve essere costituita da massimo tre frasi che riassumono il post. Verrà visualizzato dopo il titolo definito in og:title. Fornisci l'URL assoluto all'immagine del banner da visualizzare, incluso il protocollo https://. Quando includi un'immagine in HTML, includi sempre una descrizione di testo alternativa per l'immagine, anche se l'immagine verrà visualizzata altrove. Per le schede dei social media Open Graph, definisci alt come valore dei contenuti per la proprietà og:image:alt. Puoi anche includere un URL canonico con og:url.
Questi meta tag sono tutti definiti nel protocollo Open Graph. I valori devono corrispondere ai contenuti che vuoi che vengano visualizzati dall'applicazione web di terze parti.
Altri social media hanno sintassi simili, come il markup delle schede di Twitter. Ciò consente di offrire un'esperienza diversa a seconda della posizione in cui viene visualizzato il link o di abilitare il monitoraggio dei link aggiungendo un parametro alla fine dell'URL.
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
Nel caso di Twitter, per garantire che il valore dell'attributo name non sia in conflitto con specifiche future, invece di utilizzare un nuovo attributo come l'attributo property in Open Graph, per i dati delle schede di Twitter tutti i valori del nome sono preceduti dal prefisso twitter:.
Puoi vedere come apparirà la tua scheda sui social media su Twitter e Facebook.
Puoi avere immagini, titoli e descrizioni delle schede diverse per siti di social media diversi o per parametri di link differenti. Ad esempio, https://perfmattersconf.com imposta valori diversi per og:image, og:title e og:description in base al parametro dell'URL.
Se inserisci https://perfmattersconf.com?name=erica e https://perfmattersconf.com?name=melanie nello strumento Strumento di convalida delle carte di Twitter, vedrai queste due schede diverse; abbiamo fornito contenuti diversi anche se entrambe rimandano alla stessa home page della conferenza.
Altre meta informazioni utili
Se qualcuno aggiunge il tuo sito ai preferiti, lo aggiunge alla schermata Home o se il sito è un'applicazione web progressiva o altrimenti funziona offline o senza le funzionalità di Chrome del browser visualizzate, puoi fornire icone delle applicazioni per la schermata Home del dispositivo mobile.
Puoi utilizzare il tag <link> per collegarti alle immagini di avvio da utilizzare. Di seguito è riportato un esempio in cui vengono incluse alcune immagini con query supporti:
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
Se il tuo sito o la tua applicazione supporta un'app web, ovvero può essere autonomo con un'interfaccia utente minima, ad esempio senza pulsante Indietro, puoi utilizzare i meta tag per indicare al browser che:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
Includile solo se la tua app supporta l'app. Se il tuo sito non è presente, configurerai i tuoi sostenitori più appassionati, ovvero coloro che hanno aggiunto il tuo sito alla loro schermata Home, per un'esperienza utente davvero negativa. Perderai il loro amore.
Se qualcuno salva la tua icona nella schermata Home del piccolo dispositivo, devi fornire al sistema operativo un nome breve che non occupi molto spazio sulla schermata Home di un dispositivo piccolo. A tale scopo, includi un meta tag o utilizza un file manifest web. Di seguito viene illustrato il metodo del meta tag:
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
Hai trattato diversi meta tag, che allungheranno l'intestazione. Se invece stai creando un'applicazione web progressiva offline e compatibile con l'app web, invece di includere questi due meta tag aggiuntivi, puoi includere short_name: MLW in modo più semplice e sintetico in un file manifest web.
Il file manifest può impedire un'intestazione poco gestibile piena di tag <link> e <meta>. Possiamo creare un file manifest, generalmente denominato manifest.webmanifest o manifest.json. Quindi utilizziamo il pratico tag <link> con un attributo rel impostato su manifest e l'attributo href impostato sull'URL del file manifest:
<link rel="manifest" href="/mlw.webmanifest" />
Questa serie è incentrata sul linguaggio HTML, ma puoi consultare il corso web.dev sulle applicazioni web progressive o la documentazione relativa al file manifest per le app web di MDN.
Il codice HTML ora ha un aspetto simile a questo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
<link rel="manifest" href="/mlwmanifest.json" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
È abbastanza lunga, ma è fatta.
Ora che il tuo <head> è per lo più completo, puoi approfondire un po' di HTML semantico.
Verifica le tue conoscenze
Verifica la tua conoscenza dei metadati
La direttiva aggiorna pragma.
I meta tag Open Graph.