I’ve the following code in an Astro component:
BaseHead.astro
<!-- Schema.org -->
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "LocalBusiness",
"name": "Sociedad Anonima",
"description": "Especialistas en gestión logística, almacenamiento y distribución para comercios, industrias y particulares.",
"image": {`"${url + image}"`},
"address": {
"@type": "PostalAddress",
"streetAddress": "Dirección",
"addressLocality": "Rafaela",
"addressRegion": "SF",
"postalCode": "S2300",
"addressCountry": "AR"
},
"geo": {
"@type": "GeoCoordinates",
"latitude": "-31.205",
"longitude": "-61.415"
},
"url": {"${url}"},
"telephone": "+54-123456789",
"openingHours": "Mo-Fr 09:00-18:00",
"sameAs": [
"https://www.facebook.com/tu-negocio",
"https://www.twitter.com/tu-negocio",
"https://www.instagram.com/tu-negocio"
]
}
</script>
The problem is that the fields “image” and “url” don’t get evaluated by JSX. As a result, nothing change in the values of those fields.
How could I force a JSON field’s value to evaluate JSX (inside {})?
From this issue comment:
const schema = {
"@context": "http://schema.org",
"@type": "LocalBusiness",
name: "Sociedad Anonima",
// ...
}
---
<script type="application/ld+json" set:html={JSON.stringify(schema)}></script>