Headings are the signposts of a web page. They help visitors understand what a section covers, decide whether it answers their question and scan longer content without reading every paragraph. For SEO, headings also provide structure and context, but they are not magic ranking switches. A page still needs useful content that matches what the visitor is trying to accomplish.
For a small business website, the practical goal is simple: use a clear main heading for the page, divide the main ideas into descriptive sections and use subheadings only when they help explain a section in more detail. Avoid turning headings into a list of repeated keywords. A human should be able to read the headings alone and understand the page’s structure.
TL;DR
- Use a clear main H1 that reflects the page’s purpose.
- Use H2 headings for the main sections and H3 headings for related subsections.
- Make headings descriptive, natural and useful to someone scanning the page.
- Do not repeat keywords unnaturally or add headings merely to hit a numerical target.
- Check the rendered page, especially when a CMS or JavaScript component generates the content.
What do H1, H2 and H3 headings mean?
HTML headings represent levels in the page’s content hierarchy. The H1 usually introduces the main topic. H2s divide that topic into major sections. H3s can introduce narrower points inside an H2 section. For example, a page about website design might have H2s for services, process, portfolio, pricing factors and FAQs, with H3s for different delivery stages under the process section.
Do not confuse visual size with semantic level. CSS can make an H2 look larger than an H1, and a design system might style headings differently on desktop and mobile. What matters is that the HTML heading structure reflects the actual relationships between ideas. A font-size choice should not force the wrong heading level.
There is no universal requirement that every page must contain exactly one H1 for ranking purposes in all circumstances. A single clear H1 is usually a straightforward way to implement the main title, but the larger aim is a logical, accessible document structure. If a framework or component library generates multiple headings, inspect the rendered result and make sure the hierarchy remains meaningful.
How to structure a service page
Start with a useful H1
The main heading should make the service and intended audience clear. “Website Design for UK Small Businesses” is more descriptive than “Welcome” or “Digital excellence”. If the page focuses on a defined offer, mention that offer naturally. Do not cram in a chain of towns, synonyms and service variations.
Use H2 headings for buyer questions
A service page needs to answer more than “what do you do?” Common questions include what is included, who the service suits, how the process works, what the customer needs to provide, what affects the price, and what happens after an enquiry. Use the questions that genuinely apply instead of mechanically adding all of them to every page.
Use H3 headings only when they add structure
If a section about your process contains distinct steps, H3s can make those steps easy to find. If a section is short and has only one paragraph, an H3 may add unnecessary complexity. A heading hierarchy should reflect the information, not inflate the outline.
Keep the content under the heading relevant
A heading sets an expectation. If a heading says “How much does a website cost?”, the following section should explain meaningful cost factors or available pricing—not change the subject into a long company introduction. This consistency helps people scan the page and keeps the content useful.
A sample heading structure for a service page
For a custom website design service, a practical outline might look like this:
- H1: Website Design for Small Businesses
- H2: What the Website Design Service Includes
- H2: Who This Service Is For
- H2: Our Website Design Process
- H3: Discovery and Content Planning
- H3: Design, Development and Review
- H3: Testing and Handover
- H2: What Can Affect the Project Cost?
- H2: Examples of Website Work
- H2: Frequently Asked Questions
- H2: Request a Website Consultation
This is an example, not a mandatory template. If the service has a different process or buyer questions, change the structure to reflect reality. Each heading should earn its place.
Pro Tip: Hide the body text and read just the headings in order. If the page’s purpose, scope and next steps are unclear, the outline probably needs work before you polish individual paragraphs.
Common heading mistakes
Using headings only for visual styling
A line of large text is not automatically a semantic heading. Use heading elements for section titles and CSS for visual styling. Conversely, do not use a paragraph when the text genuinely introduces a section just because the design makes it look right.
Repeating the same keyword in every heading
The result often sounds unnatural: “SEO website design”, “SEO website design benefits”, “SEO website design process” and “SEO website design cost” may be less readable than a natural outline with the exact topic used where it makes sense. Include relevant terms when they explain the section, not to satisfy a keyword quota.
Making every paragraph a heading
Too many headings can fragment the reading experience and make the page feel like a checklist rather than a useful explanation. Group related details under a coherent section and use lists where they genuinely improve scanning.
Ignoring mobile display
Long headings can wrap into several lines on phones. That is not inherently bad, but avoid overly long or vague headings, keep line spacing readable and check that sticky menus do not obscure anchor links when visitors navigate to a section.
How to audit your headings
Crawl your important URLs using an SEO crawler or inspect the rendered page. Look for missing or duplicated titles, headings that do not match the page content, skipped levels that reflect a confused outline, repeated boilerplate and main headings that are vague. Then review the page as a person would: can they quickly locate the information that matters to them?
For a Next.js site, check how metadata and content render for individual routes. A heading that appears after a user interaction or is missing from rendered content may create a different problem from a simple typography issue. Verify the production page, not just the source component or local development preview.
How The Super Shoppe can help
Need clearer service pages and content structure?
The Super Shoppe’s website service can help organise service information, navigation, responsive layouts and calls to action. For a wider search strategy, explore the SEO & GEO service.
Explore website services →