Ordre des balises META HTML


16

Une société de référencement nous a suggéré de changer l'ordre de nos balises meta HTML pour que <title>et <meta name="description">sont les deux premières. 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 à l'intérieur de la tête du document n'est pas significatif. Ai-je eu tort? Y at - il vraiment chercher les moteurs qui supposent que les deux premières balises sont toujours titleet descriptionet de renoncer à la recherche d'eux s'ils ne sont pas?


Réponses:


15

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 que c'est évidemment nul (et bien sûr diriger une entreprise de référencement. Soupir).


Pouvez-vous fournir une source ou une étude de cas?
s_hewitt

3
Juste une opinion basée sur l'expérience. Voici une discussion SearchEngineWatch sur le sujet - l'ordre n'a pas d'importance: forums.searchenginewatch.com/showthread.php?t=16452
Ciaran

7

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-Compatibleet 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 bodybalise ( </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.


Alors que X-UA-Compatible, viewportet les icônes tactiles Apple étaient encore (relativement) nouvelles en 2010, toutes étaient utilisées. HTML5 n'a affecté que la longueur de la déclaration de jeu de caractères. Le CSS, le JS et le pipelining d'images étaient une préoccupation à l'époque, ainsi que le (re) rendu des pages après l'application du CSS et du JS. Malgré cela, je n'ai pas pu trouver cette information en un seul endroit (en dehors du heads des documents html), et après être tombé sur cette question, il semblait bon de le faire ici.
David Eldridge

Bonne réponse @DavidEldridge. Mais voudriez-vous mettre à jour votre réponse pour inclure des application/ld+jsonscripts pour les données structurées? Pour des raisons de vitesse. Où serait-il préférable de le mettre? Faut-il le traiter comme des JavaScriptfichiers externes ?
Brendan Vogt du

2

D'un point de vue fonctionnel, 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 gens de Google, ce qui compte pour le référencement, c'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). S'il 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 proposer 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 remplir de mots-clés ou d'utiliser d'autres techniques «BlackHat», ces choses vous blesseront et vous interdiront peut-être.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.