Missing h1
Quick winFound on 80% of audited stores.
Add a single, descriptive H1 tag to every page that currently lacks one, clearly stating the page's main topic.
What it is
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.
Why it matters
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.
How to fix it
- Identify every page that is missing an H1 — this is commonly homepage, collection/category pages, product pages, blog posts, and landing pages.
- Write a concise, descriptive heading for each page (ideally 20–70 characters) that naturally includes the page's primary keyword — e.g. the exact product name, category name, or service you want that page to rank for.
- Place the H1 as the first and only heading-level-1 element in the main content area of the page, above any body text or product grid.
- Make sure the H1 is actual HTML text — not text embedded inside an image or a CSS background — so search engines and screen readers can read it.
- Ensure the H1 is visually distinct (larger font, bolder weight) so shoppers immediately understand what page they are on; do not hide it with CSS display:none or visibility:hidden.
- After publishing, verify the fix by right-clicking the page, choosing 'View Page Source' or using browser DevTools, and searching for '<h1>' to confirm exactly one instance exists with your intended text.
Fix it on your platform
Pick your platform for the exact steps.
How to fix missing h1 on Shopify
- For product pages: Online Store → Products → open the product → the 'Title' field at the very top automatically renders as the H1 in most themes. Ensure this field is filled in.
- For collection pages: Online Store → Products → Collections → open the collection → the 'Title' field renders as the H1. Fill it in if blank.
- For the homepage: Online Store → Customize (Theme Editor) → click the section at the top of your homepage → locate a 'Heading' or 'Title' block and add your H1 text there.
- For blog posts/pages: Online Store → Blog Posts (or Pages) → open the post → the 'Title' field renders as the H1.
- If your theme does NOT output the title as an H1 (verify in DevTools), go to Online Store → Edit Code → open the relevant template (e.g. templates/product.liquid or sections/main-product.liquid) and wrap the title output in an <h1> tag: <h1>{{ product.title }}</h1>.
- Save changes and verify with View Page Source, searching for '<h1>'.
How to fix missing h1 on Shopify Plus
- Shopify Plus stores use the same theme system as Shopify. Follow the same Shopify steps above.
- If you use a custom storefront (Hydrogen/Headless), locate the product/collection/page component in your codebase and ensure the title is wrapped in an <h1> element.
- For script-level changes across all templates, use the Theme Code Editor or deploy via GitHub integration.
How to fix missing h1 on WooCommerce
- For product pages: WordPress Admin → Products → open the product → the 'Product name' field at the top is output as the H1 by most WooCommerce themes (via the woocommerce_template_single_title hook). Ensure the product name is filled in.
- For shop/category pages: WordPress Admin → Products → Categories → edit the category → the 'Name' field becomes the H1.
- For standard pages/posts: WordPress Admin → Pages (or Posts) → open the page → in the Gutenberg editor, the first block should be a 'Heading' block set to H1, OR the page title field at the very top (above the editor) renders as H1.
- If the theme does not output an H1, open your child theme's single-product.php or archive-product.php and add: <h1 class="product_title"><?php the_title(); ?></h1>.
- Use the free 'Rank Math' or 'Yoast SEO' plugin — both include on-page analysis that flags missing H1s per page/product.
- Verify with View Page Source and search for '<h1>'.
How to fix missing h1 on BigCommerce
- For product pages: Catalog → Products → open the product → the 'Product Name' field is output as the H1 by default in Cornerstone and most BigCommerce themes. Make sure it is filled in.
- For category pages: Catalog → Product Categories → edit the category → the 'Category Name' renders as the H1.
- For custom pages (e.g. About, Landing): Storefront → Web Pages → open the page → add an H1 heading at the top of the page content using the WYSIWYG editor (select text, click the Heading 1 style from the Format dropdown).
- If the theme template does not output the product/category name as an H1, go to Storefront → My Themes → click Advanced → Edit Theme Files → open templates/pages/product.html (or category.html) and wrap the name output with <h1> tags.
- Save and preview; verify with View Page Source.
How to fix missing h1 on Adobe Commerce (Magento)
- For product pages: Catalog → Products → open the product → the 'Product Name' field is used as the H1 by default via the page_title block in the product view layout.
- For category pages: Catalog → Categories → open the category → the 'Name' field renders as the H1.
- To override the H1 independently of the product name, go to the product edit page → Search Engine Optimization tab → fill in the 'Meta Title' field; some themes use this as the visible H1 — check your theme's catalog/product/view/title.phtml.
- To modify at the template level: in your custom theme, edit app/design/frontend/<Vendor>/<theme>/Magento_Catalog/templates/product/view/title.phtml and ensure the title output is wrapped in <h1 ...>.
- For CMS pages (Home, About, etc.): Content → Pages → open the page → in the Page Information tab, fill in the 'Content Heading' field — this renders as the H1 above the content block.
- Flush cache under System → Cache Management after saving, then verify with View Page Source.
How to fix missing h1 on Magento Open Source
- Follow the same steps as Adobe Commerce (Magento) above — the admin paths and template structure are identical in Magento Open Source.
How to fix missing h1 on Wix
- Open the Wix Editor for the page in question.
- Click on the text element at the top of your page content that serves as the main heading. In the text toolbar that appears, open the 'Paragraph' style dropdown and change it to 'Heading 1'.
- If no heading text element exists, click the blue '+' (Add Elements) → Text → choose 'Title' or 'Heading 1', drag it to the top of the content area, and type your descriptive heading.
- For product pages in Wix eCommerce: the product name is automatically rendered as an H1 by the Wix product page template — ensure Product Name is filled in under Wix Stores → Products → edit product.
- Publish the site, then verify by using browser DevTools (F12 → Elements, search 'h1') or View Page Source.
How to fix missing h1 on Wix eCommerce
- Product name in Wix Stores automatically outputs as H1 on product pages — go to Wix Stores → Products → open the product and ensure the Name field is populated.
- For collection/category pages, click on the page in the Editor, select the heading text element at the top, and set its style to 'Heading 1' in the text toolbar.
- Publish and verify in DevTools.
How to fix missing h1 on Squarespace
- Open the page in the Squarespace editor.
- Click the pencil/edit icon on the content block at the top of the page.
- In the text editor, type your main heading, select it, and from the text format toolbar choose 'Heading 1' (shown as H1 or a large 'H').
- For product pages: Squarespace Commerce automatically uses the product name as the page H1 — go to Commerce → Inventory → open the product → ensure the product Title is filled in.
- For blog posts: the Post Title field automatically becomes the H1.
- Save and publish, then verify with View Page Source (Ctrl/Cmd+U), searching for '<h1>'.
How to fix missing h1 on Squarespace Commerce
- Product Title in Squarespace Commerce renders as the H1 on the product detail page — go to Commerce → Inventory → open each product and confirm the Title field is not blank.
- For category/tag landing pages, edit the page section heading block and set it to Heading 1 style.
- Verify with View Page Source after publishing.
How to fix missing h1 on Webflow
- Open the Webflow Designer for the page.
- In the Navigator panel (or on canvas), locate or add a 'Heading' element at the top of the page main content.
- With the Heading element selected, look at the Element Settings panel (right side) — confirm the 'Tag' is set to 'H1' (not H2, H3, or Div).
- Type your descriptive heading text directly on the canvas.
- For CMS Collection pages (e.g. product detail, blog post): open the Collection Template page in the Designer, add a Heading block, set tag to H1, then bind it to the 'Name' or 'Title' CMS field using the purple binding icon.
- Publish the site and verify with browser DevTools.
How to fix missing h1 on Webflow Commerce
- In the Webflow Designer, open the Product Template page.
- Select (or add) the top Heading element, confirm its tag is H1 in Element Settings, and bind it to the Product Name CMS field.
- Publish and verify.
How to fix missing h1 on WordPress.org
- For pages and posts: the page/post Title field in the Block Editor (Gutenberg) or Classic Editor automatically renders as the H1 via your theme's single.php or page.php template. Ensure the title is filled in.
- If your theme does not output the title as an H1, install a child theme and edit the relevant template file to wrap the_title() in <h1> tags.
- For pages where the title is intentionally hidden but you still need an H1, add a Heading block (set to H1) at the top of the editor content area.
- Plugins like Rank Math SEO or Yoast SEO will flag pages with missing H1s under their on-page analysis — use these to audit all pages at once.
How to fix missing h1 on Ghost
- Ghost automatically renders the post/page Title as the H1. Open the Ghost Admin, go to Posts or Pages, open the entry, and ensure the Title field at the top is filled in.
- If your theme wraps the title in a non-H1 tag, edit the relevant theme template (e.g. post.hbs) and change the title wrapper to <h1 class="post-title">{{title}}</h1>.
- Upload the modified theme under Settings → Theme and verify.
How to fix missing h1 on Drupal
- Drupal outputs the node Title as the H1 by default via the page-title.html.twig template. Ensure every node/product has a Title value.
- If the template overrides the tag, locate page-title.html.twig in your active theme and ensure it uses <h1{{ title_attributes }}>{{ title }}</h1>.
- For Drupal Commerce product pages, go to Commerce → Products → open the product and fill in the Title field.
- Clear the Drupal cache under Admin → Configuration → Performance → Clear all caches after template changes.
How to fix missing h1 on Joomla
- Joomla outputs the article Title as the H1 by default. Go to Content → Articles → open the article and ensure the Title field is filled in.
- In Article Options (or globally under Content → Articles → Options → Article tab), make sure 'Show Title' is set to 'Show' and the title is not styled as a lower heading in your template.
- If the template overrides the heading level, edit the template's HTML override for com_content/article/default.php and wrap the title in <h1> tags.
How to fix missing h1 on PrestaShop
- For product pages: Catalog → Products → open the product → the 'Product Name' field is output as the H1 in the default product page template (catalog/product.tpl or themes/<theme>/templates/catalog/product.tpl).
- For category pages: Catalog → Categories → edit the category → the 'Name' field renders as the H1.
- For CMS pages: Design → Pages → open the page → add a heading in the content editor and style it as Heading 1, or ensure the page Title is rendered via <h1> in your CMS page template.
- If the theme template does not output an H1, edit themes/<your_theme>/templates/catalog/product.tpl and wrap {$product.name} in <h1> tags.
- Clear the cache under Advanced Parameters → Performance → Clear cache.
How to fix missing h1 on OpenCart
- For product pages: the Product Name is output as H1 by default in catalog/view/theme/<theme>/template/product/product.twig (or product.tpl in older versions). Ensure the product name is filled in Catalog → Products.
- For category pages: Catalog → Categories → ensure the Category Name is filled in; it renders as H1 in the category template.
- If the template uses a non-H1 tag, edit product.twig and change the wrapping element to <h1 itemprop="name">{{ heading_title }}</h1>.
- Save and verify in browser DevTools.
How to fix missing h1 on Headless / Custom (I build in code)
- Locate the page component or template that renders the page's main content (e.g. ProductPage.jsx, CategoryPage.tsx, product.html).
- Ensure the primary title/name variable is wrapped in an <h1> tag — e.g. <h1>{product.name}</h1> in React/Next.js, or <h1>{{ product.title }}</h1> in a template language.
- Make sure no CSS rule sets display:none or visibility:hidden on the h1 element.
- Add a check in your CI/build pipeline or automated test suite (e.g. with axe-core or a Playwright test) to assert that every page type contains exactly one <h1>.
- Deploy and verify with browser DevTools.
How to fix missing h1 on Next.js
- Open the page component for the template type that is missing an H1 (e.g. pages/products/[slug].tsx or app/products/[slug]/page.tsx).
- Ensure the product/page name is rendered inside an <h1> tag: <h1>{product.title}</h1>.
- Confirm no global CSS or Tailwind class hides the element.
- Run 'npm run build && npm start', open the page, and inspect with DevTools (Ctrl+F '<h1>') to confirm.
How to fix missing h1 on Wix Studio
- Open the Wix Studio editor and select the page needing an H1.
- Click the main heading text element (or add one via the '+' Add panel → Text → Heading 1).
- With the element selected, open the text style dropdown in the toolbar and choose *'Heading 1'* to ensure it is tagged as `<h1>`.
- For Wix Stores product pages managed through Studio, the product title widget automatically outputs an H1 — ensure the product name is descriptive under Wix Stores → Products.
- Publish and verify using browser Dev Tools or a headings inspector extension.
How to fix missing h1 on BigCommerce for WP
- Product and category H1s are controlled by the BigCommerce storefront, not the WordPress theme. Refer to the BigCommerce platform steps above for product and category H1s.
- For WordPress pages/posts that embed BigCommerce content, edit the page in Gutenberg → ensure the page Title field at the top of the editor is filled in (this becomes the `<h1>` via most themes).
- If the theme suppresses the post title, use Appearance → Theme File Editor → 'page.php' to restore `<h1 class="entry-title"><?php the_title(); ?></h1>`.
How to fix missing h1 on Nuxt.js
- 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>`.
- 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.
- 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.
- 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.
- 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.
- 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.
How to fix missing h1 on Gatsby
- Audit every page template under `src/pages/` and `src/templates/` (e.g. `index.js`, `product.js`, `collection.js`, `blog-post.js`) to identify which ones render no `<h1>` element in their JSX.
- Create (or open) a shared `PageHeading` component at `src/components/PageHeading.jsx` that renders a semantic `<h1>` with consistent base styling, so every page uses the same element rather than ad-hoc headings.
- In each page template, import `PageHeading` and place it as the *first meaningful element* inside the page's top-level container — above product grids, hero images, or body copy — passing a descriptive, keyword-rich `title` prop derived from the page's data (e.g. CMS/GraphQL query result).
- For Gatsby's Head API (`export function Head()`), ensure the `<title>` tag value and the `<h1>` text are aligned but not identical — the `<h1>` can be slightly more conversational while the `<title>` targets the exact search keyword.
- For dynamically generated pages in `gatsby-node.js` (via `createPage`), pass the heading text through `pageContext` so the template always has a non-empty `title` string to render even before any async data loads.
- Run `gatsby build && gatsby serve` and use browser DevTools → Elements panel (or an accessibility tree audit) to confirm exactly one `<h1>` exists per page before deploying.
How to fix missing h1 on Next.js (Headless)
- Audit every route in your `app/` (or `pages/`) directory for a missing `<h1>`. Use browser DevTools or a script (`grep -r '<h1' ./app`) to find pages with zero H1 elements.
- For each page component (e.g. `app/products/[slug]/page.tsx`, `app/collections/[handle]/page.tsx`, `app/page.tsx`), add exactly ONE `<h1>` near the top of the rendered JSX. Pull the text from your data-fetch result (product title, collection name, CMS headline) so it is unique and descriptive per page.
- Create a shared `PageHeading` component in `components/PageHeading.tsx` to enforce consistent styling and guarantee a single H1 is never accidentally duplicated across layouts.
- Ensure your root `app/layout.tsx` does NOT contain an `<h1>` — headings in the shared layout would produce duplicate H1s on every page.
- For statically or dynamically rendered pages using `generateStaticParams` / `generateMetadata`, confirm the H1 text matches (or is derived from) the `title` metadata field so signal consistency is maintained for search engines.
- Run Lighthouse or an axe accessibility audit after deploying to verify each route now reports exactly one H1 with no empty text content.
How to fix missing h1 on Elementor
- Open the affected page in Elementor by navigating to Pages (or Products/Posts) in the WordPress dashboard, hovering over the page, and clicking 'Edit with Elementor'.
- In the Elementor editor, scan the existing layout for any Heading widget that is already set to H1: click each Heading widget and check the 'HTML Tag' dropdown in the Content tab (left panel). If one exists, update its text to be a clear, descriptive statement of the page's main topic and skip to step 5.
- If no H1 exists, drag a new 'Heading' widget from the Elements panel (search 'Heading') into the topmost content section of the page — place it above all other content widgets so it is the first meaningful heading in the DOM.
- With the new Heading widget selected, go to the Content tab in the left panel: set the 'HTML Tag' dropdown to 'H1', then type a single, descriptive title that clearly states the page's main topic (e.g. 'Women's Running Shoes' for a category page).
- Switch to the Style tab for the Heading widget and adjust typography/color to match the site's visual design — ensure the H1 is visually prominent, but do not use CSS to hide it (avoid display:none or visibility:hidden, which can cause SEO penalties).
- Click the green 'Update' button (bottom of the left panel) to publish the change, then verify by viewing the live page and using browser DevTools (Ctrl+U / Cmd+U → search '<h1') or an SEO audit tool to confirm exactly one H1 tag is present.
Does your site have this issue?
Run a free SEOLZ scan to find missing h1 — and every other issue — across your whole site in minutes.
Scan my site freeFrequently asked questions
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.
Why does missing h1 matter?
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.
How do I fix missing h1?
Add a single, descriptive H1 tag to every page that currently lacks one, clearly stating the page's main topic.
Authoritative references
- SEO Starter Guide — Google Search Central
- Influence your title links — Google Search Central