Modul 3 · 3.2
Rubriker och en sidas uppbyggnad
Modul 3: Den tekniska grunden för en sida · Lästid: 11 minuter
Lärandemål: Efter den här lektionen kan du bygga upp en sida med en tydlig huvudrubrik och logiska underrubriker, förklara vad Google och skärmläsare gör med rubriker och skriva bra alt-texter och filnamn för bilder.
Nyckelbegrepp: rubrik (<h1> till <h6>), huvudrubrik, underrubrik, hoppa över nivå, semantisk HTML, skärmläsare, formaterad text som inte är en rubrik, alt-text, tomt alt="" för dekoration, filnamn, text i bilder
Rubrikerna är din sidas innehållsförteckning
Ingen tycker om att läsa en lång text utan underrubriker. På nätet gäller det ännu mer: besökare skummar först igenom en sida och läser först när de ser att svaret finns där. Rubriker hjälper till med det. Men rubriker är mer än stora, feta bokstäver. I HTML är de egna element med en nivå:
<h1>Bruidsboeketten op maat</h1>
<h2>Zo werken we</h2>
<h3>De kennismaking</h3>
<h3>Het proefboeket</h3>
<h2>Voorbeelden</h2>
<h2>Veelgestelde vragen</h2><h1> är huvudrubriken: vad handlar den här sidan om? <h2> är kapitlen, <h3> avsnitten inom dem, och så vidare ner till <h6>. Indraget ovan finns bara för att visa strukturen; i riktig HTML spelar det ingen roll.
Två grupper läser verkligen den strukturen:
- Personer med skärmläsare. En blind eller synskadad besökare låter ofta skärmläsaren först räkna upp alla rubriker och hoppar sedan till den del hen letar efter. Utan riktiga rubriker blir sidan en enda lång textmassa.
- Sökmotorer. Google använder rubriker för att förstå vad de olika delarna av en sida handlar om.
Vad Google säger om rubriker
Det finns många myter om rubriker. Det här säger Google själv:
- I Googles SEO-startguide står det att rubrikernas ordning inte spelar någon roll för Google Sök, och att det inte finns något magiskt antal rubriker som en sida måste ha. Rubriker i en logisk ordning är däremot mycket bra för skärmläsare.
- John Mueller på Google sa i en video (2019) att Googles system inte har några problem med flera
<h1>-rubriker på en sida. Google försöker arbeta med HTML-koden som den är: en<h1>, flera, eller bara formaterad text utan riktiga rubriker. - I dokumentationen om titellänkar (lektion 3.1) nämner Google däremot en situation som kan gå fel: ingen tydlig huvudtitel. Finns det flera stora, framträdande rubriker högst upp och är det oklart vilken som är huvudtiteln, kan Google ha svårt att välja en bra titellänk. Google rekommenderar att huvudrubriken skiljer sig tydligt från resten, till exempel som den första synliga
<h1>.
Slutsatsen i den här kursen: en tydlig <h1> per sida är en bra vana, inte för att Google annars straffar dig, utan för att sidan då tydligt säger för alla vad den handlar om. Läsare, skärmläsare och Google kan då inte missa det. Kontrollen i uppgift A3.2 ger därför grönt vid exakt en <h1> som inte är tom, orange vid fler än en och rött om det inte finns någon.
Vanliga misstag
| Misstag | Varför det är ett problem |
|---|---|
Logotypen eller företagsnamnet är <h1> på varje sida | Varje sida får då samma huvudrubrik; sidans egentliga titel blir en <h2> eller vanlig text |
| Rubriker valda efter teckenstorlek | En <h4> för att den är "snyggt liten", eller en <h2> för en slogan. Utseendet hör hemma i formgivningen (CSS), nivån i HTML-koden |
| Text som ser ut som en rubrik men inte är det | En fet, stor textbit i en <div> eller <p>: en skärmläsare ser ingen rubrik |
| Hoppa över nivåer | Direkt en <h4> efter en <h2>. För Google spelar det ingen roll, men W3C:s riktlinjer för tillgänglighet avråder från det eftersom det är förvirrande |
| Tomma rubriker | En <h1></h1> som bara innehåller en bild utan alt-text. För en skärmläsare och för Google är den rubriken tom |
Bygg en sida som ger svar
En bra ordning för nästan varje sida:
- Huvudrubrik (
<h1>) som säger vad besökaren hittar här. Den liknar ofta titeln från lektion 3.1, men behöver inte vara likadan. Titeln visas i sökresultaten, huvudrubriken på själva sidan. - En kort inledning med det viktigaste svaret direkt.
- Underrubriker (
<h2>) för varje delämne, skrivna som något läsaren letar efter: "Vad kostar en brudbukett?" säger mer än "Priser". - Vid behov
<h3>under en<h2>, inte fristående.
Lektion 7.3 går djupare in på själva skrivandet. Här handlar det om stommen.
Bilder: alt-text och filnamn
En sökmotor "ser" inte ett foto som du gör. Google använder datorseende, men hämtar mycket från texten runt bilden. Den viktigaste källan nämner Google själv: alt-texten.
<img src="/beelden/bruidsboeket-pioenrozen-wit.jpg"
alt="Bruidsboeket met witte pioenrozen en eucalyptus">Alt-texten (alternativ text) har två uppgifter:
- Tillgänglighet: en skärmläsare läser upp den för den som inte kan se bilden. Om bilden inte kan laddas visar webbläsaren texten i stället för fotot.
- Förståelse: Google använder alt-texten, tillsammans med datorseende, för att förstå vad bilden visar. Det hjälper framför allt i Google Bilder.
Så skriver du en bra alt-text:
- Beskriv vad som syns och varför bilden finns på just den här sidan, i en kort mening.
- Använd bara sökord om de passar naturligt. Google varnar för att alt-texter fyllda med sökord ger en dålig upplevelse och kan ses som spam.
- En bild som bara är dekoration (en linje, ett bakgrundsmönster) får en tom alt:
alt="". Då hoppar en skärmläsare över den. Ett saknatalt-attribut är något annat: då läser en skärmläsare ibland upp filnamnet. - Finns det viktig text i bilden (öppettider, ett pris, en broschyr), lägg då också in den texten som vanlig text på sidan. Text i en bild är svår att läsa för en skärmläsare och för en sökmotor.
Även filnamnet hjälper lite. Google rekommenderar korta, beskrivande namn och nämner image1.jpg och pic.gif som exempel på vad du bör undvika. bruidsboeket-pioenrozen-wit.jpg (brudbukett med vita pioner) säger mer än IMG_4032.jpg.
Bilders hastighet och storlek tas upp i lektion 4.3.
I praktiken: rubriker i webbplatsbyggare
- I WebOkés AI Builder blir den första rubriken på en sida automatiskt
<h1>och alla följande rubriker<h2>. Så har varje sida exakt en huvudrubrik. Till varje foto kan du fylla i en beskrivning; den blir alt-texten. SEO-kontrollen varnar för foton utan beskrivning. - I WordPress väljer du nivå (H1 till H6) i blockredigeraren i blocket Rubrik. Temat gör oftast redan själva sidtiteln till
<h1>; använd då H2 och lägre i texten. Alt-texten fyller du i vid bilden i mediabiblioteket eller i blocket.
Andra webbplatsbyggare fungerar på liknande sätt. Är du osäker, titta i källkoden (Ctrl+U) eller sök med Ctrl+F efter <h1.
Sammanfattning
- Rubriker (
<h1>till<h6>) är din sidas innehållsförteckning, för läsare, skärmläsare och sökmotorer. - Google har inga problem med flera
<h1>eller en annan ordning, men rekommenderar en tydlig huvudtitel. En tydlig<h1>är en bra vana. - Välj nivå utifrån strukturen, inte teckenstorleken; hoppa helst inte över nivåer.
- En bra alt-text beskriver kort vad som syns; dekoration får
alt=""; ingen sökordsfyllning. - Viktig text hör hemma på sidan, inte bara i en bild.
Quiz
Uppgift
Uppgift A3.2: En huvudrubrik och en logisk struktur. Fyll i adressen till en sida på din egen webbplats. Programmet hämtar sidan, räknar <h1>-rubrikerna och visar rubrikstrukturen som en innehållsförteckning. Du ser om det finns exakt en huvudrubrik som inte är tom, om nivåer hoppas över och hur många bilder som saknar alt-attribut. Fyll i förväg i hur många <h1> du tror att det finns. Ingen egen webbplats? Använd www.rijksoverheid.nl.
Läs mer
- Google Search Central, SEO-startguide (rubriker, alt-text): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
- Google Search Central, bästa praxis för bilder: https://developers.google.com/search/docs/appearance/google-images
- W3C WAI, Headings (tillgängliga rubriker): https://www.w3.org/WAI/tutorials/page-structure/headings/
- W3C WAI, alt-texter: https://www.w3.org/WAI/tutorials/images/