Lo que hacemos en el DOM fantasma

[ad_1]

El SEO técnico puede ser un poco aterrador. Hay colmillos

Para derrotar a los monstruos técnicos del SEO, debe aventurarse en cuevas y castillos basados en códigos, a veces solo con una estaca de madera en la mano.

Para esta aventura, recluté un desarrollador experimentado de SEO y goth profesional Dave Smart brillar un poco de luz en una de las secciones más aterradoras del SEO técnico: el Shadow DOM.

¿Por qué es importante ShadowDOM?

Como la mayoría de las cosas, solo te importan los monstruos de SEO que pueden mostrar sus cabezas en tu mundo.

Me he sumergido bastante en el abismo de las estadísticas de renderizado, angulares y de rendimiento, pero esto … estas son las catacumbas de las referencias técnicas, mi amigo.

Descubrirá un valor práctico al aprender más sobre el DOM fantasma si / cuando trabaja con un sitio que utiliza componentes web o marcos JavaScript.

O estás viendo una fuente de página que se parece a uno de esos esqueletos de miedo.

Te importará porque Shadow DOM está acostumbrado a extraer contenido de él antes de desaparecer en el reino inferior.

"Cuando Googlebot muestra una página, aplana el contenido DOM y el contenido DOM ligero. Esto significa que Googlebot solo puede ver el contenido visible en el código HTML representado … Si el contenido no es visible en el código HTML representado, Googlebot no podrá indexarlo. "- Comprender los conceptos básicos de JavaScript SEO, encontrar desarrolladores

Reformularemos eso y planificaremos un poco más fuerte para aquellos que están en la parte posterior del castillo:

Si nuestro contenido no está indexado, nuestro contenido no se puede clasificar.

Mazmorras y departamentos de ultramar

Antes de ingresar a las criptas, debe saber qué es un DOM.

DOM es un acrónimo de Document Object Model.

El DOM se crea para cada solicitud de página.

A veces, cuando la construcción del DOM sale mal, la página no parece correcta.

En otras ocasiones, se ensambla lentamente, causando el pánico de un colega demasiado preocupado pero bien intencionado.

Veamos el proceso que transmuta HTML al DOM:

Se realiza una solicitud.
El solicitante recibe una respuesta HTML inicial (puede verla haciendo clic derecho y seleccionando Ver fuente de la página)
El solicitante reúne tantas páginas como sea posible y pone en cola los recursos necesarios para representar la página.
Nota: Google se refiere a la salida de este proceso como "DOM analizado".
El HTML (también conocido como DOM rastreado) se transmite a través de un DOMparser, ya sea en el navegador o mediante el servicio de representación web.
El HTML y los recursos se convierten en un documento DOM, una representación del contenido de la página.

¿Qué hay en el DOM?

HTML está representado en el DOM por una serie de objetos anidados llamados nodos.

Cada nodo puede contener contenido o nodos secundarios.

Es como la relación entre los mapas del sitio y los índices del mapa del sitio.

La mayoría de los navegadores modernos están optimizados para 1.500 nudos.

Esta colección laberíntica de nudos se conoce como el árbol DOM.

Podemos manipular e interactuar con un árbol DOM.

Puede verse así:

Exponga los nudos (piense en los menús de hamburguesas y los acordeones).
Modificación de contenido (formularios).
Ocultar nodos (eliminar un banner publicitario).

Este es un concepto importante porque es este DOM, y no el HTML inicial que define lo que ves en el navegador, y por extensión, los motores de búsqueda que muestran las páginas (como Google). te indexará y clasificará.

¿Cómo puedo ver el DOM?

Chrome devTools te ofrece una forma excelente y fácil de usar para ver el árbol DOM.

Vaya a la página que desea ver.
Golpeado Comando + Opción + C (Mac) donde Control + Shift + C (Windows, Linux, Chrome OS). Esto abrirá devTools al panel de elementos y podrá ver los elementos de su página, todos anidados.
Desplácese sobre un elemento en el panel para resaltarlo en la página.
Mire la parte inferior de la consola para ver cómo este elemento está anidado en el árbol DOM

Ver el árbol DOM en Search Console

Para ver todo el árbol DOM y su estructura a la vez, solo lanza un poco de magia en la consola de las herramientas de desarrollo.

Abra la consola de Dev Tools con Comando + Opción + J (Mac) o Control + Shift + J (Windows, Linux, Chrome OS) para abrir la consola
Copia y pega el encantamiento console.log (document.documentElement.childNodes).
Presione enter.
Haz clic en una flecha. ¡Has desarrollado este nudo! Los nodos pueden contener su propio contenido y sus propios hijos. Si hace clic en un texto de anclaje azul en el árbol DOM, pasará a mostrar el nodo en los paneles Elemento de devTools.

¡Puedes repetir este proceso una y otra vez, explorando todas las ramas y cajas de botín que tengas, como has aprendido a cruzar el DOM!

Si estas cosas aterradoras son un poco más de lo que esperabas, está bien.

Realmente no está destinado a ser forraje humano.

Estos son los esqueletos y las partes blandas que forman una página.

Es el contenido, la estructura y el estilo y cómo se relacionan y se aplican entre sí.

Luz contra sombra

Si ha seguido los pasos para inspeccionar el DOM, ha visto el "DOM ligero".

Solo se llama un DOM ligero cuando hay una sombra involucrada.

Un DOM fantasma es un nuevo árbol DOM que se adjunta a un elemento, su host fantasma, en el DOM ligero.

Así es, así como una luz puede proyectar muchas sombras, un DOM ligero puede involucrar múltiples DOMs de sombra.

¿Cómo se usa el DOM fantasma?

Las sombras DOM son realmente útiles.

Muchos navegadores los usan para widgets nativos, como