He visto varias publicaciones en los √ļltimos meses sobre las vistas previas de enlaces de YouTube que no funcionan, y hoy encontr√© el problema yo mismo, as√≠ que decid√≠ investigar y averiguar qu√© estaba pasando. En cuanto a m√≠, tengo experiencia t√©cnica en inform√°tica, pero no estoy usando nada como el c√≥digo fuente para hacer esta investigaci√≥n. Con algunos conocimientos de inform√°tica, deber√≠a poder seguir lo que hice e incluso replicar los hallazgos a continuaci√≥n.

Para hacer esta investigación, comencé a investigar cómo funciona normalmente la vista previa del enlace de WhatsApp. Consulté esta respuesta en el StackOverFlow para aprender sobre los conceptos básicos y creé un archivo html simple en un sitio web personal para verificar que funcionaba, lo cual funcionó bien.

Luego usé `curl` para descargar el html detrás de un video de youtube y comencé a investigar. (Todos los siguientes comandos se ejecutaron en un servidor ubuntu linux):

curl https://www.youtube.com/watch?v=dQw4w9WgXcQ> yt.html
wc yt.html
67 5062 669732 yt.html

Archivos HTML muy pesados en WhatsApp

Lo primero que not√© es que el html es bastante grande, ¬°m√°s de 650 kb, o aproximadamente 2/3 de megabyte! Tambi√©n not√© que el tama√Īo cambiaba en unos pocos bytes cada vez que repet√≠a esto, por lo que Google no ofrece el mismo contenido cada vez. Inmediatamente sospech√© que tal vez el gran tama√Īo del html estaba causando el problema; tal vez WhatsApp no ‚Äč‚Äčestaba descargando tantos datos para crear una vista previa del enlace.

Para probar esta hip√≥tesis, tom√© el peque√Īo archivo de prueba que hab√≠a creado y agregu√© un mont√≥n de Lorem Ipsum al cuerpo del archivo (agregu√© cientos de l√≠neas de Lorem Ipsum) y verifiqu√©, y solo ten√≠a alrededor de 60k. As√≠ que volv√≠, hice l√≠neas megalargas de Lorem Ipsum y las copi√© hasta que tuve un tama√Īo total de un megabyte. Luego prob√© las vistas previas de enlaces nuevamente usando este archivo grande. Para mi sorpresa, ¬°la vista previa del enlace a√ļn funcionaba! As√≠ que no era el tama√Īo del archivo (pero volveremos a esto m√°s adelante).

Javascript en el cuerpo del HTML

Empecé a mirar el html del archivo en sí. Claramente fue generado por máquina con líneas muy largas, así que para tener una idea del archivo, lo limpié un poco dividiendo cada conjunto de etiquetas en su propia línea. Lo que noté es que hay mucho JavaScript incrustado directamente en el propio html. Como, cientos de kilobytes de JavaScript. Parece una locura, pero eso es lo que vi. Así que eliminé Lorem Ipsum, copié un montón de JS del HTML de YouTube en mi archivo de prueba y lo probé nuevamente. Pero una vez más, la vista previa del enlace se procesó bien. Entonces tampoco fue el JS.

Error en el código de Youtube

En mi página de prueba con el megabyte de Lorem Ipsum, los metadatos que busca WhatsApp estaban en la parte superior de la página, en el elemento <head>. Pero en el HTML de YouTube, las metaetiquetas estaban en el cuerpo. En mi limitada experiencia, las etiquetas <meta> en el cuerpo no parecían correctas. Así que lo busqué. De acuerdo con esta respuesta sobre stackoverflow, las etiquetas <meta> solo se permiten en el elemento <head>, y no en el elemento <body>.

Para verificar que este era realmente el problema, modifiqué mi página de prueba, eliminé todo el contenido de Lorem Ipsum y moví las etiquetas <meta> del <head> al <body> de la página HTML. Y efectivamente, esto hizo que la vista previa del enlace de WhatsApp dejara de funcionar nuevamente. Así que ahí lo tenemos: YouTube está produciendo HTML no válido y esto hace que las vistas previas de los enlaces no funcionen correctamente. Se sabe que Google ignora los estándares a veces, aunque esto parece más un error tonto que una elección explícita.

TL; DR: YouTube est√° produciendo HTML no v√°lido con etiquetas <meta> en <body> en lugar de <head> y esto hace que las vistas previas del enlace de WhatsApp no ‚Äč‚Äčfuncionen correctamente para YouTube.

0 - 0

Thank You For Your Vote!

Sorry You have Already Voted!