HTML < tête > meilleures pratiques [fermé]

StackOverflow https://stackoverflow.com/questions/275631

  •  07-07-2019
  •  | 
  •  

Question

Il existe des balises < meta > et d'autres éléments que vous pouvez placer dans le < tête > de votre document HTML. Quelles sont les balises < meta > , etc. et les meilleures pratiques que vous utilisez dans votre document HTML pour le rendre plus accessible, plus facile à rechercher, à rechercher, optimisé, etc.

Était-ce utile?

La solution

Dans mon cas:

  • Titre (devrait faire [Nom de la section - Nom du site] pour un meilleur référencement)
  • balise Meta pour type de contenu , description et mots clés
  • Lien vers les feuilles de style (n'oubliez pas de spécifier le media = "" ).
  • < script > qui renvoie aux fichiers javascript externes.

Toutes les balises doivent respecter les normes du W3C. La section à propos de la section HTML < tête > .

Autres conseils

Faites une faveur à vos utilisateurs et leur permet de basculer leur moteur IE dans Chrome lorsque Chrome Frame est installé:) 

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

Vous voudrez mettre des éléments SCRIPT à la fin de la page avant la fermeture de l'élément BODY. Voir http://developer.yahoo.com/performance/rules.html#js_bottom pour plus de détails.

Outre le doctype, le titre, etc. habituels, je vais essayer de vous fournir certaines choses que j'ai apprises et mises en œuvre qui pourraient vous aider.

Tout d’abord, rappelez-vous que le titre, pour une meilleure expérience utilisateur, devrait avoir la sous-section la plus pertinente en premier. En effet, il est généralement affiché dans la barre de titre / la liste d'onglets / le nom du signet. Considérez le titre de cette page ... 

Stack Overflow - HTML head best practices

devient Stack Overflow ... (grignoté pour économiser de la place dans la barre d'onglets / la liste des signets)

Maintenant, si vous avez 5 onglets Stackoverflow ouverts (comme je le fais souvent: P), comment l’utilisateur saurait-il lequel est lequel?

Notez également avec CSS la nature en cascade ... Ainsi, l'ordre de celles-ci importera. Pareil avec Javascript, toute dépendance sur d'autres sites externes doit être autorisée. J'ai mis le mien dans la tête et je n'ai pas remarqué de baisse de performance. Je les ai mises là parce que cela me semble plus ordonné et logique. D'autres personnes recommanderont toutefois de placer les liens < script src = "> juste avant < / body > afin que le navigateur ne se bloque pas temporairement. ... Utilisez ce qui vous convient le mieux pour votre site.

Une balise méta de 'rating' avec 'general' permet également au logiciel Net Filtering de savoir que votre site est sûr pour les internautes de tout âge (aussi longtemps qu'il est, bien sûr!)

J'utilise aussi .. 

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

pour permettre au navigateur de savoir où se trouve la maison de mon site. Et pour tous les systèmes de prélecture de navigateur, bien que je pense que ceux-ci doivent encore être implémentés par les navigateurs sans assistance de plugins.

Considérez également les options 'next' et 'prev' < link rel = " > si vos pages se trouvent dans une séquence de tri.

Tout d’abord, assurez-vous que le < ! DOCTYPE est le tout premier élément du document, c’est-à-dire qu’il n’ya ni espace, ni tabulation ni marqueur de nomenclature corrompu. 

<!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>

Je ne l'ai pas vu mentionné: la balise < base > , si spécifiée, devrait être le premier élément de < tête > . (L'URI de base du document est supposé être . avant / si non spécifié.)

IMHO, les deux balises enfant les plus importantes de < tête > sont < titre > et la balise méta Type de contenu. Les moteurs de recherche examinent activement < title > . Alors que les autres balises méta sont souvent ignorées. En tant qu'utilisateur Web multilingue, je ne saurais trop insister sur l'importance de l'ajout de la balise Content Type, car sans cette dernière, le navigateur doit détecter automatiquement le jeu de caractères de la page Web et cette opération est souvent irrégulière. Il en résulte que différents caractères ne sont pas restitués correctement à l'utilisateur, voire aucun, dans le cas du japonais ou du chinois.

Voici un extrait d'une partie du code d'en-tête d'un projet en cours: 

<!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>

Il existe une question connexe ici qui peut aider à éclaircir la situation. l'ordre des tags.

En règle générale, mes pages comprennent les éléments suivants: 

<!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 est important pour que le navigateur impose un rendu strict (mode Pas de quirks). Vous voudrez peut-être utiliser XHTML à la place, tant qu’il en existe un. J'ajoute les droits d'auteur et d'auteur uniquement parce que je conçois et crée les pages pour d'autres sociétés. La description est destinée au référencement et la langue au navigateur (s’il le prend en charge).

Je ne crois pas que la méta-balise vienne en premier ou que le titre soit au-dessus de la différence. Ce qui compte dans la plupart des cas, c’est qu’il existe sur la page et que son contenu est correct.

Autant que je sache, la plupart des moteurs de recherche ignorent les "mots clés". ou " description " balises méta, préférant lire le contenu du document.

Cependant, il est extrêmement important que le titre de la page soit correct.

Titre, balises méta pour les mots clés, type de contenu (si cela n'est pas explicitement défini par le serveur Web), et CSS à appliquer à la page.

Déclarer la CSS à l’avance permet au navigateur d’organiser plus efficacement la page (voir http://developer.yahoo.com/performance/rules.html#css_top ).

J'ajouterais une remarque importante: si vous utilisez La balise meta compatible avec X-UA d'IE pour changer de mode de rendu pour Interet Explorer, vous devez l'insérer en tant que premier élément de HEAD: 

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

Outre les réponses ci-dessus, j'utilise les balises méta de l'initiative Dublin Core .

Ils sont très utiles pour les contenus / papiers réels, etc. 

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

etc.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top