Overskrifter og oppbyggingen av en side

Modul 3: Den tekniske grunnmuren på en side · Lesetid: 11 minutter

Læringsmål: Etter denne leksjonen kan du bygge opp en side med en tydelig hovedoverskrift og logiske mellomtitler, forklare hva Google og skjermlesere gjør med overskrifter, og skrive gode alt-tekster og filnavn for bilder.

Nøkkelbegreper: overskrift (<h1> til <h6>), hovedoverskrift, mellomtittel, hoppe over nivåer, semantisk HTML, skjermleser, formatert tekst som ikke er en overskrift, alt-tekst, tom alt="" for dekorasjon, filnavn, tekst i bilder

Overskriftene er innholdsfortegnelsen på siden din

Ingen liker å lese en lang tekst uten mellomtitler. På nettet gjelder det enda mer: besøkende skumleser en side først og leser først når de ser at svaret står der. Overskrifter hjelper med det. Men overskrifter er mer enn store, fete bokstaver. I HTML er de egne elementer med et 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> er hovedoverskriften: hva handler denne siden om? <h2>-ene er kapitlene, <h3>-ene avsnittene inni dem, og slik videre ned til <h6>. Innrykket over er bare for å vise strukturen; i ekte HTML spiller det ingen rolle.

To grupper leser faktisk denne strukturen:

1. Folk som bruker skjermleser. En blind eller svaksynt besøkende lar ofte skjermleseren lese opp alle overskriftene først, og hopper så til den delen hun eller han leter etter. Uten ekte overskrifter er siden én lang tekstmasse.
2. Søkemotorer. Google bruker overskrifter for å forstå hva de ulike delene av en side handler om.

Hva Google sier om overskrifter

Det går mange myter om overskrifter. Dette sier Google selv:

• I Googles startveiledning for søkemotoroptimalisering står det at rekkefølgen på overskriftene ikke spiller noen rolle for Google Søk, og at det ikke finnes noe magisk antall overskrifter en side må ha. Overskrifter i en logisk rekkefølge er derimot svært nyttige for skjermlesere.
• John Mueller fra Google sa i en video (2019) at Googles systemer ikke har noe problem med flere <h1>-overskrifter på en side. Google prøver å jobbe med HTML-en slik den er: én <h1>, flere, eller bare formatert tekst uten ekte overskrifter.
• I dokumentasjonen om tittellenker (leksjon 3.1) nevner Google likevel en situasjon som kan gå galt: ingen tydelig hovedtittel. Står det flere store, iøynefallende overskrifter øverst og det ikke er klart hvilken som er hovedtittelen, kan Google få problemer med å velge en god tittellenke. Google anbefaler å skille hovedoverskriften tydelig ut, for eksempel som den første synlige <h1>.

Konklusjonen i dette kurset: én tydelig <h1> per side er en god vane, ikke fordi Google straffer deg ellers, men fordi siden da sier tydelig til alle hva den handler om. Lesere, skjermlesere og Google kan ikke misforstå. Kontrollen i oppgave A3.2 gir derfor grønt ved nøyaktig én <h1> som ikke er tom, oransje ved mer enn én og rødt hvis det ikke finnes noen.

Det som ofte går galt

Bygg opp en side som gir svar

En god rekkefølge for nesten alle sider:

1. Hovedoverskrift (<h1>) som sier hva den besøkende finner her. Den ligner ofte tittelen fra leksjon 3.1, men trenger ikke være lik. Tittelen vises i søkeresultatene, hovedoverskriften på selve siden.
2. En kort innledning med det viktigste svaret med en gang.
3. Mellomtitler (<h2>) for hvert delemne, skrevet som noe leseren leter etter: "Hva koster en brudebukett?" sier mer enn "Priser".
4. Ved behov <h3> under en <h2>, ikke løsrevet.

Leksjon 7.3 går nærmere inn på selve skrivingen. Her handler det om skjelettet.

Bilder: alt-tekst og filnavn

En søkemotor "ser" ikke et bilde slik du gjør. Google bruker maskinsyn, men henter mye fra teksten rundt. Den viktigste kilden nevner Google selv: alt-teksten.

<img src="/beelden/bruidsboeket-pioenrozen-wit.jpg"
     alt="Bruidsboeket met witte pioenrozen en eucalyptus">

Alt-teksten (alternativ tekst) har to oppgaver:

• Tilgjengelighet: en skjermleser leser den opp for den som ikke kan se bildet. Hvis bildet ikke lastes inn, viser nettleseren teksten i stedet for bildet.
• Forståelse: Google bruker alt-teksten, sammen med maskinsyn, for å forstå hva bildet viser. Det hjelper særlig i Google Bilder.

Slik skriver du en god alt-tekst:

• Beskriv hva som vises og hvorfor det står på denne siden, i én kort setning.
• Bruk søkeord bare når de passer naturlig. Google advarer om at alt-tekster stappet med søkeord gir en dårlig opplevelse og kan bli sett på som spam.
• Et bilde som bare er pynt (en strek, et bakgrunnsmønster) får en tom alt: alt="". Da hopper en skjermleser over det. Et manglende alt-attributt er noe annet: da leser en skjermleser noen ganger opp filnavnet.
• Står det viktig tekst i bildet (en åpningstid, en pris, en brosjyre), skriv den teksten også som vanlig tekst på siden. Tekst i et bilde er vanskelig å lese for en skjermleser og for en søkemotor.

Også filnavnet hjelper litt. Google anbefaler korte, beskrivende navn og nevner image1.jpg eller pic.gif som eksempler på det du bør unngå. bruidsboeket-pioenrozen-wit.jpg forteller mer enn IMG_4032.jpg.

Hastighet og størrelse på bilder tar vi for oss i leksjon 4.3.

I praksis: overskrifter i nettstedsbyggere

• I AI Builder fra WebOké blir den første overskriften på en side automatisk <h1>, og alle følgende overskrifter blir <h2>. Slik har hver side nøyaktig én hovedoverskrift. For hvert bilde kan du fylle inn en beskrivelse; den blir alt-teksten. SEO-kontrollen varsler om bilder uten beskrivelse.
• I WordPress velger du nivået (H1 til H6) i blokkredigeringen på blokken Overskrift. Temaet gjør vanligvis selve sidetittelen til <h1>; bruk da H2 og lavere i teksten. Alt-teksten fyller du inn på bildet i mediebiblioteket eller i blokken.

Andre nettstedsbyggere fungerer på lignende måte. Er du usikker, se i kildekoden (Ctrl+U) eller søk med Ctrl+F etter <h1.

Oppsummering

• Overskrifter (<h1> til <h6>) er innholdsfortegnelsen på siden din, for lesere, skjermlesere og søkemotorer.
• Google har ikke noe problem med flere <h1>-er eller en annen rekkefølge, men anbefaler en tydelig hovedtittel. Én tydelig <h1> er en god vane.
• Velg nivå ut fra oppbyggingen, ikke skriftstørrelsen; unngå helst å hoppe over nivåer.
• En god alt-tekst beskriver kort hva som vises; pynt får alt=""; ingen opphoping av søkeord.
• Viktig tekst hører hjemme på siden, ikke bare i et bilde.

Quiz

Oppgave

Oppgave A3.2: Én hovedoverskrift og en logisk oppbygging. Fyll inn adressen til en side på ditt eget nettsted. Programmet henter siden, teller <h1>-overskriftene og viser overskriftsstrukturen som en innholdsfortegnelse. Du ser om det finnes nøyaktig én hovedoverskrift som ikke er tom, om noen nivåer blir hoppet over, og hvor mange bilder som mangler alt-attributt. Fyll først inn hvor mange <h1>-er du tror det er. Har du ikke eget nettsted? Bruk www.rijksoverheid.nl.

Les mer

• Google Search Central, startveiledning for søkemotoroptimalisering (overskrifter, alt-tekst): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, beste praksis for bilder: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (tilgjengelige overskrifter): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, alt-tekster: https://www.w3.org/WAI/tutorials/images/