Skip to content

_app.tsx missing Head component

What this means

In the Next.js Pages Router, pages/_app.tsx wraps every page. It is the right place to set site-wide default metadata: the viewport tag, a default description, and default Open Graph tags that apply to all pages unless a specific page overrides them.

The check found that _app.tsx exists but does not import or use the <Head> component from next/head.

How to fix it

Import Head from next/head and add default metadata tags inside it. Pages that need different values can still override them with their own <Head>. Next.js merges and deduplicates <Head> content, with page-level tags taking precedence.

import type { AppProps } from 'next/app'
import Head from 'next/head'

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Head>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="description" content="Default site description. Override this per page." />
        <meta property="og:image" content="https://example.com/og.png" />
        <meta property="og:type" content="website" />
      </Head>
      <Component {...pageProps} />
    </>
  )
}

Individual pages still need their own <Head> for page-specific metadata like <title> and per-page descriptions. See Page missing Head component.

Verify the fix

curl -s https://example.com | grep -iE 'viewport|og:image'

Both tags should appear in the output. Re-run the audit:

npx orino audit .