Skip to content
Orino Docs

Layout missing title element

What this means

Section titled “What this means”

In Astro, layout files in src/layouts/ define the <head> content shared across pages. The check found a layout file with no <title> element. Every page that uses this layout will be missing a title tag, which is the most important on-page SEO element.

How to fix it

Section titled “How to fix it”

Add a <title> element to the layout’s <head>. Accept the title as a prop so each page can provide a unique value.

src/layouts/Layout.astro
---
interface Props {
  title: string
  description?: string
}
const { title, description } = Astro.props
---
<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    {description && <meta name="description" content={description} />}
  </head>
  <body>
    <slot />
  </body>
</html>

Pages then pass the title as a prop:

src/pages/about.astro
---
import Layout from '../layouts/Layout.astro'
---
<Layout title="About | Acme" description="Learn about our studio and approach.">
  <main>
    <h1>About</h1>
  </main>
</Layout>

If you want to avoid repeating the brand name on every page, format it inside the layout:

src/layouts/Layout.astro
---
interface Props {
  title: string
  description?: string
}
const { title, description } = Astro.props
const pageTitle = `${title} | Acme`
---
<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{pageTitle}</title>
    {description && <meta name="description" content={description} />}
  </head>
  <body>
    <slot />
  </body>
</html>

Pages then only need to pass the short title: <Layout title="About">.

Verify the fix

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

Re-run the audit:

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