Il y’a quelques années encore (avant que Google commence à rendre le contenu comme un navigateur normal), il était recommandé de faire attention à l’ordre dans lequel le contenu apparaissait dans le code HTML. En effet, cela pouvait avoir une influence sur le comportement de crawl et d’indexation de Google. Il était recommandé de placer les contenus que l’on souhaitait voir bien référencés au début du code.
Dans les cas extrêmes, cela permettait aussi de s’assurer de l’indexation du contenu quand la limite de taille pour un fichier indexable était atteinte (au début c’était 100k).
Rappelons que de nos jours, ces recommandations ont beaucoup moins de pertinence, car ce qui est important c’est l’emplacement réel du contenu sur la page vue par l’internaute. Notamment, il faut se demander ce qui figure dans la zone visible par défaut sur le device utilisé par l’internaute.
Mais récemment John Mueller a quand même signalé un cas où l’ordre d’apparition dans le code source a encore de l’importance : la zone <head> du code HTML.
Ne placez pas vos balises SEO derrière une tonne de code Javascript
John Mueller est revenu deux fois sur ce point pour le clarifier.
Quelqu’un lui avait demandé sur Reddit si le fait de placer les balises SEO, les liens ahrefs loin dans le code posait des problèmes de crawl et d’indexation.
John Mueller a répondu de manière assez laconique puis a copié collé un post qu’il avait fait sur Mastodon, plus détaillé. En voici la traduction :
C’est une question qui revient régulièrement, je vais développer un peu plus le propos cette fois-ci (mais ce n’est pas nouveau). Les moteurs de recherche (je ne connais vraiment que Google, YMMV) affichent des pages HTML et certains paramètres doivent être trouvés dans la section <Head> d’une page pour être valides. Si vous vous souciez de ces balises, ne rendez pas le <head> fragile et, idéalement, déplacez ces paramètres vers le haut du code HTML.
Les paramètres de référencement auxquels je pense sont la balise méta robots et les balises canonical, mais il y a aussi la balise méta du titre et de la description que certaines personnes considèrent comme importante.Il ne s’agit pas seulement de SEO non plus – vous voulez probablement aussi vous assurer que des éléments tels que la définition du jeu de caractères, la fenêtre d’affichage et le CSP sont considérés comme valides.
« Mais elle est très bien ma section <Head> ! ». Parfois ce n’est pas aussi évident qu’un balisage clairement cassé. La section <Head> se ferme automatiquement [la présence de la balise fermante </head> n’est pas obligatoire NdT], donc tout élément HTML qui n’est pas valide dans cette section fera que le reste sera considéré comme faisant partie de la section <Body>
Il peut s’agir d’une balise <img> égarée qui se retrouve au mauvais endroit. Il peut s’agir d’une iframe qu’un script injecte au mauvais endroit lors de la rendition. Ceci est visible si vous inspectez le DOM d’une page dans votre navigateur.
John Mueller, Google
Les navigateurs sont parfois utiles et essaient d’interpréter ce que vous voulez dire, si vous ne voulez pas qu’une page soit indexée, ou si vous voulez une URL différente comme canonique, vous ne voulez probablement pas que les moteurs de recherche devinent. (Le référencement consiste en grande partie à ne pas faire deviner aux moteurs de recherche.)
En bref, évitez de rendre la section <head> fragile et si vous vous souciez des balises SEO, envisagez de les déplacer vers le haut du CODE (n’incluez pas 5k lignes de JS au-dessus d’eux), et revérifiez le DOM rendu dans votre navigateur de temps à autre.
Bref ma recommandation est claire : dans la section <head> de vos pages HTML, placez les balises SEO plutôt au début, en tout cas avant les tartines de code Javascript que certains placent à cet endroit. Cela garantira vos chances que les balises SEO soient bien comprises par Google. Et faites attention à ce que vous placez dans la section Head, pour éviter qu’une erreur vienne empêcher la prise en compte (entre autres) des balises SEO.
Le JS dans la section <head> est ok, mais à la fin de cette section
Il semble que ce retour ait été surinterprété par certains : cela signifie-t’il qu’il faut déplacer le Javascript plus bas dans la section body ?
Non, a répondu John Mueller sur Twitter : le JS dans la section head est ok, mais c’est plus prudent de mettre les balises importantes avant dans le <head>
« Notamment, il faut se demander ce qui figure dans la zone visible par défaut sur le device utilisé par l’internaute. »
Dans cette phrase vous souhaitez dire « au dessus de la ligne de flottaison » ou « sans avoir à cliquer ou slider » ?
Les deux.
Je fais allusion à ce qui est défini par le viewport et bien sûr à la ligne de flottaison.
En fait Gary Illyes a récemment reprécisé que ce qui compte pour l’indexation c’est la rendition sur mobile (mobile first index oblige). Mais en juin il avait aussi révélé que tout ce qui était visible sur mobile, y compris via des accordéons ou d’autres éléments collapsés, y compris sous la ligne de flottaison est indexé.
Par contre, il y’a toujours une petite différence faite au niveau des poids et du comportement des filtres entre ce qui est au dessus de la ligne de flottaison et en dessous sur le premier écran.
Le filtre « page layout » (alias top heavy) existe encore par exemple…