How to fix missing h1 on Nuxt.js

Steps for Nuxt.js

1. Audit every page component under `pages/` (e.g. `pages/index.vue`, `pages/products/[slug].vue`, `pages/categories/[slug].vue`, `pages/cart.vue`, etc.) and identify any that are missing a visible `<h1>` element in their `<template>`.
2. For each affected page, derive a meaningful H1 string from the page's data: use the fetched product title, category name, or a static label (e.g. 'Shopping Cart'). Store it in a `computed` property or a `ref` so it stays reactive to async data.
3. Add exactly ONE `<h1>` element as the first meaningful heading inside the page's `<template>`. Do NOT place an H1 inside a shared layout (`layouts/default.vue`) unless every layout consumer genuinely shares the same heading — put it in the individual page component.
4. Keep the H1 text consistent with the page's `<title>` tag (set via `useSeoMeta` or `useHead`). Reuse the same reactive variable for both so they never drift apart.
5. For pages that load data asynchronously with `useAsyncData` / `useFetch`, guard against a blank flash by providing a sensible fallback string (e.g. `product.value?.title ?? 'Loading…'`) and ensure the `<h1>` is still present in the server-rendered HTML for crawlers.
6. Run `nuxt build && nuxt preview` (or check the SSR response with `curl`) to confirm the `<h1>` appears in the raw HTML before any client-side JavaScript executes.

What is missing h1?

An H1 is the main heading on a webpage — think of it as the title printed at the top of a magazine article. It tells both visitors and search engines what the page is about in one clear phrase. Every page should have exactly one H1 tag (not zero, not three), and it should describe the page's primary topic using words your customers actually search for. On a product page that might be the product name; on a category page it might be the category name; on your homepage it might be your brand's core value proposition.

Search engines use the H1 as one of the strongest on-page signals to understand what a page covers and how it should rank. A missing H1 means Google has to guess the page topic from other less-reliable signals, which can lower your rankings for the exact keywords you care most about. For shoppers, a page without a visible heading looks unfinished and untrustworthy, hurting conversion rates. Accessibility tools and screen readers also rely on the H1 to help visually impaired users navigate your page — missing it creates a legal accessibility risk in many jurisdictions.

See the complete Missing h1 guide for every platform and the full background.