Comment déboguer un texte invalide dans l’en-tête ?

Comment déboguer le code HTML invalide dans Head ?

HTML invalide

Ce tutoriel explique comment utiliser Screaming Frog SEO Spider pour identifier les éléments HTML invalides dans l’en-tête, visualiser les métadonnées susceptibles d’être affectées et résoudre le problème à l’origine de l’erreur.

L’utilisation de HTML valide pour les métadonnées d’une page garantit que les moteurs de recherche, tels que Google, sont en mesure de les utiliser pour indexer les pages individuelles.
Bien que les moteurs de recherche essaient de comprendre le balisage même s’il y a des erreurs, certains éléments de l’en-tête peuvent rendre critique le traitement de l’information par le robot d’indexation.
<>Si des éléments HTML non valides sont utilisés dans l’en-tête (‘ head ‘), Google considère que l’en-tête doit être fermé et commence le corps du texte dans son analyse.

Cela signifie que toute métadonnée apparaissant après l’élément HTML invalide peut être ignorée par Google.

Éléments HTML valides

Le HEAD ne doit contenir que les éléments Html suivants :

  • titre
  • méta
  • lien
  • script
  • style
  • base
  • noscript
  • modèle

D’autres éléments peuvent être à l’origine d’une numérisation et d’une indexation critiques :

  • iframe
  • img
  • svg
  • div
  • noscript contenant un ‘img’.

<> <> En général, il faut également tenir compte du fait que si les éléments du corps précèdent directement l’élément d’en-tête, cela peut affecter toutes les métadonnées de l’en-tête.

Par exemple, une balise <div> hors de propos qui précède l’ouverture de l’exposition. <html> Google ouvrira et fermera automatiquement un <tête> vide, ce qui signifie que toutes les métadonnées se trouveront dans le fichier <corps> et pourrait être ignorée.

Selon les indications de Google, si, malgré ces indications, il est nécessaire d’insérer des éléments “non valides” dans l’en-tête, ceux-ci doivent être insérés après les éléments à prendre en compte par le spider.

Identifiez “HTML invalide”.

Il est difficile de trouver des éléments HTML invalides dans l’en-tête, ou avant l’en-tête, à grande échelle sur un site web, et c’est là que Screaming Frog peut aider à faire le gros du travail.

<> Le Seo Spider signalera toutes les pages contenant des éléments html non valides susceptibles de poser problème, ainsi que toutes les balises méta telles que les titres, les canoniques ou les robots méta qui se trouvent en dehors de l’en-tête.

Recherche de sites web

La première étape est très simple et tout ce que vous avez à faire est d’entrer le domaine ou le sous-domaine à analyser sans avoir à configurer quoi que ce soit dans le Seo spider à l’exception du mode de scan ‘Rendering JS’ pour analyser tous les éléments entrés après le traitement JS.

scansione di un dominio con screaming frog

Onglet “Validation” de l’analyse

Pendant l’analyse, vous pouvez déjà voir les données en “temps réel” ou attendre la fin de l’analyse pour obtenir une image complète des URL avec ce scénario.
L’onglet de référence s’intitule“Validation” et comprend plusieurs filtres :

  • Éléments HTML non valides dans l’en-tête : pages contenant des éléments HTML non valides dans l’en-tête. <> Lorsqu’un élément non valide est utilisé dans l’en-tête, Google prend en compte la fin de l’en-tête de l’élément et ignore tous les éléments qui apparaissent après l’élément non valide. Cela signifie que les éléments d’en-tête critiques apparaissant après l’élément invalide ne seront pas vus.
  • <><>Élémentbody” précédant “html”: Urls qui ont un élément “body” précédant l’ouverture de l’élément “html”. Les navigateurs et les Googlebots supposent automatiquement que l’élément body commence et génèrent un élément head vide avant celui-ci. Cela signifie que l’élément head attendu et ses métadonnées seront vus dans le body et ignorés.
  • <><>”head ” Pas en premier dans l’élément ” html “.: l’élément <tête> doit être le premier élément du code <html>. <> Les navigateurs et Googlebot génèrent automatiquement un élément head s’ils ne le trouvent pas comme premier élément.
  • <> <> Balise “head” manquante: pages dans lesquelles il manque un élément “head” dans le code HTML.
  • <> <> Balises “head” multiples : pages comportant plusieurs éléments “head” en HTML.
  • <>Absence de ” body ” Tag.
  • <>Multiple ” corps ” Tags.
  • Document HTML Plus de 15MB.
La scheda Validation per analisi elementi invalidanti nell'Html head

Comme nous venons de le décrire, l’analyse granulaire se trouve dans l’onglet dédié, tandis que pour une vue macro, vous pouvez surveiller les données dans la barre latérale, qui sera étiquetée “Haute priorité” dans l’onglet “Problème”.

Analisi della Issue Tab per analisi degli elementi non validi inseriti nell'head html

<Tête de débogage>

Une fois que tous les URL concernés par cette criticité ont été découverts, ils peuvent être analysés en profondeur de trois manières :

  • HTML brut : analyse de l’en-tête en HTML brut en cliquant avec le bouton droit de la souris et en choisissant l’option “Voir la source” de la page. Dans ce cas, l’analyse sera biaisée parce qu’il peut y avoir des éléments qui sont insérés avec un traitement javascript.
  • HTML rendu: analyse de la page après le rendu JS.
    Dans ce cas, il suffit d’utiliser la fonction “Inspecter l’élément” de Chrome et de consulter l’onglet “Éléments”.
  • Search Console : vous pouvez également vérifier la présence d’éléments non valides dans l’en-tête en contrôlant les URL à l’aide de la fonction “Inspecteur d’URL” de la Search Console.

Pour confirmer l’importance de ce sujet pour le référencement, voyons un exemple ci-dessous.

<> Le code HTML rendu sur le côté droit semble correct, mais le “Canonical user declared” est ignoré à cause de la balise noscript qui contient une image au-dessus, fermant l’en-tête.

Canonical ignorato da google per elementi html non validi nell'head
Seo Spider Tab