Skip to content
Orino Docs

Layout missing meta description

What this means

Section titled “What this means”

The check found an Astro layout file in src/layouts/ with no <meta name="description"> tag. Every page that uses this layout will be missing a description, so Google will generate its own snippet from the page body with unpredictable results.

How to fix it

Section titled “How to fix it”

Add a description prop to the layout and render it as a <meta name="description"> tag in the <head>.

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>
    <meta name="description" content={description} />
  </head>
  <body>
    <slot />
  </body>
</html>

Pass a unique description from each page:

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

If you prefer a fallback for pages that do not provide a description:

src/layouts/Layout.astro
---
interface Props {
  title: string
  description?: string
}
const {
  title,
  description = 'Acme - Architecture and interior design across London and the South East.',
} = Astro.props
---
<!doctype html>
<html lang="en-GB">
  <head>
    <title>{title}</title>
    <meta name="description" content={description} />
  </head>
  <body>
    <slot />
  </body>
</html>

The default description covers pages that do not provide one, but per-page descriptions are always better for SEO.

Verify the fix

Section titled “Verify the fix”
Terminal window
curl -s https://example.com/about | grep -i 'meta name.*description'

Re-run the audit:

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