Indice

Minimo consigliato

<metacharset="utf-8"><metahttp-equiv="x-ua-compatible"content="ie=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><!-- I tre meta tag qui sopra *devono* essere i primi nel head; tutti gli altri contenuti del head devono venire *dopo* questi tag --><title>Titolo della pagina</title>

Elementi

<!-- Titolo del documento --><title>Titolo della pagina</title><!-- URL base da usare per tutti gli URL relativi contenuti nel documento --><basehref="https://example.com/page.html"><!-- CSS esterni --><linkrel="stylesheet"href="styles.css"><!-- CSS nel documento --><style>/* ... */</style><!-- JavaScript --><scriptsrc="script.js"></script><noscript><!-- Codice alternativo no JS --></noscript>

Meta

<metacharset="utf-8"><!-- set di codifica dei caratteri per il documento --><metahttp-equiv="x-ua-compatible"content="ie=edge"><metaname="viewport"content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- I tre meta tag qui sopra *devono* essere i primi nel head; tutti gli altri contenuti del head devono venire *dopo* questi tag --><!-- Permette di controllare da dove vengono caricate le risorse --><metahttp-equiv="Content-Security-Policy"content="default-src 'self'"><!-- Inserirlo nel documento il prima possibile --><!-- Si applica solamente ai contenuti sotto questo tag --><!-- Nome della web application (dovrebbe essere usato solo nel caso il sito sia usato come un'app) --><metaname="application-name"content="Nome dell'applicazione"><!-- Breve descrizione della pagina (Massimo 150 caratteri) --><!-- In *alcune* situazioni questa descrizione è usata come parte dello snippet mostrato nei risultati di ricerca. --><metaname="description"content="Descrizione della pagina"><!-- Controlla il comportamento di scansione e indicizzazione dei motori di ricerca --><metaname="robots"content="index,follow,noodp"><!-- Tutti i motori di ricerca --><metaname="googlebot"content="index,follow"><!-- Specifico per Google --><!-- Dice a Google di non mostrare i sitelink nei risultati di ricerca --><metaname="google"content="nositelinkssearchbox"><!-- Dice a Google di non fornire una traduzione per questa pagina --><metaname="google"content="notranslate"><!-- Verifica del possesso per la Google Search Console --><metaname="google-site-verification"content="token_di_verifica"><!-- Usato per indicare il nome del programma utilizzato per costruire il sito web (cioè - WordPress, Dreamweaver) --><metaname="generator"content="programma"><!-- Breve descrizione dell'argomento del tuo sito --><metaname="subject"content="argomento del tuo sito"><!-- Brevissima (10 parole o meno) descrizione. Principalmente per articoli accademici --><metaname="abstract"content=""><!-- Nome completo del dominio o dell'indirizzo web --><metaname="url"content="https://example.com/"><metaname="directory"content="submission"><!-- Dà un limite generale di età basata sui contenuti del sito --><metaname="rating"content="General"><!-- Permette il controllo di come sono passate le informazioni del referrer --><metaname="referrer"content="no-referrer"><!-- Disattiva il rilevamento automatico e la formattazione dei possibili numeri di telefono --><metaname="format-detection"content="telephone=no"><!-- Disattiva completamente il prefetching DNS impostando questo tag su 'off' --><metahttp-equiv="x-dns-prefetch-control"content="off"><!-- Salva un cookie sul browser per l'identificazione del client --><metahttp-equiv="set-cookie"content="name=value; expires=date; path=url"><!-- Indica alla pagina di caricarsi in un frame specifico --><metahttp-equiv="Window-Target"content="_valore"><!-- Tag geo --><metaname="ICBM"content="latitudine, longitudine"><metaname="geo.position"content="latitudine;longitudine"><metaname="geo.region"content="nazione[-stato|zona]"><!-- Codice nazione (ISO 3166-1): obbligatorio, il codice dello stato (ISO 3166-2): opzionale; es. content="IT" / content="IT-MI" --><metaname="geo.placename"content="città"><!-- es. content="Milano" -->

Meta: Non raccomandato

<!-- Usato per indicare la lingua del documento, ma non ben supportato. Meglio usare <html lang="it"> --><metaname="language"content="it"><!-- Google lo ignora e Bing lo considera come indicatore di spam --><metaname="keywords"content="metti,qui,le,tue,keywords,separate,da,virgola,senza,spazi"><!-- Nessuna prova di utilizzo recente in nessun morore di ricerca --><metaname="revised"content="Sunday, July 18th, 2010, 5:15 pm"><!-- Fornisce un modo semplice agli *spam bot* per la raccolta di indirizzi e-mail --><metaname="reply-to"content="email@example.com"><!-- Meglio usare <link rel="author"> o il file humans.txt --><metaname="author"content="name, email@example.com"><metaname="designer"content=""><metaname="owner"content=""><!-- Dice ai motori di ricerca di rivisitare la pagina dopo uno specifico periodo di tempo. Non è supportato poiché la maggior parte dei motori di ricerca usano intervalli casuali per scansionare nuovamente la pagina --><metaname="revisit-after"content="7 days"><!-- Manda l'utente ad una nuova URL dopo un dato periodo di tempo --><!-- Il W3C consiglia di non usare questo tag. Google consiglia di usare un redirect 301 lato server al suo posto. --><metahttp-equiv="refresh"content="300; url=https://example.com/"><!-- Descrive l'argomento del sito --><metaname="topic"content=""><!-- Breve sommario dell'azienda o lo scopo del sito --><metaname="summary"content=""><!-- Un tag deprecato che fa la stessa cosa del meta tag keywords --><metaname="classification"content="business"><!-- Fa la stessa cosa di URL, più vechio e non supportato --><metaname="identifier-URL"content="https://example.com/"><!-- Funzione simile al tag keyword --><metaname="category"content=""><!-- Si assicura che il tuo sito sia visibile in tutte le nazioni e in tutte le lingue --><metaname="coverage"content="Worldwide"><!-- Uguale al tag coverage --><metaname="distribution"content="Global"><!-- COntrolla a cosa può accedere l'utente via internet --><metahttp-equiv="Pics-label"content="value"><!-- Controllo della cache --><!-- Meglio configurare il controllo della cache lato server --><metahttp-equiv="Expires"content="0"><metahttp-equiv="Pragma"content="no-cache"><metahttp-equiv="Cache-Control"content="no-cache">

Link

<!-- Aiuta a evitare i problemi dovuti ai contenuti duplicati --><linkrel="canonical"href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"><!-- Era usato prima del link icon, ma è deprecato e non più usato --><linkrel="shortlink"href="https://example.com/?p=42"><!-- Link alla versione AMP HTML del documento corrente --><linkrel="amphtml"href="https://example.com/path/to/amp-version.html"><!-- Punta ad un foglio di stile CSS --><linkrel="stylesheet"href="https://example.com/styles.css"><!-- Collegamento ad un file JSON che specifica le credenziali di "installazione" per l'applicazione web --><linkrel="manifest"href="manifest.json"><!-- Link all'autore del documento --><linkrel="author"href="humans.txt"><!-- Fa riferimento a una dichiarazione di copyright applicata al contesto del link --><linkrel="copyright"href="copyright.html"><!-- Fa riferimento ad una posizione nel documento che potrebbe essere in un altra lingua --><linkrel="alternate"href="https://es.example.com/"hreflang="es"><!-- Fornisce informazioni su un autore o un altra persona --><linkrel="me"href="https://google.com/profiles/thenextweb"type="text/html"><linkrel="me"href="mailto:name@example.com"><linkrel="me"href="sms:+15035550125"><!-- Collegamento ad un documento che contiene un archivio di link al documento corrente --><linkrel="archives"href="https://example.com/2003/05/"title="May 2003"><!-- Collegamento alla risorsa di livello più alto nella struttura gerarchica --><linkrel="index"href="https://example.com/"title="DeWitt Clinton"><!-- Fornisce il punto di partenza del documento --><linkrel="start"href="https://example.com/photos/pattern_recognition_1_about/"title="Pattern Recognition 1"><!-- Conduce alla risorsa precedente della sequenza nella quale è inserito il documento corrente --><linkrel="prev"href="https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/"title="OpenSearch and OpenID? A sure way to get my attention."><!-- Dà un riferimento al documento stesso - utile quando il documento ha più di un possibile riferimento --><linkrel="self"type="application/atom+xml"href="https://example.com/atomFeed.php?page=3"><!-- Rispettivamente il primo (first), il prossimo (next), il precedente (previous) e l'ultimo (last) documento in una serie. --><linkrel="first"href="https://example.com/atomFeed.php"><linkrel="next"href="https://example.com/atomFeed.php?page=4"><linkrel="previous"href="https://example.com/atomFeed.php?page=2"><linkrel="last"href="https://example.com/atomFeed.php?page=147"><!-- Usato quando si usufruisce di un servizio di terze parti per mantenere un blog --><linkrel="EditURI"href="https://example.com/xmlrpc.php?rsd"type="application/rsd+xml"title="RSD"><!-- Crea un commento automatico quando un altro blog WordPress inserisce un link al tuo blog o ad un tuo post --><linkrel="pingback"href="https://example.com/xmlrpc.php"><!-- Notifica un URL quando fai riferimento a quella risorsa sul tuo sito --><linkrel="webmention"href="https://example.com/webmention"><!-- Carica un file HTML esterno nel documento HTML corrente. --><linkrel="import"href="component.html"><!-- Open Search --><linkrel="search"href="/open-search.xml"type="application/opensearchdescription+xml"title="Search Title"><!-- Feed --><linkrel="alternate"href="https://feeds.feedburner.com/example"type="application/rss+xml"title="RSS"><linkrel="alternate"href="https://example.com/feed.atom"type="application/atom+xml"title="Atom 0.3"><!-- Prefetching, precaricamento, prebrowsing --><linkrel="dns-prefetch"href="//example.com/"><linkrel="preconnect"href="https://www.example.com/"><linkrel="prefetch"href="https://www.example.com/"><linkrel="prerender"href="https://example.com/"><linkrel="preload"href="image.png"as="image"><!-- Maggiori informazioni (inglese): https://css-tricks.com/prefetching-preloading-prebrowsing/ -->

Link: Non raccomandato

<linkrel="shortcut icon"href="path/to/favicon.ico"><!-- Nessuna utilità, proprietario e pieno di errori, vedi (inglese): https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ --><linkrel="subresource"href="styles.css">

Favicon

<!-- Per IE 10 e precedenti --><!-- Nessun link, carica semplicemente un file chiamato favicon.ico nella directory principale del sito --><!-- Per IE 11, Chrome, Firefox, Safari, Opera --><linkrel="icon"href="path/to/favicon-16.png"sizes="16x16"type="image/png"><linkrel="icon"href="path/to/favicon-32.png"sizes="32x32"type="image/png"><linkrel="icon"href="path/to/favicon-48.png"sizes="48x48"type="image/png"><linkrel="icon"href="path/to/favicon-62.png"sizes="62x62"type="image/png"><linkrel="icon"href="path/to/favicon-192.png"sizes="192x192"type="image/png"><!-- Maggiori informazioni (inglese): https://bitsofco.de/all-about-favicons-and-touch-icons/ -->

Social

Facebook / Open Graph

<metaproperty="fb:app_id"content="123456789"><metaproperty="og:url"content="https://example.com/page.html"><metaproperty="og:type"content="website"><metaproperty="og:title"content="Titolo del contenuto"><metaproperty="og:image"content="https://example.com/image.jpg"><metaproperty="og:description"content="Qui la descrizione"><metaproperty="og:site_name"content="Nome del sito"><metaproperty="og:locale"content="it_IT"><metaproperty="article:author"content="Nome dell'autore"><!-- Facebook: https://developers.facebook.com/docs/sharing/webmasters#markup --><!-- Open Graph (inglese): http://ogp.me/ -->

Facebook / Articoli interattivi

<metacharset="utf-8"><metaproperty="op:markup_version"content="v1.0"><!-- L'URL della versione web del tuo articolo --><linkrel="canonical"href="http://example.com/article.html"><!-- Lo stile da utilizzare per questo articolo --><metaproperty="fb:article_style"content="myarticlestyle">

Twitter

<metaname="twitter:card"content="sommario"><metaname="twitter:site"content="@account_sito"><metaname="twitter:creator"content="@account_individuale"><metaname="twitter:url"content="https://example.com/pagina.html"><metaname="twitter:title"content="Titolo del contenuto"><metaname="twitter:description"content="Descrizione del contenuto, meno di 200 caratteri"><metaname="twitter:image"content="https://example.com/immagine.jpg"><!-- Maggiori informazioni (inglese): https://dev.twitter.com/cards/getting-started --><!-- Validazione (inglese): https://dev.twitter.com/docs/cards/validation/validator -->

Google+ / Schema.org

<linkhref="https://plus.google.com/+YourPage"rel="publisher"><metaitemprop="name"content="Titolo del contenuto"><metaitemprop="description"content="Descrizione del contenuto, meno di 200 caratteri"><metaitemprop="image"content="https://example.com/immagine.jpg">

Pinterest

<metaname="pinterest"content="nopin"description="Spiacente, non puoi aggiungere Pin dal mio sito web!"/>

OEmbed

<linkrel="alternate"type="application/json+oembed"href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"title="oEmbed Profile: JSON"><linkrel="alternate"type="text/xml+oembed"href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"title="oEmbed Profile: XML">

Browser / Piattaforme

Apple iOS

<!-- Smart App Banner --><metaname="apple-itunes-app"content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"><!-- Disattiva il rilevamento automatico e la formattazione dei possibili numeri di telefono --><metaname="format-detection"content="telephone=no"><!-- Aggiungi alla schermata home --><metaname="apple-mobile-web-app-capable"content="yes"><metaname="apple-mobile-web-app-status-bar-style"content="black"><metaname="apple-mobile-web-app-title"content="App Title"><!-- Icone Touch --><linkrel="apple-touch-icon"href="path/to/apple-touch-icon.png"><linkrel="apple-touch-icon-precomposed"href="path/to/apple-touch-icon-precomposed.png"><!-- iOS 8+ non supporta più le icone precomposed, è richiesta solo la apple-touch-icon --><!-- Nella maggior parte dei casi, è sufficiente una icona touch da 180×180px nel head --><!-- Utilizzare le diverse dimensioni delle icone solo se si vogliono avere icone diverse --><!-- in base al dispositivo. --><linkrel="apple-touch-icon"sizes="57x57"href="path/to/icon@57.png"><linkrel="apple-touch-icon"sizes="72x72"href="path/to/icon@72.png"><linkrel="apple-touch-icon"sizes="114x114"href="path/to/icon@114.png"><linkrel="apple-touch-icon"sizes="144x144"href="path/to/icon@144.png"><!-- Immagine Startup (Deprecato) --><linkrel="apple-touch-startup-image"href="path/to/startup.png"><!-- iOS app deep linking --><metaname="apple-itunes-app"content="app-id=APP-ID, app-argument=http/url-sample.com"><linkrel="alternate"href="ios-app://APP-ID/http/url-sample.com">

Apple Safari

<!-- Siti preferiti --><linkrel="mask-icon"href="path/to/icon.svg"color="red">

Google Android

<metaname="theme-color"content="#E64545"><!-- Aggiugni alla home --><metaname="mobile-web-app-capable"content="yes"><!-- Maggiori informazioni (inglese): https://developer.chrome.com/multidevice/android/installtohomescreen --><!-- Android app deep linking --><metaname="google-play-app"content="app-id=package-name"><linkrel="alternate"href="android-app://package-name/http/url-sample.com">

Google Chrome

<linkrel="chrome-webstore-item"href="https://chrome.google.com/webstore/detail/APP_ID"><!-- Disattiva l'avviso di traduzione --><metaname="google"value="notranslate">

Google Chrome Mobile (Solo Android)

<!-- Collegamento ad un manifest e definisce i metadata. --><!-- Un esempio di manifest.json può essere trovato nel link sottostante. --><linkrel="manifest"href="manifest.json"><!-- Imposta la tua pagina come "web app" --><metaname="mobile-web-app-capable"content="yes"><!-- Il primo è il formato ufficiale e raccomandato.  --><linkrel="icon"sizes="192x192"href="nice-highres.png"><linkrel="icon"sizes="128x128"href="niceicon.png"><!-- I formati con il prefisso Apple saranno deprecati. --><linkrel="apple-touch-icon"sizes="128x128"href="niceicon.png"><linkrel="apple-touch-icon-precomposed"sizes="128x128"href="niceicon.png">

Microsoft Internet Explorer

<metahttp-equiv="x-ua-compatible"content="ie=edge"><metahttp-equiv="cleartype"content="on"><metaname="skype_toolbar"content="skype_toolbar_parser_compatible"><!-- Disattiva l'evidenziazione dei link in IE 10 su Windows Phone (inglese) (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) --><metaname="msapplication-tap-highlight"content="no"><!-- Siti aggiunti (inglese) (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) --><metaname="application-name"content="Etichetta del sito aggiunto"><metaname="msapplication-tooltip"content="Esempio di testo tooltip"><metaname="msapplication-starturl"content="/"><metaname="msapplication-config"content="http://example.com/browserconfig.xml"><metaname="msapplication-allowDomainApiCalls"content="true"><metaname="msapplication-allowDomainMetaTags"content="true"><metaname="msapplication-badge"content="frequency=30; polling-uri=http://example.com/id45453245/polling.xml"><metaname="msapplication-navbutton-color"content="#FF3300"><metaname="msapplication-notification"content="frequency=60;polling-uri=http://example.com/livetile"><metaname="msapplication-square150x150logo"content="path/to/logo.png"><metaname="msapplication-square310x310logo"content="path/to/largelogo.png"><metaname="msapplication-square70x70logo"content="path/to/tinylogo.png"><metaname="msapplication-wide310x150logo"content="path/to/widelogo.png"><metaname="msapplication-task"content="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico"><metaname="msapplication-task-separator"content="1"><metaname="msapplication-TileColor"content="#FF3300"><metaname="msapplication-TileImage"content="path/to/tileimage.jpg"><metaname="msapplication-window"content="width=1024;height=768">

Microsoft Internet Explorer: Legacy, non usare!

<!-- Disattiva la toolbar per le immagini al mouseover in IE 6 (inglese) (https://msdn.microsoft.com/en-us/library/ms532986(v=vs.85).aspx) --><metahttp-equiv="imagetoolbar"content="no"><!-- Disattiva il tema di windows agli input e bottoni nei form (inglese) (https://support.microsoft.com/en-us/kb/322240) --><metaname="MSThemeCompatible"content="no"><!-- Disattiva una funzione che era presente solo in IE 6 beta (inglese) (https://stackoverflow.com/q/2167301) --><metaname="MSSmartTagsPreventParsing"content="true"><!-- Transizioni tra le pagine (inglese) (https://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx) --><metahttp-equiv="Page-Enter"content="revealtrans(duration=2,transition=2)"><metahttp-equiv="Page-Exit"content="revealtrans(duration=3,transition=12)"><metahttp-equiv="Site-Enter"content="revealtrans(duration=2,transition=2)"><metahttp-equiv="Site-Exit"content="revealtrans(duration=3,transition=12)">

Link app

<!-- iOS --><metaproperty="al:ios:url"content="applinks://docs"><metaproperty="al:ios:app_store_id"content="12345"><metaproperty="al:ios:app_name"content="App Links"><!-- Android --><metaproperty="al:android:url"content="applinks://docs"><metaproperty="al:android:app_name"content="App Links"><metaproperty="al:android:package"content="org.applinks"><!-- Web Fallback --><metaproperty="al:web:url"content="http://applinks.org/documentation"><!-- Maggiori informazioni (inglese): http://applinks.org/documentation/ -->

Browser (Cinesi)

360 Browser

<!-- Selezione il motore di rendering, in ordine --><metaname="renderer"content="webkit|ie-comp|ie-stand">

QQ Browser mobile

<!-- Blocca lo schermo in un orientamento specifico --><metaname="x5-orientation"content="landscape/portrait"><!-- Visualizza la pagina a schermo intero --><metaname="x5-fullscreen"content="true"><!-- La pagina sarà Visualizzata in "application mode"(fullscreen,ecc.) --><metaname="x5-page-mode"content="app">

UC Browser mobile

<!-- Blocca lo schermo in un orientamento specifico --><metaname="screen-orientation"content="landscape/portrait"><!-- Visualizza la pagina a schermo intero --><metaname="full-screen"content="yes"><!-- Il browser UC visualizzerà le immagini anche se è in "modalità testuale" --><metaname="imagemode"content="force"><!-- La pagina sarà Visualizzata in "application mode"(fullscreen,forbiding gesture, etc.) --><metaname="browsermode"content="application"><!-- Disattiva la "modalità notturna" del browser UC in questa pagina --><metaname="nightmode"content="disable"><!-- Semplifica la pagina per ridurre il trasferimento dati --><metaname="layoutmode"content="fitscreen"><!-- Disattiva la funzione del browser UC che "aumenta la dimensione del testo quando ci sono troppe parole in questa pagina" --><metaname="wap-font-scale"content="no">

Note

Performance

<linkhref="https://fonts.googleapis.com/css?family=Open+Sans:400,700"rel="stylesheet">

Altre risorse

Progetti correlati

Altri formati

Traduzioni

Contribuire

Contributori

Autore

Traduzione

License