Meta description missing

What this means

When a page has no meta description, Google picks a snippet from the page body. This auto-generated text is often a navigation element, a cookie notice, or a sentence fragment that has nothing to do with what the page is about. You lose control of the text that appears under your title in search results, which directly affects whether people click through.

The meta description is not a direct ranking factor, but it is a conversion factor. A well-written description increases click-through rate.

How to fix it

Next.js App Router

Add a description to the metadata export in your root layout or page file.

export const metadata = {
  title: 'My Site',
  description: 'One or two sentences describing what this site is about and who it is for.',
}

For per-page descriptions:

export const metadata = {
  title: 'About',
  description: 'We build accessible web applications for financial services clients in the UK.',
}

Next.js Pages Router

Add a <meta name="description"> inside <Head> on each page.

import Head from 'next/head'

export default function About() {
  return (
    <>
      <Head>
        <title>About | My Site</title>
        <meta name="description" content="We build accessible web applications for financial services clients in the UK." />
      </Head>
      <main>Content</main>
    </>
  )
}

You can also set a site-wide default in _app.tsx, but per-page overrides are better for SEO.

SvelteKit

<svelte:head>
  <title>About | My Site</title>
  <meta name="description" content="We build accessible web applications for financial services clients in the UK." />
</svelte:head>

<main>Content</main>

Nuxt

<script setup>
useHead({
  title: 'About | My Site',
  meta: [
    { name: 'description', content: 'We build accessible web applications for financial services clients in the UK.' },
  ],
})
</script>

Or with useSeoMeta for a cleaner API:

<script setup>
useSeoMeta({
  title: 'About | My Site',
  description: 'We build accessible web applications for financial services clients in the UK.',
})
</script>

Astro

Add a description prop to your layout and render it as a <meta> tag.

---
interface Props {
  title: string
  description: string
}
const { title, description } = Astro.props
---
<!doctype html>
<html lang="en-GB">
  <head>
    <title>{title}</title>
    <meta name="description" content={description} />
  </head>
  <body><slot /></body>
</html>

---
import Layout from '../layouts/Layout.astro'
---
<Layout
  title="About | My Site"
  description="We build accessible web applications for financial services clients in the UK."
>
  <main>Content</main>
</Layout>

Plain HTML

<head>
  <title>About | My Site</title>
  <meta name="description" content="We build accessible web applications for financial services clients in the UK." />
</head>

Verify the fix

curl -s https://example.com | grep -i 'meta name.*description'

Re-run the audit to confirm:

npx orino audit https://example.com