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.
Thank You For Your Vote!
Sorry You have Already Voted!
