Variable not rendering in script tag with JSON data

[CovertCode]

So I was adding schema markup for my blog post but when I tried to pass data like post url and author name then I was unable to do that. In discord support I got to know about set:html but in official docs the mention method of using set:html didn't worked.

Here's part of schema script:

<script type="application/ld+json">
    "@context": "https://schema.org/",
    "@type": "BlogPosting",
    "author": [
{
  "@type": "Person",
  "name": "Willow Lane",
  "url": "https://www.example.com/staff/willow_lane"
}
],
    "dateModified": "2023-01-19T18:30:00.000Z",
    "mainEntityOfPage": {this-must-be-post-url},

  </script>

So to use set:html properly in this case was:

<script type="application/ld+json" set:html={`
    "@context": "https://schema.org/",
    "@type": "BlogPosting",
    "author": [
{
  "@type": "Person",
  "name": "Willow Lane",
  "url": "https://www.example.com/staff/willow_lane"
}
],
    "dateModified": "2023-01-19T18:30:00.000Z",
    "mainEntityOfPage": "${Astro.url.pathname}"
}` />

Had to treat whole script tag data under template literal.

[delucis]

Hi @CovertCode! Where was the example in docs that didn’t work for you?

[BryceRussell]

I think it would be good to have an example of this in docs. Using JSON-LD inside of a <script> tag is common for SEO purposes and I have seen confusion about this a couple of times in support, mostly because: 1) You can't use JSX / JSON inside a <script> tag because it expects JavaScript 2) It is not immediately obvious that set:html would work on a <script> tag because it expects JavaScript and it has HTML in the name 3) Newer users might not know about set:html

Also the above example could be improved using JSON.stringify:

<script type="application/ld+json" set:html={JSON.stringify({
  "@context": "https://schema.org/",
  ...
})}/>

Is this worth documenting? Can I make a PR?

[sarah11918]

Hey @BryceRussell! So, I was curious and I checked to see whether our Directives Reference page (in Reference) showed any examples of set:html in a script tag specifically... and it doesn't!

So, yes, I'd say let's add an example of this! At the very least, maybe on the Template Directives reference page? Do you have any other idea of where it would be more/most helpful? Either thinking about what someone might be trying to do, or where a reader might think to look when they encounter this problem?

[BryceRussell]

Hey @sarah11918, I agree, the template Template Directives reference page looks like the best place for an example.

The only other section that might be more searchable is the "Common Script Patterns" section, but it might not fit that section very well since it talks about client side patterns.