¿Cómo depurar HTML no válido en el encabezado?

¿Cómo depurar HTML no válido en Head?

HTML no válido

Este tutorial explica cómo utilizar la Araña SEO de Screaming Frog para identificar elementos HTML no válidos en el encabezado, visualizar qué metadatos pueden estar afectados negativamente y cómo solucionar el problema que está causando el error.

Utilizar HTML válido para los metadatos de una página garantiza que los motores de búsqueda, como Google, puedan utilizarlo para indexar páginas individuales.
Aunque los Motores de Búsqueda intentarán comprender el marcado aunque haya errores, algunos elementos del encabezado pueden causar criticidad en el tratamiento de la información por parte de la araña.
<>Si se utilizan elementos HTML no válidos dentro de la cabecera (‘ head ‘), Google considerará que la cabecera debe cerrarse e iniciará el cuerpo en su análisis.

Esto significa que cualquier metadato que aparezca después del elemento HTML no válido puede ser ignorado por Google.

Elementos HTML válidos

El HEAD sólo debe contener los siguientes elementos Html:

  • título
  • meta
  • enlace
  • guión
  • estilo
  • base
  • noscript
  • plantilla

Otros elementos podrían provocar una exploración e indexación críticas:

  • iframe
  • img
  • svg
  • div
  • noscript que contenga un ‘img’.

<> <> En general, también hay que tener en cuenta que si los elementos del cuerpo preceden directamente al elemento de la cabecera, esto puede afectar a todos los metadatos de la cabecera.

Por ejemplo, una etiqueta <div> fuera de lugar que precede a la apertura del <html> hará que Google abra y cierre automáticamente un elemento <cabeza> vacío, lo que significa que todos los metadatos estarán en el archivo <cuerpo> y potencialmente podría ignorarse.

Según las indicaciones de Google, si, a pesar de estas indicaciones, es necesario insertar elementos “no válidos” en la cabecera, éstos deben insertarse después de los elementos que la araña debe tener en cuenta.

Identificar ‘HTML no válido

Encontrar elementos HTML no válidos en la cabecera, o antes de ella, a gran escala en un sitio web es difícil, y aquí es donde Screaming Frog puede ayudar a hacer la mayor parte del trabajo.

<> El Seo Spider marcará cualquier página con elementos html no válidos que puedan ser problemáticos y cualquier metaetiqueta como títulos, canónicos o meta robots que estén fuera de la cabecera.

Rastreo del sitio web

El primer paso es muy sencillo y basta con introducir el dominio o subdominio a analizar, sin tener que configurar nada en la araña Seo, salvo el modo de análisis “Rendering JS” para analizar los elementos introducidos tras el procesamiento JS.

scansione di un dominio con screaming frog

Pestaña “Validación” del análisis

Durante la exploración, ya puedes ver los datos en “tiempo real” o esperar hasta el final de la exploración para obtener una imagen completa de las URL con este escenario.
La pestaña de referencia se llama“Validación” e incluye varios filtros:

  • Elementos HTML no válidos en el encabezado: páginas con elementos HTML no válidos en el encabezado. <> Cuando se utiliza un elemento no válido en la cabecera, Google asume el final de la cabecera del elemento e ignora cualquier elemento que aparezca después del elemento no válido. Esto significa que los elementos críticos de la cabecera que aparezcan después del elemento no válido no se verán.
  • <><>Elemento ” body ” que precede a ” html “: Urls que tienen un elemento body que precede a la apertura del elemento html. Los navegadores y Googlebots asumen automáticamente el comienzo del body y generan un elemento head vacío antes de él. Esto significa que el elemento cabeza esperado y sus metadatos se verán en el cuerpo y se ignorarán.
  • <><>” head ” No es lo primero en ” html ” Elemento: el elemento <cabeza> debe ser el primer elemento del código <html>. <> Los navegadores y Googlebot generarán automáticamente un elemento head si no lo encuentra como primer elemento.
  • <> <> Falta la etiqueta ” head “: páginas a las que les falta un elemento head en el HTML.
  • <> <> Etiquetas ” head “ múltiples: páginas con múltiples elementos head en HTML.
  • <>Falta ” cuerpo ” Etiqueta.
  • <>Múltiple ” cuerpo ” Etiquetas.
  • Documento HTML de más de 15MB.
La scheda Validation per analisi elementi invalidanti nell'Html head

Como acabamos de describir, el análisis granular se encuentra en la pestaña dedicada, mientras que para una visión macro puedes controlar los datos en la barra lateral, que estará etiquetada como Alta Prioridad en la pestaña “Asunto”.

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

<Cabezal de depuración>

Una vez descubiertas todas las URL afectadas por esta criticidad, se pueden analizar a fondo de tres formas:

  • HTML sin procesar: analizar la Cabeza en HTML sin procesar haciendo clic con el botón derecho del ratón y eligiendo la opción “Ver fuente” de la página. En este caso, el análisis estará sesgado porque puede haber elementos que se inserten con procesamiento javascript.
  • HTML renderizado: análisis de la página tras la renderización JS.
    En este caso, bastará con utilizar “Inspeccionar elemento” de Chrome y consultar la pestaña “Elementos”.
  • Search Console: también puedes comprobar si hay elementos no válidos en el Head comprobando las urls mediante la función “Inspector de URL” de Search Console.

Para confirmar lo importante que es este tema para el SEO, veamos un ejemplo a continuación.

<> El HTML renderizado de la parte derecha parece correcto, pero el “Usuario canónico declarado” se ignora debido a la etiqueta noscript que contiene una imagen encima, cerrando la cabecera.

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