Rubriktaggar (H1–H6) och hierarki

Vad är rubriktaggar?

Rubriktaggarna H1 till H6 är HTML-taggar som definierar innehållshierarkin och avsnittsstrukturen på en sida. H1 representerar den högsta rubriknivån, H2 huvudavsnitten, H3 underavsnitten och så vidare. Även om dessa etiketter visas visuellt som större/fetstil i webbläsaren är deras huvudsakliga syfte inte visuellt utan strukturellt: precis som innehållsförteckningen i en bok bildar de sidans logiska skelett.

Denna hierarki är inte bara en ordning som läses av det mänskliga ögat, utan också en trädstruktur som webbläsare och hjälptekniker (som skärmläsare) ”förstår” programmatiskt. En användare av en skärmläsare navigerar vanligtvis genom att hoppa från rubrik till rubrik på sidan; därför störs navigeringen om hierarkin bryts.

Rubriknivåerna gör dessutom att en sidas långa innehåll blir lätt att överblicka: istället för att läsa sidan rad för rad kan användaren hitta det avsnitt hen söker genom att skanna rubrikerna. Detta kan ha en positiv inverkan på både användarupplevelsen och den tid som tillbringas på sidan.

Varför är det viktigt?

En korrekt rubrikhierarki gör det lättare för sökmotorerna att förstå sidans ämneshelhet och underämnen, samtidigt som den underlättar navigeringen för användare som använder skärmläsare. Google avläser vilken del av en lång sida som täcker vilket underämne utifrån rubrikstrukturen; detta kan särskilt bidra till att rätt avsnitt väljs ut i utökade sökresultat, såsom ”featured snippets”.

En oregelbunden eller ofullständig hierarki leder till oklarheter i innehållsstrukturen och tillgänglighetsproblem. Att till exempel hoppa direkt från H2 till H4 kan göra att en användare av en skärmläsare blir förvirrad och undrar: ”Saknas det en mellanliggande nivå här, eller är avsnittet slut?”

I ett extremfall kan olika komponenter i enkelsidiga applikationer (single page application) eller mallsystem med flera komponenter rendera sina egna H1-rubriker oberoende av varandra, vilket oavsiktligt kan leda till att det finns fler än en H1-rubrik på sidan. I sådana tekniska arkitekturer är det viktigt att hantera rubriknivåerna från en central plats.

Hur åtgärdas detta?

• Det ska endast finnas en H1 på sidan; detta är vanligtvis sidans huvudrubrik och ska tydligt sammanfatta sidans ämne.
• Använd rubrikerna i ordning: H1 → H2 → H3, utan att hoppa över nivåer.
• Använd rubrikerna för att definiera innehållsstrukturen, inte för visuell storlek; använd CSS om du vill ha stor/fet text, välj inte fel rubriknivå.
• Varje H2/H3 ska vara en riktig avsnittsrubrik, inte dekorativ text eller en slogan.
• Använd nyckelord på ett naturligt sätt i rubrikerna; fyll inte varje rubrik med nyckelord på ett påtvingat sätt.
• På långa sidor ska rubrikerna skrivas på ett konsekvent och förutsägbart sätt så att de bildar en innehållsförteckning; detta underlättar både för användaren och för sökmotorerna.
• Om du använder ett tema eller ett komponentbibliotek, dokumentera i en central stilguide vilken rubriknivå de olika komponenterna (header, hero, kort, footer) använder.
• Kontrollera regelbundet med webbläsarens utvecklarverktyg (DOM-trädet) om rubrikhierarkin störs när du ändrar sidlayouten.
• På bloggar eller nyhetssajter bör du skapa en arbetsflöde för innehållshantering där rubriken (H1) hålls åtskild från SEO-titeln; koppla inte ihop de två.
• På webbplatser med flera skribenter kan olika redaktörer ha olika vanor; därför ökar det konsekvensen att fastställa reglerna för rubrikhierarkin skriftligt i en stilguide.

Exempel

<h1>SEO-guide</h1>
<h2>Teknisk SEO</h2>
<h3>Sidhastighet</h3>
<h2>Innehålls-SEO</h2>
<h3>Sökordsanalys</h3>

Dåligt exempel: <h1>Välkommen</h1> direkt efteråt <h4>Våra produkter</h4> — H2- och H3-nivåerna har hoppats över, hierarkin har brutits.

Vanliga misstag

• Att använda fler än en H1 på sidan (t.ex. både i logotypområdet och i innehållet).
• Att inte använda H1 alls.
• Att använda rubriktaggar enbart för att få stor/fet stil, och bortse från hierarkin.
• Att hoppa över nivåer genom att gå direkt från H2 till H4.
• När rapporten från Seoraporu.co visar en varning om ”fler än en H1” eller ”saknad H1” måste detta åtgärdas på mall-/temnivå, eftersom det oftast är ett problem som återkommer på alla sidor.