web-dev-qa-db-fra.com

Ordre des balises méta HTML

Une société de référencement nous a suggéré de modifier l’ordre de nos balises méta HTML afin que <title> et <meta name="description"> soient les deux premiers. Ils disent que c'est pour s'assurer que les moteurs de recherche peuvent utiliser ces deux balises. J'ai eu l'impression que l'ordre des balises dans la tête du document n'était pas significatif. Ai-je eu tort? Existe-t-il vraiment des moteurs de recherche qui supposent que les deux premières balises sont toujours title et description et abandonnent leur recherche si elles ne le sont pas?

seohtmlmeta-tags
15
Kaivosukeltaja

Vous avez raison. L'ordre de ces balises n'a pas d'importance pour le référencement. Ils ont juste besoin d'être présents. Celui qui a dit cela est évidemment désemparé (et bien sûr, une entreprise de référencement. Sigh).

15
John Conde

Si, aux fins du référencement, l'ordre peut ne pas être vrai, il ne l'est pas non plus si vous tenez compte d'éléments tels que la sécurité, l'affichage du contenu (caractères) ou la vitesse de chargement. C’est une bonne idée de commander la tête de votre page à peu près ainsi (en supposant HTML5 pour la syntaxe):

<head>

Jusqu'à présent dans le document, vous ne devriez avoir utilisé aucun caractère non-ASCII, le codage de caractères n'est donc pas encore un problème. Mais la probabilité d'utiliser des caractères non-ASCII augmente nettement lorsque vous ouvrez cette balise head. En conséquence (et en supposant que vous ne déclariez pas votre codage de caractères par programme ou au niveau du serveur), vous devez définir la déclaration suivante comme déclaration de codage de caractères. Cela satisfait également les analyseurs/navigateurs/agents qui rechercheraient les instructions de codage de caractères:

  <meta charset="utf-8">

Les deux personnes suivantes (X-UA-Compatible et viewport) sont recommandées par les utilisateurs de Bootstrap (aussi récemment que v3.3.4). Bien que je sois presque convaincu 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 songez à une conception/un développement indépendant du périphérique (y compris des agents utilisateurs plus petits et non-desktop), 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 proposez les 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. C’est en grande partie à cause de la nature "en cascade" de CSS: il s’agit de la dernière déclaration de style de niveaux de spécificité identiques (par exemple, deux instructions qui ciblent un paragraphe p). Pour faciliter la substitution de styles externes (c'est-à-dire sans utiliser de spécificité supérieure, ni !important), vous devez placer les styles de niveau page après les styles externes (<link>s). De même, il est généralement déconseillé d'utiliser la directive @import dans les styles au niveau page, car cela empêcherait 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 méta, favicons et autres objets cruels. Il est discutable que des favicons ou des actifs similaires (par exemple, des images d'applications iOS) soient chargés avant la plupart des balises méta, car le téléchargement de ces actifs est démarré de manière marginale 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 que cela bloque/retarde le rendu, si vous avez l’intention d’exiger des scripts, chargez-les aussi tard que possible. Si elles doivent figurer dans la head, vous pouvez les charger avant la fermeture de la head (</head>). Si vous pouvez les charger plus tard, placez-les avant la fermeture de la balise body (</body>).

  <script src="script-1.js"></script>
  <script src="script-2.js"></script>
</head>

Il semble sans importance dans la plupart des cas de porter une attention particulière à l'ordre des balises méta à des fins de référencement, étant donné que les robots d'indexation (c.-à-d. Les araignées des moteurs de recherche) vont occuper toute la page. Sinon, comment pourraient-ils indexer le contenu d’une page ou mettre à jour cet index ultérieurement?

Je pense que, malgré tout ce que nous pensons connaître et toutes les recommandations que nous trouvons sur le Web (même à partir d'endroits tels que Google et Bing Webmaster Tools, etc.), de sites comme Amazon, Google et d'autres personnes à propos de tels gains de performances minuscules ne suivent pas ces règles.

6
David Eldridge

Du point de vue de la fonctionnalité, les éléments suivants de Bootstrap semblent être le meilleur ordre des balises META:

    1) <meta charset="utf-8">
    2) <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    3) <title></title>
    4) <meta name="description" content="">
    5) <meta name="viewport" content="width=device-width, initial-scale=1">

Selon les responsables de Google, l’important pour le référencement est:

  1. être mobile friendly
  2. titre et description
  3. contenu unique et utile

Si votre site n'est pas adapté aux mobiles, ils ne regardent même pas 2) ou 3). Si c'est adapté aux mobiles, ils peuvent utiliser le titre et la description lorsqu'ils répertorient votre site. Aucune garantie à ce sujet. Ils peuvent décider de créer leur propre description en fonction de ce qu'ils trouvent sur votre site.

Si votre contenu est plagié ou répétitif et si vous essayez de le fourrer avec des mots-clés ou d'utiliser d'autres techniques de "BlackHat", ces choses vous feront mal et vous interdiront peut-être.

2
Michael Moriarty