Custom Headers


As explained in user guide, pages can have custom headers on the settings section of the page

But sometimes we would like to add dynamic title and dynamic JSON-LD after fetching data,
to do so, we just need to use some svelte features inside a component inside that page.

Add custom title

<script>
 let dynamicTitle = "Dynamic Title"
</script>

<svelte:head>
  <title>{dynamicTitle}</title>
</svelte:head>


Add custom JSON-LD

<script>
 let jsonld = {
   "@context": "http://schema.org",
   "@type": "...",
   "...": "..."
  };
 jsonld = JSON.stringify(jsonld);
</script>

<svelte:head>
 {@html `<script type="application/ld+json">${jsonld}</script>`}
</svelte:head>