- Etiquetes d'encapçalament ( – ) defineixen una jerarquia de contingut clara que beneficiï els usuaris, els motors de cerca i les tecnologies d'assistència.
- Un únic H1 descriptiu amb encapçalaments H2 i H3 ordenats lògicament millora el SEO, l'accessibilitat i la llegibilitat general.
- Elements HTML semàntics ( , , , ) combinats amb encapçalaments creen una estructura de document significativa i navegable.
- Eviteu l'ampliació de paraules clau, els nivells d'encapçalament omesos i l'ús d'encapçalaments només per a l'estil; deixeu que el CSS s'encarregui de l'aparença i els encapçalaments de l'estructura.
Les etiquetes d'encapçalament HTML són un d'aquells petits fragments de codi que decideixen silenciosament si la teva pàgina es veu clara, útil i professional, o com una paret caòtica de text. Configuren com la gent llegeix el vostre contingut, com l'interpreten els lectors de pantalla i com els motors de cerca entenen de què tracta realment cada pàgina.
Quan estructureu els encapçalaments correctament en HTML, essencialment esteu construint una taula de continguts en directe tant per a humans com per a màquines. Això significa una navegació més fàcil, una millor accessibilitat, més context per a Google i, si fas les coses bé, més possibilitats de posicionar-te per als temes que t'importen.
Què són els encapçalaments HTML i per què són tan importants
Els encapçalaments HTML són les etiquetes de a que defineixen els títols i subtítols dins d'un document. Estableixen una jerarquia clara d'informació: és el tema principal de la pàgina, introdueix les principals seccions, i més enllà, desglosseu aquestes seccions amb més detall. Penseu-hi com l'estructura d'un llibre: títol del llibre, títols dels capítols, títols de les seccions, subseccions, etc.
A diferència dels contenidors genèrics com ara , els encapçalaments tenen un significat semàntic explícit. Els navegadors, els motors de cerca i les tecnologies d'assistència poden detectar-los i deduir com s'agrupa el contingut i quines parts són més importants. És per això que substituir els encapçalaments per paràgrafs massa grans o posar text aleatori en negreta i gran és una mala idea tant des del punt de vista del SEO com de l'accessibilitat.
Els encapçalaments serveixen simultàniament a tres públics: lectors, motors de cerca i tecnologies d'assistència. Per als lectors, divideixen el contingut en blocs manejables i el fan fàcil de llegir per sobre. Per als motors de cerca, destaquen temes i subtemes clau. Per als lectors de pantalla, formen un esquema navegable que permet als usuaris saltar a les parts que els interessen en comptes d'escoltar una pàgina sencera línia per línia.
Si es fan servir de manera descuidada, els encapçalaments poden fer més mal que bé. Saltar-se nivells, sobrecarregar paraules clau o utilitzar-les només per a l'estil visual altera l'estructura lògica del document. Aquesta confusió la senten els usuaris que es perden, els motors de cerca que malinterpreten els temes i les persones que utilitzen lectors de pantalla que confien en els encapçalaments com a eina de navegació principal.
Tipus d'etiquetes d'encapçalament HTML (H1-H6) i la seva funció
L'HTML defineix sis nivells d'encapçalaments: , , , , i . Van del més important ( ) a menys important ( ). A la pràctica, la majoria de llocs web rarament necessiten més de , i si et trobes intentant aconseguir o sovint, sol ser un senyal que el vostre contingut pertany a diverses pàgines en lloc d'un sol desplaçament gegant.
H1: l'encapçalament principal de la pàgina
L'H1 és l'encapçalament principal que defineix el tema general de la pàgina. Hauria de respondre a la pregunta: "De què tracta aquesta pàgina?" tant per als usuaris com per als motors de cerca. Per la seva importància, és el lloc natural per incloure la paraula clau o frase clau principal per a la qual voleu que la pàgina es posicioni, sense que sembli robòtic.
La millor pràctica és utilitzar un únic H1 per pàgina. Els motors de cerca moderns poden gestionar tècnicament diversos elements H1, i Google ha dit explícitament que això no trenca els seus sistemes, però des del punt de vista del SEO i l'accessibilitat, un H1 clar manté l'esquema del document simple i predictible. Múltiples H1 tendeixen a desdibuixar el focus i fer que l'estructura sigui més difícil d'interpretar.
L'H1 ha de ser concís, descriptiu i convincent. Sovint és similar al títol visible de l'article o de la pàgina del producte. Tot i que no ha de ser idèntic a l'HTML l'etiqueta que es mostra a les SERP i a les pestanyes del navegador, l'H1 s'ha d'alinear clarament amb ella perquè els usuaris no se sorprenguin per una discrepància entre el resultat de la cerca i el que veuen a la pàgina.
Diferència entre H1 i HTML etiqueta
L'H1 apareix dins del cos de la pàgina, mentre que el L'etiqueta es troba a la secció <head> i es mostra als resultats de la cerca i a les pestanyes del navegador. Tots dos són crucials per al SEO però tenen funcions diferents. L'H1 guia els lectors un cop arriben a la pàgina; L'etiqueta convenç els usuaris a fer clic en primer lloc i proporciona als motors de cerca una descripció compacta del tema principal de la pàgina.
Està perfectament bé per a l'H1 i ser diferents, sempre que estiguin estretament relacionats. Molts professionals de SEO trien una opció lleugerament més curta i optimitzada per a clics (per evitar el truncament a les SERP) i un H1 més descriptiu adaptat als lectors que ja són a la pàgina.
H2: encapçalaments de secció principals
Els encapçalaments H2 divideixen el contingut en seccions principals sota el tema principal. Si el vostre H1 fos el títol d'un llibre, els H2 serien els títols dels capítols. Cada H2 introdueix un subtema diferent, cosa que facilita que els usuaris escanegin la pàgina i que els motors de cerca vegin les agrupacions lògiques d'idees.
Des d'una perspectiva de SEO, els H2 són un lloc ideal per incloure paraules clau relacionades i variacions semàntiques. Ajuden a aclarir temes secundaris sense sobrecarregar l'H1. Els H2 ben escrits poden fins i tot convertir-se en candidats per a resultats enriquits com ara fragments destacats, especialment en guies pràctiques i articles d'estil de llista.
H3: subseccions dins dels blocs H2
Els elements H3 es troben sota els encapçalaments H2 i permeten dividir cada secció principal en fragments més petits i fàcils de digerir. En articles llargs o complexos, els H3 eviten grans blocs de text i guien els lectors a través d'explicacions pas a pas o desglossaments detallats d'un concepte.
Incloure variacions de cua llarga de les paraules clau dins dels H3 pot reforçar la rellevància temàtica. Fet de manera natural, això proporciona als motors de cerca un mapa semàntic més ric de la pàgina, alhora que continua sent realment útil per als lectors que volen detalls sense perdre's.
H4, H5 i H6: nivells de detall més profunds
H4, H5 i H6 s'utilitzen per a desglossaments cada cop més granulars del contingut sota H3 i superiors. Són menys habituals en pàgines de màrqueting o blogs típiques, però poden ser útils per a documents tècnics, contingut legal o recursos enciclopèdics on l'imbricació profunda és inevitable.
Tot i que els encapçalaments de nivell inferior tenen menys pes SEO directe, refinen l'estructura del document i faciliten la navegació. Tanmateix, fer-ne un ús excessiu o crear jerarquies excessivament profundes pot confondre tant els usuaris com les tecnologies d'assistència. Si arribeu a H5 o H6 amb freqüència, reconsidereu si la pàgina s'ha de dividir o simplificar.
Encapçalaments, HTML semàntic i estructura del document
Els encapçalaments són només una part d'un ecosistema HTML semàntic més ampli que inclou elements com ara , , , , , i . Quan combineu encapçalaments amb aquests elements estructurals, creeu un disseny significatiu que els navegadors poden traduir en un arbre d'accessibilitat per a lectors de pantalla.
Un enfocament no semàntic només utilitza elements, rols i classes per simular l'estructura. Per exemple, embolicar la capçalera del lloc web amb i la vostra navegació a pot imitar la semàntica, però és prolix i menys fàcil de mantenir. Acabes confiant en comentaris i identificadors només per mantenir les coses llegibles al codi.
Un enfocament semàntic substitueix aquests contenidors genèrics per , , , i . Dins tu poses el teu , i dins els vostres enllaços. Els navegadors i les tecnologies d'assistència entenen a l'instant quina regió és el bàner del lloc, quina és la navegació i quin és el contingut principal, sense una pila de rols ARIA.
Conceptualment, així és com podria ser un disseny senzill i ben estructurat: un nivell superior (banner del lloc), seguit de (navegació principal), un sol (àrea de contingut principal), opcional (material complementari) i un (informació de tot el lloc web). Dins de , pots tenir per a peces independents (com ara entrades de blog) i per a contingut agrupat que no és un article independent.
Cada o generalment hauria de contenir el seu propi encapçalament. Aquest encapçalament esdevé el títol d'aquella part del document. Sense ell, els usuaris de lectors de pantalla i els motors de cerca tenen més dificultats per entendre per a què serveix aquesta part de la pàgina.
, , i en context
identifica el contingut principal de la pàgina, i n'hi hauria d'haver exactament un per document. Això permet que les tecnologies d'assistència saltin les finestres repetitives de Chrome (com ara menús, barres laterals i bàners) i saltin directament al contingut principal amb una sola ordre.
està pensat per a informació tangencial o complementària. Aquí és on col·locaríeu barres laterals, quadres de crida, enllaços relacionats o notes suplementàries. El seu paper implícit de punt de referència és "complementari", cosa que ajuda els usuaris de lectors de pantalla a decidir si l'exploren o l'ignoren.
representa contingut que podria existir per si sol fora de la pàgina on apareix. Pensa en articles de notícies, entrades de blog, entrades de fòrums o targetes de producte que es puguin sindicar en altres llocs. Cada normalment té el seu propi encapçalament i pot contenir subseccions a l'interior.
serveix per agrupar contingut relacionat quan no encaixa cap element semàntic més específic. Les seccions normalment haurien de tenir un encapçalament propi; sense aquest, afegeixen poc valor a l'esquema del document i només poden crear soroll per als usuaris de tecnologies assistives.
Com els encapçalaments defineixen l'esquema del document
Els encapçalaments defineixen conceptualment l'esquema del document, tot i que els navegadors mai van implementar completament l'algoritme original d'esquema d'HTML5. Els usuaris de lectors de pantalla sovint es basen en aquest esquema implícit saltant d'un encapçalament al següent o visualitzant una llista de tots els encapçalaments de la pàgina per decidir on anar.
Per a aquests usuaris, un ordre d'encapçalament sensat és crucial. Tenir un seguit d'un sense Entremig és com saltar del capítol 2 a la subsecció 4.3 sense la secció 3 per cobrir el buit. Tot i que no és un error tècnic, fa que l'estructura sigui més difícil de seguir.
No utilitzeu encapçalaments només per obtenir text més gran o més negreta. Aquest tipus de truc visual trenca l'estructura semàntica. Per a un estil pur, confieu en el CSS (mida de la font, gruix de la font, marges, etc.) i utilitzeu encapçalaments adequats només quan introduïu realment una nova secció o subsecció de contingut.
Encapçalaments i SEO: com els utilitzen els motors de cerca
Els motors de cerca analitzen els encapçalaments per entendre la jerarquia de temes i la importància relativa. L'H1 els indica el tema principal de la pàgina, mentre que els encapçalaments H2 i H3 revelen els principals subtemes i detalls complementaris. Aquesta estructura ofereix als rastrejadors un "mapa" ràpid abans de submergir-se en el text complet del cos.
Les pàgines amb jerarquies d'encapçalaments clares i lògiques solen ser més fàcils d'indexar i de fer coincidir amb consultes rellevants. La recerca i l'experiència del sector mostren consistentment que el contingut ben estructurat pot aconseguir classificacions més altes i millors mètriques de clics i interacció que els murs de text no estructurats.
Posar paraules clau als encapçalaments encara importa, però ni de bon tros tant com fa anys. Google ara es basa en una anàlisi semàntica sofisticada en lloc d'un simple recompte de paraules clau. Per aquest motiu, els encapçalaments haurien de prioritzar la claredat i la utilitat per sobre de la repetició rígida de paraules clau.
Els bons encapçalaments sovint responen directament a la intenció de l'usuari o reflecteixen la manera com els usuaris formulen les preguntes. Els subtítols que semblen preguntes naturals ("Com afecten els encapçalaments HTML l'accessibilitat?") us poden ajudar a optar a fragments destacats, resultats enriquits de preguntes freqüents o quadres "La gent també pregunta" quan es combinen amb respostes concises i ben estructurades a sota.
Ús de paraules clau en els encapçalaments sense exagerar
Encara és intel·ligent incloure la paraula clau principal a l'H1 i entrellaçar termes relacionats als H2 i H3 on encaixin de manera natural. Dit això, l'ompliment de paraules clau (repetir la mateixa frase de manera poc natural a cada encapçalament) és una manera clàssica d'activar senyals de correu brossa i perjudicar tant el posicionament com la confiança dels usuaris.
Un enfocament modern és utilitzar encapçalaments per reflectir les preguntes reals i els subtemes que importen als usuaris. En comptes d'escriure "SEO d'encapçalaments HTML" cinc vegades, podeu tenir encapçalaments com ara "Com els encapçalaments HTML milloren l'accessibilitat" o "Errors comuns en utilitzar etiquetes d'encapçalament". Aquestes variacions enriqueixen la rellevància temàtica sense semblar manipuladores.
Encapçalaments únics i evitació de la canibalització
Cada pàgina ha de tenir un H1 únic i, en general, encapçalaments principals únics. Repetir el mateix H1 en diverses pàgines pot confondre els motors de cerca sobre quina URL s'ha de posicionar per a una consulta determinada i pot conduir a la canibalització de paraules clau, on les vostres pròpies pàgines competeixen entre si.
Si dues pàgines tracten temes realment diferents, tracteu els seus encapçalaments H1 i clau en conseqüència. Si són massa similars, considereu la possibilitat de fusionar-los, diferenciar el seu enfocament o ajustar els enllaços interns per indicar quina hauria de ser l'autoritat principal per a aquest tema.
Accessibilitat: per què els encapçalaments són fonamentals per al disseny inclusiu
Per als usuaris de lectors de pantalla i altres tecnologies d'assistència, els encapçalaments són la manera principal d'explorar i entendre una pàgina ràpidament. Molta gent no escolta de dalt a baix; en comptes d'això, obren una llista d'encapçalaments, la revisen com si fos un índex i van directament a les parts importants.
Sense una estructura d'encapçalament neta i lògica, aquests usuaris es veuen obligats a vagar a cegues per la pàgina. Una sèrie ben organitzada d'elements H1-H3 els proporciona un model mental del contingut en segons. Si alguna vegada has fullejat l'índex d'un llibre per decidir si val la pena llegir-lo, això s'assembla molt a com es sent això.
Els encapçalaments també interactuen amb punts de referència creats per elements semàntics com ara , , i . Els usuaris poden saltar no només al contingut principal o a les regions de navegació, sinó també entre els encapçalaments dins d'aquestes regions, cosa que fa que les pàgines llargues siguin molt menys aclaparadores.
Les directrius d'accessibilitat recomanen utilitzar encapçalaments per crear un esquema lògic i predictible, evitant buits i complexitat innecessària. Per a la majoria de pàgines, un sol H1, diversos H2 i ocasionalment H3 són suficients. L'imbricació profunda i els nivells inconsistents sovint dificulten les coses en lloc de facilitar-les.
Un H1 per pàgina: consideracions sobre accessibilitat i SEO
Tot i que tècnicament podeu utilitzar diversos elements H1, a la pràctica un únic H1 per pàgina és més amigable per als usuaris de lectors de pantalla i motors de cerca. Marca clarament el "node superior" de la jerarquia de contingut. Les seccions principals addicionals encara es poden representar mitjançant H2 i més enllà sense diluir l'enfocament general.
Històricament, hi havia una proposta anomenada algorisme "esquema de document" que hauria permès múltiples H1 en diferents seccions. Tanmateix, els navegadors i les tecnologies d'assistència mai van implementar aquest algoritme, per la qual cosa no us hi heu de refiar. En l'ús real, múltiples H1 solen causar més confusió que no pas resoldre.
Estructura vs mida visual: deixa que el CSS s'encarregui de l'aspecte
Un dels errors més comuns és triar els nivells d'encapçalament en funció de la mida de la lletra que voleu en lloc de la jerarquia que necessiteu. Per exemple, utilitzar un H4 simplement perquè el tema l'afegeix a un estil més petit, tot i que el contingut pertany lògicament a un H2, trenca la coherència estructural de la pàgina.
Trieu sempre els encapçalaments en funció del nivell semàntic i, a continuació, utilitzeu el Propietat CSS text-align per ajustar el seu aspecte. Podeu fer que un H2 sigui visualment més petit que un H3 si el disseny ho requereix; els motors de cerca i les tecnologies assistives no es preocupen per la mida dels píxels, només per la semàntica subjacent.
Encapçalaments visualment ocults només per a finalitats estructurals
De vegades, un disseny no té espai per a un encapçalament visible, però el contingut encara en necessita un per a l'accessibilitat i l'estructura. En aquests casos, els desenvolupadors sovint utilitzen una classe CSS de "només lector de pantalla" que amaga l'encapçalament visualment i el manté disponible per a la tecnologia assistiva.
Un enfocament típic posiciona l'element fora de la pantalla o el retalla amb CSS de manera que no afecta el disseny però roman a l'arbre d'accessibilitat. Per exemple, una classe que estableix la posició a absoluta, l'amplada i l'alçada a 1px i retalla el contingut pot aconseguir-ho. Tanmateix, s'hauria d'utilitzar amb moderació, perquè una gran discrepància entre el que veuen els usuaris vidents i el que senten els usuaris de lectors de pantalla pot ser confusa.
No tots els buits estructurals necessiten un encapçalament ocult, però per a les seccions principals, com ara un contenidor de taula de continguts o un bloc de navegació clau, pot fer que l'esquema sigui més coherent sense sobrecarregar el disseny visual.
Millors pràctiques per escriure encapçalaments eficaços
Els encapçalaments eficaços són clars, concisos, descriptius i coherents al llarg de tota la pàgina. Indiquen als usuaris exactament què poden esperar del següent fragment de contingut i tenen sentit quan s'escanegen de forma aïllada, com ara en el quadre de diàleg "llista d'encapçalaments" d'un lector de pantalla.
Mantenir els encapçalaments relativament curts (sovint al voltant de 3-5 paraules) és una bona regla general. Això no és un límit estricte, però els encapçalaments massa llargs i semblants a frases alenteixen la lectura i semblen maldestres en els dissenys. Si necessiteu matisos addicionals, poseu-los al paràgraf següent, no els fiqueu a l'encapçalament.
La coherència en l'estil i el to entre els encapçalaments també ajuda els usuaris a construir un model mental de la vostra pàgina. Si alguns encapçalaments són preguntes, altres són ordres i altres són frases vagues, l'esquema sembla desordenat. Trieu un patró que coincideixi amb el contingut i seguiu-lo tant com sigui possible.
Jerarquia lògica i progressió de nivells
Avança sempre pels nivells d'encapçalament en ordre, sense saltar cap avall. Després d'un H1, feu servir H2 per a les seccions principals. Dins d'un bloc H2, feu servir H3, i si realment necessiteu subdividir-les, aneu a H4. Passar de H2 directament a H4 suggereix que falta algun nivell intermedi, cosa que confon tant les tecnologies assistives com els lectors humans.
Penseu en els encapçalaments com a contenidors imbricats, no com a etiquetes decoratives. Un H3 està "dins" del tema d'un H2, un H4 està dins d'aquest H3, i així successivament. Si un nou encapçalament no forma part conceptualment del contingut de l'anterior, hauria de tornar a pujar un nivell i començar una nova secció en lloc de quedar-se imbricat profundament.
Què no s'ha de fer amb les etiquetes d'encapçalament
Eviteu convertir els encapçalaments en un abocador de paraules clau. Omplir-los de frases repetitives podria haver funcionat en els primers temps del SEO, però els algoritmes moderns reconeixen això com a comportament de correu brossa i poden fer baixar el posicionament de les pàgines a causa d'això.
No amagueu el text de l'encapçalament amb finalitats SEO. L'ús de trucs CSS per fer que les paraules clau siguin invisibles per als usuaris vidents i deixar-les al marcatge es considera encobriment i pot comportar penalitzacions. Si el text no és útil per als usuaris, no pertany a un encapçalament.
Eviteu reutilitzar encapçalaments idèntics en moltes pàgines diferents, tret que el contingut realment ho exigeixi. Quan totes les entrades del blog del vostre lloc web tenen el mateix H2 com ara "Introducció" o "Conclusió", aquests encapçalaments afegeixen poc valor per als motors de cerca o els usuaris de lectors de pantalla. Els encapçalaments més descriptius ("Per què els encapçalaments HTML són importants per al SEO") són molt més útils.
La funció principal d'un encapçalament és organitzar el contingut, no només fer que el text sigui més gran o més atractiu. Utilitza CSS per a l'aparença i els encapçalaments per a l'estructura, i evitaràs la majoria dels errors comuns que perjudiquen tant la usabilitat com el posicionament.
Tècniques avançades d'encapçalament: ARIA i jerarquies profundes
En casos excepcionals en què realment necessiteu més de sis nivells de jerarquia, ARIA pot ampliar el que ofereix l'HTML natiu. L'atribut role="heading" combinat amb aria-level permet marcar qualsevol element com a encapçalament d'un nivell arbitrari, fins i tot més enllà de 6.
Per exemple, es comporta com un encapçalament de setè nivell per a tecnologies assistives. De la mateixa manera, podeu sobreescriure el nivell d'un H3 real afegint aria-level="2" si l'heu de tractar semànticament com un H2, tot i que això normalment es resol millor corregint l'HTML.
Aquestes tècniques són potents però s'han d'utilitzar amb molta precaució. La compatibilitat és bona amb els principals lectors de pantalla, però confiar en jerarquies profundes i exòtiques pot fer que el contingut sigui més difícil de raonar i mantenir. En la majoria de situacions, dividir el contingut en diverses pàgines o reestructurar seccions és la solució més neta i robusta.
Recordeu que l'objectiu no és mostrar quants nivells d'encapçalaments podeu imbricar, sinó ajudar els usuaris i els motors de cerca a entendre el vostre contingut de manera ràpida i precisa. Si el vostre esquema sembla un fractal, probablement és hora de simplificar.
Quan combineu una jerarquia d'encapçalaments ben pensada amb contenidors semàntics, punts de referència de navegació accessibles i un ús natural de paraules clau, acabeu amb pàgines més fàcils de llegir, més fàcils d'indexar i molt més preparades per al futur. Aquesta combinació millora la satisfacció de l'usuari, augmenta les mètriques d'interacció com el temps a la pàgina i la profunditat de desplaçament, i dóna als motors de cerca tots els senyals possibles que el vostre contingut mereix ser visible per a les consultes a les quals us dirigiu.
