Skip to content
Orino Docs

Root layout missing svelte:head

What this means

Section titled “What this means”

In SvelteKit, src/routes/+layout.svelte is the root layout that wraps every page. Adding a <svelte:head> block here is the correct place to set site-wide default metadata: a fallback description, Open Graph defaults, and the canonical charset and viewport.

The check found that src/routes/+layout.svelte exists but has no <svelte:head> block.

How to fix it

Section titled “How to fix it”

Add a <svelte:head> block to src/routes/+layout.svelte with your site-wide defaults. Individual pages can still add their own <svelte:head> to override these values.

src/routes/+layout.svelte
<svelte:head>
  <meta name="description" content="Default site description. Override this in each page." />
  <meta property="og:image" content="https://example.com/og.png" />
  <meta property="og:type" content="website" />
</svelte:head>


<slot />

A more complete root layout with navigation might look like:

src/routes/+layout.svelte
<script>
  import Navigation from '$lib/components/Navigation.svelte'
</script>


<svelte:head>
  <meta name="description" content="Acme - Architecture and interior design across London." />
  <meta property="og:site_name" content="Acme" />
  <meta property="og:image" content="https://example.com/og.png" />
  <meta property="og:type" content="website" />
</svelte:head>


<Navigation />
<slot />

Each page then adds its own title and description:

src/routes/about/+page.svelte
<svelte:head>
  <title>About | Acme</title>
  <meta name="description" content="Learn about our studio and approach." />
  <meta property="og:title" content="About | Acme" />
</svelte:head>


<main>
  <h1>About</h1>
</main>

Verify the fix

Section titled “Verify the fix”
Terminal window
curl -s https://example.com | grep -i 'og:image'

Re-run the audit to confirm:

Terminal window
npx orino audit .
Section titled “Related fixes”