Fes servir una jerarquia d'encapçalaments neta

Què comprova aquesta auditoria

Analitza cada element d’encapçalament de la pàgina (h1-h6) en ordre de document i verifica que els nivells descendeixen sense salts. La comprovació falla quan un h4 apareix abans de cap h3, quan dos h1 són a la mateixa pàgina o quan la profunditat de secció salta més d’un nivell.

Per què importa

Un esquema net importa a tres llocs alhora.

Els lectors de pantalla anuncien el nivell d’encapçalament a cada salt. Un usuari que navega per encapçalaments (un patró comú per a usuaris no vidents) sent “encapçalament nivell 2, característiques, encapçalament nivell 4, preus” i assumeix que s’ha saltat un nivell 3. La pàgina esdevé inservible.
Els motors de cerca encara llegeixen l’esquema d’encapçalaments com a pista sobre l’estructura temàtica. Un h1 seguit de cinc h3 sense h2 es llegeix com un bloc pla de contingut en lloc d’un article organitzat.
Els extractors d’IA (ChatGPT browsing, Perplexity, AI Overviews de Google) divideixen el contingut pels límits dels encapçalaments quan resumeixen. Una jerarquia trencada produeix fragments que abasten múltiples temes, baixant la qualitat de les citacions.

Com solucionar-ho

Fes servir exactament un h1 per pàgina, típicament el títol. Cada encapçalament posterior baixa com a màxim un nivell cada vegada:

<h1>Comparativa d'auriculars sense fils el 2026</h1>
  <h2>Què hem provat</h2>
    <h3>Qualitat d'àudio</h3>
    <h3>Durada de bateria</h3>
  <h2>Millor global: Sony WF-1000XM5</h2>
    <h3>Pros</h3>
    <h3>Contres</h3>

La drecera d’estil visual. Els dissenyadors de vegades fan servir <h4> perquè “es veu de la mida correcta”. No ho facis: tria el nivell que encaixa a l’esquema del document i estilitza’l amb CSS. Tailwind: <h3 class="text-base font-semibold">.

WordPress / page builders. La majoria d’editors de blocs (Gutenberg, Elementor) et permeten canviar el nivell d’un encapçalament independentment del seu estil. Recorre la pàgina un cop i reetiqueta cada bloc.

Astro / Next.js / React. Construeix un petit wrapper <Section> que incrementi un context de nivell d’encapçalament, perquè els components reutilitzables no codifiquin un <h3> rígid i trenquin l’esquema quan estan niats.

Audita’t: enganxa l’URL de la pàgina al validador HTML del W3C i mira la previsualització de l’esquema del document, o executa l’extensió de navegador headingsMap.

Preguntes freqüents

Puc tenir dos `h1` en una pàgina?

HTML5 tècnicament permet múltiples h1 dins d’elements <section> o <article>, però tots els proveïdors de tecnologia d’assistència, i Google, encara tracten un h1 per pàgina com el patró correcte. Limita’t a un. Consulta la pàgina d’etiqueta H1.

I les barres laterals i widgets?

Els encapçalaments dins de <aside> o regions de layout repetides també compten per a l’esquema. O bé baixa’ls a <h3> perquè es nidin sota el contingut principal, o embolica’ls en un landmark amb el seu propi àmbit d’encapçalament.

Això afecta les puntuacions de Lighthouse o d’accessibilitat?

Sí: heading-order és una de les regles d’axe-core que executa Lighthouse. Una jerarquia trencada baixa directament la teva puntuació d’accessibilitat de Lighthouse.