Google habla sobre HTML fuente versus HTML renderizado

En un vídeo de Search Central Lightning Talks, el ingeniero de relaciones con desarrolladores de Google Martín Splitt explica cómo el HTML fuente puede diferir del HTML renderizado y cómo esto puede afectar su SEO.

Él pregunta, al comienzo del video: ¿Alguna vez inspeccionaste la fuente de un sitio web y te preguntaste por qué se ve diferente de lo que ves en tu navegador cuando abres el mismo sitio web?

O tal vez haya oído hablar del HTML renderizado o del DOM y no sepa en qué se diferencian de lo que ve en la fuente de visualización, por ejemplo, entonces este vídeo es para usted.

Recomendamos encarecidamente escuchar este podcast si le importa en absoluto cuánto pueden afectar su HTML fuente y su código HTML renderizado a sus esfuerzos de SEO.

Martín 0:00
¿Alguna vez inspeccionaste la fuente de un sitio web y te preguntaste por qué se ve diferente de lo que ves en tu navegador cuando abres el mismo sitio web? O tal vez haya oído hablar del HTML renderizado o del DOM y no sepa en qué se diferencian de lo que ve en la fuente de visualización, por ejemplo, entonces este vídeo es para usted. En este vídeo, me gustaría llevarte a un viaje detrás de escena de tu navegador. Así que entremos.

Martín 00:26
Para entender lo que sucede entre un servidor que envía algo de HTML a su navegador y el navegador que le muestra el sitio web en todo su esplendor, debemos comenzar en el momento en que presiona regresar en la barra de direcciones y le pide al servidor en algún lugar de Internet que regalarle un sitio web. El primer paso para incluir un sitio web en su navegador es enviar una solicitud HTTP al servidor que aloja el sitio web.

Una vez que el servidor recibe la solicitud, elige cómo responder a ella. Eso puede significar ejecutar un programa como un script PHP o un programa Java, o lo que sea, o simplemente devolver el contenido de un archivo. Para este video, omitiremos qué hace exactamente el servidor y nos centraremos en el hecho de que el servidor generalmente comienza a enviar una gran cantidad de HTML al navegador. Mucha gente piensa que el HTML enviado desde el servidor es el mismo que el sitio web que verá en su navegador. Pero eso no es realmente exacto.

En cambio, podemos decir que lo que ves en el navegador es un plato y el HTML que se envió es la receta. El navegador necesita preparar o cocinar el plato según la receta que recibió del servidor. Convierte el HTML en una serie de elementos visuales y, a veces, interactivos, que luego aparecen en la pantalla. La parte interesante es lo que sucede entre el HTML y lo que ves en tu navegador. Esto se llama renderizado. Miremos un poco más de cerca el renderizado para ver qué sucede entre el principio, el HTML que proviene del servidor, y el final, el sitio web interactivo con el que usted interactúa.

Leer:  Autoridad de dominio: ¿Qué es y por qué necesita saberlo?

Para comprender la diferencia entre el HTML que recibimos del servidor, el llamado HTML fuente, el HTML renderizado y el DOM, debemos observar más de cerca este proceso de renderizado. El proceso de renderizado consta de una serie de pasos que comienzan con un HTML fuente. Y si se incluye la información de estilo en el CSS, el navegador comienza analizando el HTML fuente y, si está disponible, cualquier CSS que se encuentre dentro, lo que crea dos estructuras en forma de árbol llamadas Modelo de objetos de documento, DOM para abreviar, y modelo de objetos CSS. CSSOM para abreviar.

Para nosotros, el DOM es el más importante de los dos modelos, por lo que nos centraremos en él de ahora en adelante. Para nuestro sitio web, por ejemplo, el navegador crearía el siguiente árbol DOM. El navegador necesita este árbol para identificar elementos individuales del sitio web y su relación con otros elementos. Como por ejemplo, qué texto pertenece al encabezado y cuál al párrafo o qué archivo es la fuente de esta imagen. Luego, el navegador toma el DOM y el CSSOM y descubre cómo encajar todo esto en la ventana del navegador. Esto se llama diseño y crea un árbol de renderizado. El árbol de renderizado básicamente contiene los tamaños y posiciones en la pantalla para cada uno de los elementos del DOM. El navegador utiliza este árbol para pintar los píxeles reales que componen lo que vemos en la ventana de nuestro navegador. Es importante entender que una vez que el navegador nos muestra el sitio web, puede utilizar JavaScript para permitirnos interactuar con el sitio web.

Luego, JavaScript podría cambiar el DOM agregando, cambiando o eliminando elementos en el árbol. Por ejemplo, cuando hago clic en este botón, agrega una imagen al DOM y, por lo tanto, al sitio web en la pantalla. Aquí podemos ver esto en acción. A la izquierda, ve el sitio web interactivo. A la derecha, ve una representación del DOM que utiliza el navegador para este sitio web. Cada vez que se hace clic en el botón, JavaScript agrega una nueva imagen al árbol DOM y el navegador la representa. En el ejemplo anterior, el árbol DOM puede verse diferente en cualquier momento, dependiendo de lo que sucedió antes.

Leer:  La guía definitiva para palabras clave de cola larga

El DOM en sí solo vive en la memoria del navegador y no es visible per se, pero podemos representarlo de diferentes formas. Una de esas formas es la vista de árbol interactiva que vimos en las herramientas de desarrollo del navegador en el lado derecho del video anterior. Alternativamente, podríamos volver a convertir el árbol DOM en HTML. A esto lo llamamos HTML renderizado.

Cuando volvemos a convertir el árbol DOM en HTML renderizado, es posible que obtengamos resultados diferentes dependiendo de lo que sucedió antes con el árbol DOM. Por ejemplo, el HTML renderizado del sitio web de ejemplo anterior es exactamente el mismo que el HTML de origen, siempre y cuando no se haga clic en el botón.

Al hacer clic en el botón, JavaScript se ejecutará y cambiará el DOM y, a su vez, el HTML renderizado. Ahora, quizás ya te preguntes, ¿qué es lo que veo cuando hago clic en Ver código fuente en mi navegador? Bueno, ¿es el HTML fuente o es el HTML renderizado? Hay tres formas de ver el HTML fuente proveniente del servidor. La primera, y probablemente la más conocida, es hacer clic derecho en una página web y seleccionar Ver código fuente o escribir dos puntos de vista del guión delante de la URL. Eso le muestra el HTML fuente. Alternativamente, también puede acceder a las herramientas de desarrollo de su navegador, seleccionar la pestaña Fuentes y ver el HTML fuente allí.

Aquí puede ver que el lado derecho muestra el HTML original sin las imágenes que están actualmente visibles en el sitio web. Una tercera forma es utilizar la pestaña de red en las herramientas de desarrollo del navegador, donde también puede ver el HTML que se envió desde el servidor. ¿Pero qué opciones tengo si queremos ver qué hay en el DOM?

Bueno, una vez más, las herramientas de desarrollo del navegador nos tienen cubiertos. Las herramientas de desarrollo contienen una representación en forma de árbol del DOM que podemos explorar e interactuar. Esto lo encontramos en la pestaña Elementos en Chrome. Puede notar que, a diferencia de los otros paneles de herramientas de desarrollo y la fuente de visualización, esto nos muestra el contenido DOM actual, incluidas las imágenes agregadas por JavaScript. Si quisiéramos, podemos volver a convertir el DOM en HTML.

Leer:  Google simplifica las clasificaciones de informes de Search Console

Esto puede ser bastante complejo, gracias a cosas como Shadow DOM o iframes de origen cruzado. Pero para sitios web más simples, puede obtener el HTML renderizado ingresando a la Consola de herramientas de desarrollo y ejecutando este fragmento de JavaScript. Nuevamente, tenga en cuenta que esto no siempre funciona, especialmente para sitios web más complejos. Para la depuración, le recomiendo que utilice la herramienta de inspección de URL en Search Console para obtener el HTML renderizado que utiliza la Búsqueda de Google para indexar una página.

Muy bien, fue un gran viaje. Resumamos lo que aprendimos hoy.

Comenzamos con un HTML fuente, ese es el HTML que un servidor envía a nuestro navegador cuando abrimos una página web. Luego aprendimos que el navegador convierte este HTML en DOM. Se trata de una representación interactiva elemento por elemento del sitio web construida a partir del HTML fuente. El DOM puede cambiar ya que JavaScript puede modificarlo mientras la página se carga, tras la interacción del usuario u otros eventos mientras está abierta en el navegador.

Y luego, por último, pero no menos importante, identificamos el HTML renderizado como una instantánea de ese DOM convertido nuevamente en HTML. El HTML renderizado refleja el contenido DOM de la página en el momento en que se tomó la instantánea. Para ver el HTML renderizado, puede utilizar la herramienta de inspección de URL en Google Search Console. Ahora hemos analizado cuál es el HTML fuente, el HTML renderizado y el DOM, y hemos explorado qué herramientas podría utilizar para depurar problemas en sus sitios web. ¿Qué herramientas está utilizando para depurar problemas en sus sitios web?

Háganos saber en los comentarios a continuación. Y también, muchas gracias por mirar, dale me gusta y suscríbete para estar al tanto de nuestro mejor y más reciente contenido sobre la búsqueda de Google. Muchas gracias. Y adiós. ¿Quieres más travesuras técnicas de SEO? Visíteme en el podcast Search Off the Record, donde hablamos sobre todo lo relacionado con la búsqueda de Google, vamos detrás de escena y, quién sabe, tal vez hablemos de mi amor por JavaScript.

¡Hurra! Únase a mí, a Martin y al centro de relaciones de Búsqueda de Google y visítenos dondequiera que descargue podcasts.

Nuevas Publicaciones:

Recomendamos