Bien qu'aux fins du référencement, il puisse être vrai que la commande n'est pas significative, ce n'est pas vrai lorsque l'on considère d'autres choses comme la sécurité, l'affichage du contenu (caractère) ou la vitesse de chargement. C'est une bonne idée de commander à peu près la tête de votre page (en supposant HTML5 pour la syntaxe):
<head>
Jusqu'à présent dans le document, vous ne devriez pas avoir utilisé de caractères non ASCII, donc l'encodage des caractères n'est pas encore un problème. Mais la probabilité d'utiliser des caractères non ASCII augmente considérablement une fois que vous avez ouvert cette balise head. En conséquence (et en supposant que vous ne déclarez pas votre codage de caractères par programme ou au niveau du serveur), vous devez faire de la déclaration suivante votre déclaration de codage de caractères. Cela satisfait également les analyseurs / navigateurs / agents qui renifleraient les instructions de codage de caractères:
<meta charset="utf-8">
Les deux ( X-UA-Compatible
et viewport
) suivants sont recommandés par les gens de Bootstrap (aussi récemment que la v3.3.4). Bien que je sois presque certain que ces recommandations sont basées sur la performance, la plupart de ce que je dirais serait spéculatif:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Si vous envisagez une conception / un développement indépendant du périphérique (y compris des agents utilisateurs plus petits et non de bureau), vous devez inclure les éléments suivants:
<meta name="viewport" content="width=device-width, initial-scale=1">
Enfin, le titre:
<title>Ingenious Page Title</title>
Ensuite, vous offrez le CSS dès que possible après le titre (pas de «lumière du jour» entre eux):
<link rel="stylesheet" href="stylesheet-1.css">
<link rel="stylesheet" href="stylesheet-2.css">
Si vous utilisez des styles au niveau de la page, ils iraient ici. Cela est largement dû à la nature «en cascade» de CSS: à savoir la dernière déclaration de style de niveaux de spécificité identiques (comme deux déclarations qui ciblent un paragraphe p
). Afin de faciliter le remplacement des styles externes (c'est-à-dire sans utiliser une plus grande spécificité, ou !important
), vous devez placer les styles au niveau de la page après les styles externes <link>
. En outre, il est généralement déconseillé d'utiliser la directive @import dans les styles au niveau de la page, car elle gênera le téléchargement simultané d'autres actifs de style:
<style>body{color:black;}</style>
C'est le point où il semble le plus approprié de mettre des balises META, des favicons et d'autres cruches. On peut soutenir que les favicons ou les actifs similaires (par exemple, les images d'applications iOS) seraient chargés avant la plupart des balises META, car le téléchargement de ces actifs commence légèrement plus tôt.
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-icon.png">
<meta name="description" content="Some information that is descriptive of the content">
<meta name="generator" content="Microsoft FrontPage 2002">
Parce qu'il bloque / retarde le rendu, si vous avez besoin d'exiger des scripts, chargez-les aussi tard que possible. S'ils doivent être dans le head
, vous pouvez les charger avant la fermeture du head
( </head>
). Si vous pouvez les charger plus tard, placez-les avant la fermeture de la body
balise ( </body>
).
<script src="script-1.js"></script>
<script src="script-2.js"></script>
</head>
Il semble peu important dans la plupart des cas d'accorder beaucoup d'attention à l'ordre des balises META à des fins de référencement, étant donné que les robots d'indexation (c'est-à-dire les araignées des moteurs de recherche) vont consommer toute la page. Sinon, comment indexeraient-ils le contenu d'une page, ou mettraient-ils à jour cet index?
Il est notable pour moi que pour tout ce que nous pensons savoir et toutes les recommandations que nous trouvons sur le Web (même à partir d'endroits comme Google et Bing Webmaster Tools, etc.), des sites comme Amazon, Google et d'autres personnes qui se soucient clairement à propos de tels gains de performances minuscules ne suivent pas ces règles.