Estoy tratando de completar dinámicamente el esquema en las publicaciones del blog de mi empresa. La mayoría de las cosas funcionan bien, pero las URL, por alguna razón, tienen caracteres de escape detrás de cada /. Los ejemplos se indican con '**' a continuación en el marcado de esquema
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BlogPosting", "headline": "HHHunts Commitment To RVA", "image": "", "author": { "@type": "Organization", "name": "HHHunt" "url": "https://hhhunt.com" }, "publisher": { "@type": "Organization", "name": "HHHunt", "logo": { "@type": "ImageObject", **"url": "https:\/\/assets-global.website-files.com\/61d6f3d648b8c96670b238ab\/61d86f26213077625ab3a90e_logo-130.png"** } }, "datePublished": "2022-03-28", "articleBody": "When ... ", // shortened **"thumbnailUrl": "https:\/\/assets-global.website-files.com\/61d6f3d648b8c989b9b238c0\/624311d33025d92e76fb34b9_Habitat-for-Humaity-(2).jpg",** "timeRequired": "PT3M", "description": "Growing up in Richmond, VA, Harry H. Hunt, III has always held a special place in heart for RVA and made a commitment to supporting and investing in the region.", } </script>Mi código para reemplazar los caracteres de escape es:
function() { var postUrl = document.getElementsByClassName('schema-blog-image')[0].innerText; var cleanPostUrl = postUrl.replace(/[\\]/g,"") return cleanPostUrl; }donde .schema-blog-image es el selector de clase para la imagen destacada del blog.
En los campos de 'url' anteriores, pude obtener la URL sin problemas usando la variable JavaScript de Google Tag Manager para obtener la fuente de la imagen del HTML usando el mismo nombre de clase. Sin embargo, cuando traté de usar la función anterior usando el mismo nombre de clase pero para "imagen", devuelve una cadena vacía (como se ve arriba).
Algunas búsquedas en Google me llevaron a intentar return JSON.stringify(postUrl) (mientras eliminaba la var cleanPostUrl), pero eso solo me da \x22\x22 como resultado.
La función anterior funcionó perfectamente cuando la probé en el editor W3 Schools Try It Yourself , por lo que no estoy seguro de qué más hacer para que la expresión regular funcione.
Nada de esto reemplazó los caracteres de escape.
prueba esto
var cleanPostUrl= JSON.stringify(postUrl); var data = JSON.parse(cleanPostUrl);Entonces, lo descubrí siguiendo una guía que encontré en Moz.com
Así es como se ve el código de la etiqueta ahora:
<script> (function(){ var data = { "@context": "https://schema.org", "@type": "BlogPosting", "headline": {{Post Title}}, "image": {{Post Image}}, "author": { "@type": "Organization", "name": "HHHunt", "url": "https://hhhunt.com" }, "publisher": { "@type": "Organization", "name": "HHHunt", "logo": { "@type": "ImageObject", "url": {{Logo}} }, }, "datePublished": {{ISO Date}}, "articleBody": {{Post Content}}, "thumbnailUrl": {{Post Image}}, "timeRequired": "PT" + {{Duration}} + "M", // I had to adjust this line to allow a string concat using a variable "description": {{Meta Description}}, } var script = document.createElement('script'); script.type = "application/ld+json"; script.innerHTML = JSON.stringify(data); document.getElementsByTagName('footer')[0].appendChild(script); // write the script to my <footer> tag })(document); </script>Mis variables son solo los atributos de elementos sin procesar (por ejemplo, la imagen se obtiene mediante el uso de una variable de elemento DOM, apuntando al selector de CSS que proporcioné y usando el atributo src para obtener la URL). La diferencia ahora es que mi esquema ahora está envuelto dentro de una variable dentro de una función, donde ahora puedo pasar todas estas variables como cadenas verdaderas. A partir de ahí, podemos crear un script var y usarlo para crear un nuevo elemento HTML de script con las propiedades que necesito e insertarlo donde lo necesito.
Como pude usar estas variables como cadenas verdaderas dentro de la variable 'datos', ya no necesito preocuparme por los caracteres de escape.
¡Espero que esto ayude a alguien más!