HTML < head > migliori pratiche [chiuso]

https://stackoverflow.com/questions/275631

07-07-2019
|

Domanda

Esistono tag < meta > e altre cose che puoi inserire nel < head > del tuo documento HTML. Quali tag < meta > ecc. E quali migliori pratiche utilizzi nel tuo documento HTML per renderlo più accessibile, ricercabile, ottimizzato ecc.

Soluzione

Nel mio caso:

Titolo (dovrebbe fare [Nome sezione - Nome sito] per una migliore SEO)
Meta tag per tipo di contenuto , descrizione e parole chiave
Link ai fogli di stile (non dimenticare di specificare il media = " " ).
< script > che collega a file javascript esterni.

Tutti i tag devono seguire lo standard del W3C. Il sito del W3C ha una sezione sulla sezione HTML < head > .

Altri suggerimenti

Fai un favore ai tuoi utenti e fai in modo che il loro motore IE passi a Chrome uno quando Chrome Frame è installato :)

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Ti consigliamo di mettere gli elementi SCRIPT alla fine della pagina prima della chiusura dell'elemento BODY. Vedi http://developer.yahoo.com/performance/rules.html#js_bottom per dettagli.

Oltre al solito doctype, titolo, ecc., cercherò di fornirti alcune cose che ho imparato e implementato che potrebbero esserti di aiuto.

Innanzitutto, ricorda che il titolo, per la migliore esperienza utente, dovrebbe avere prima la sottosezione più rilevante. Questo perché di solito viene visualizzato nella barra del titolo / elenco schede / nome segnalibro. Considera questo titolo della pagina ...

Stack Overflow - HTML head best practices

diventa Stack Overflow ... (sgranocchiato per salvare spazio nella barra delle schede / nell'elenco dei segnalibri)

Ora se avessi 5 schede Stackoverflow aperte (come faccio spesso: P), come farebbe l'utente a sapere quale è quale?

Nota anche con CSS la natura a cascata ... Quindi l'ordine di questi avrà importanza. Lo stesso con Javascript, è necessario consentire qualsiasi dipendenza da altri siti esterni. Ho messo il mio in testa e non ho notato un calo delle prestazioni. Li ho messi lì perché a me sembra più ordinato e logico. Sebbene alcune altre persone consiglieranno di inserire i link < script src = " " > appena prima di < / body > in modo che il browser non si fermi temporaneamente ... Usa semplicemente ciò che funziona meglio per il tuo sito.

Anche un meta tag di 'rating' con 'general' consente al software Net Filtering di sapere che il tuo sito è sicuro per gli spettatori di tutte le età (purché lo sia, ovviamente!)

Uso anche ..

<link rel="start" href="/" title="Home" />

per far sapere al browser dove si trova la home del mio sito. E per qualsiasi sistema di prefetching del browser, anche se credo che questi debbano ancora essere implementati dai browser senza l'assistenza dei plugin.

Considera anche 'next' e 'prev' < link rel = " " > se le tue pagine sono in una sorta di sequenza.

Per prima cosa, assicurati che < ! DOCTYPE è il primo elemento del documento, ovvero nessuno spazio, tabulazione o marcatore DBA corrotto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- declare all page rendering and programmatic related tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- Care about IE ? -->
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!-- globalise scripting and styling content language  -->
    <meta name="Content-Type-Script" content="text/javascript" />
    <meta name="Content-Type-Style" content="text/css" />
    <!-- title tag is MANDATORY -->
    <title>Short and relevant, about 64 characters/spaces</title>
    <!-- declare all CACHE controll -->
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
    <meta name="revisit-after" content="7 days" />

    <!-- declare all content description tags -->
    <meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1))'>
    <!-- language specific keywords -->
    <meta name="keywords" lang="en-us" content="vacation, Greece, sunshine" />
    <!-- For french example -->
    <meta name="keywords" lang="fr" content="vacances, Grèce, soleil" />
    <meta name="description" content="about 255 characters/spaces WORDS relevant to the content of the actual page" />
    <meta name="Abstract" content="about 96 characters/spaces PARAGRAPH describing the actual page content within your site" />

    <!-- declare all situationnal and external relativity related tags -->
    <link rel="DC.identifier" type="text/plain" href="http://www.ietf.org/rfc/rfc1866.txt" />
    <link rel="start" href="/" title="Home" />
    <link rel="prev" href="../" title="Parent section" />

    <!-- declare all page rendering cascading style sheets in order of incidence -->
    <link rel="stylesheet" type="text/css" href="globaly-used.css" />
    <link rel="stylesheet" type="text/css" href="specificly-used.css" />
    <!-- declare all page rendering specific cascading style i.e. IE only, hacks etc -->
    <link rel="stylesheet" type="text/css" href="more-specificly-used.css" />
    <link rel="stylesheet" type="text/css" href="i-love-ie.css" />

    <!-- not relevent to subject, declare all javascripts AFTER css linking -->

</head>
<body>
</body>
</html>

Non l'ho visto menzionato: il tag < base > , se specificato, dovrebbe essere il primo elemento in < head > . (Si presume che l'URI di base del documento sia . prima / se non specificato.

IMHO, i due tag figlio più importanti di < head > sono < title > e il meta tag Content Type. I motori di ricerca guardano attivamente < title > . Mentre gli altri meta tag vengono spesso ignorati. Come utente web multilingue - Non posso sottolineare maggiormente l'importanza di aggiungere il tag Content Type perché senza di esso, il browser deve rilevare automaticamente il set di caratteri della pagina Web e questa operazione è spesso traballante. Il risultato è che vari caratteri non vengono visualizzati correttamente per l'utente o talvolta nessuno nel caso di giapponese o cinese.

Ecco uno snippet di alcuni dei codici di intestazione di un mio attuale progetto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Reports Blah Blah</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
...
</head>

C'è una domanda correlata qui che può aiutare ad aggiungere un po 'di luce riguardo l'ordine dei tag.

Generalmente le mie pagine includono quanto segue:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>...</title>
    <meta name="Description" ...>
    <meta name="Keywords" ...>
    <meta name="Copyright" ...>
    <meta name="Author" ...>
    <meta name="Language" ...>
    <style type="text/css" ...>

DocType è importante per applicare un rendering rigoroso (modalità senza stranezze) dal browser. Potresti voler usare XHTML invece - purché ce ne sia uno lì. Aggiungo Copyright e autore esclusivamente perché progetto e creo le pagine per altre aziende. La descrizione è per SEO e la lingua è per il browser (se supportato).

Non credo che faccia molta differenza quale meta tag viene prima, o se il titolo dovrebbe essere sopra. Ciò che conta nella maggior parte dei casi è che esiste sulla pagina e ha il contenuto corretto.

Per quanto ne so, la maggior parte dei motori di ricerca ignora qualsiasi parola chiave " " o " descrizione " meta tag, preferendo invece leggere il contenuto del documento.

Ottenere il titolo della pagina giusto, tuttavia, è di estrema importanza.

Titolo, meta tag per parole chiave, tipo di contenuto (se non impostato in modo esplicito dal server Web) e qualsiasi CSS da applicare alla pagina.

La dichiarazione anticipata del CSS consente al browser di disporre la pagina in modo più efficiente (consultare http://developer.yahoo.com/performance/rules.html#css_top ).

Vorrei aggiungere una nota importante: se stai usando tag Meta X-UA-Compatible di IE per cambiare modalità di rendering per Interet Explorer, devi inserirlo come primo elemento in HEAD:

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>Page title</title>
  ...etc
</head>

Oltre alle risposte di cui sopra, utilizzo i metatag dell'iniziativa Dublin Core .

Sono molto utili per contenuti / documenti reali ecc.

<meta name="DC.abstract" content="Document abstract" />
<meta name="DC.audience" content="Target audience" />

ecc.

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow