Overskrifter og opbygningen af en side

Modul 3: Det tekniske grundlag for en side · Læsetid: 11 minutter

Læringsmål: Efter denne lektion kan du bygge en side op med en tydelig hovedoverskrift og logiske underoverskrifter, forklare hvad Google og skærmlæsere gør med overskrifter, og skrive gode alt-tekster og filnavne til billeder.

Nøglebegreber: overskrift (<h1> til <h6>), hovedoverskrift, underoverskrift, at springe et niveau over, semantisk HTML, skærmlæser, formateret tekst, der ikke er en overskrift, alt-tekst, tom alt="" til pynt, filnavn, tekst i billeder

Overskrifter er indholdsfortegnelsen på din side

Ingen har lyst til at læse en lang tekst uden underoverskrifter. På nettet gælder det endnu mere: besøgende skimmer først en side og læser først, når de kan se, at svaret står der. Overskrifter hjælper med det. Men overskrifter er mere end store, fede bogstaver. I HTML er de særskilte elementer med et niveau:

<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: hvad handler siden om? <h2>'erne er kapitlerne, <h3>'erne afsnittene inden i dem, og sådan videre til <h6>. (Eksemplet er hollandsk: skræddersyede brudebuketter, sådan arbejder vi, det første møde, prøvebuketten, eksempler, ofte stillede spørgsmål.) Indrykningen ovenfor er kun for at vise strukturen; i rigtig HTML betyder den ikke noget.

To grupper læser faktisk den struktur:

1. Mennesker med skærmlæser. En blind eller svagtseende besøgende lader ofte skærmlæseren læse alle overskrifter op først og springer så til det afsnit, han leder efter. Uden rigtige overskrifter er siden én lang tekstmasse.
2. Søgemaskiner. Google bruger overskrifter til at forstå, hvad de forskellige dele af en side handler om.

Hvad Google siger om overskrifter

Der går mange myter om overskrifter. Det her siger Google selv:

• I Googles SEO-startguide står der, at rækkefølgen af overskrifter ikke betyder noget for Google Søgning, og at der ikke er noget magisk antal overskrifter, en side skal have. Overskrifter i en logisk rækkefølge er til gengæld rigtig gode for skærmlæsere.
• John Mueller fra Google sagde i en video (2019), at Googles systemer ikke har noget problem med flere <h1>-overskrifter på en side. Google prøver at arbejde med HTML'en, som den er: én <h1>, flere, eller kun formateret tekst uden rigtige overskrifter.
• I dokumentationen om titellinks (lektion 3.1) nævner Google dog en situation, der kan gå galt: ingen tydelig hovedtitel. Står der flere store, iøjnefaldende overskrifter øverst, og er det uklart, hvilken der er hovedtitlen, kan Google have svært ved at vælge et godt titellink. Google anbefaler at gøre hovedoverskriften tydelig, for eksempel som den første synlige <h1>.

Konklusionen i dette kursus: én tydelig <h1> pr. side er en god vane, ikke fordi Google ellers straffer dig, men fordi siden så tydeligt fortæller alle, hvad den handler om. Læsere, skærmlæsere og Google kan ikke misforstå den. Tjekket i opgave A3.2 giver derfor grønt ved præcis én ikke-tom <h1>, orange ved mere end én og rødt, hvis der ingen er.

Det, der tit går galt

Byg en side, der giver svar

En god rækkefølge til næsten enhver side:

1. Hovedoverskrift (<h1>), der fortæller, hvad den besøgende finder her. Den ligner ofte titlen fra lektion 3.1, men behøver ikke være den samme. Titlen står i søgeresultaterne, hovedoverskriften på selve siden.
2. En kort indledning med det vigtigste svar med det samme.
3. Underoverskrifter (<h2>) til hvert delemne, skrevet som noget, læseren leder efter: "Hvad koster en brudebuket?" siger mere end "Priser".
4. Hvor det er nødvendigt, <h3> under en <h2>, ikke for sig selv.

Lektion 7.3 går videre med selve skrivningen. Her handler det om skelettet.

Billeder: alt-tekst og filnavn

En søgemaskine "ser" ikke et foto, som du gør. Google bruger computersyn, men henter meget fra teksten omkring billedet. Den vigtigste kilde nævner Google selv: alt-teksten.

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

Alt-teksten (alternativ tekst) har to opgaver:

• Tilgængelighed: en skærmlæser læser den op for dem, der ikke kan se billedet. Kan billedet ikke indlæses, viser browseren den i stedet for fotoet.
• Forståelse: Google bruger alt-teksten sammen med computersyn til at forstå, hvad billedet viser. Det hjælper især i Google Billeder.

Sådan skriver du en god alt-tekst:

• Beskriv, hvad man ser, og hvorfor det står på denne side, i én kort sætning.
• Brug kun søgeord, hvis de passer naturligt. Google advarer om, at alt-tekster proppet med søgeord giver en dårlig oplevelse og kan blive set som spam.
• Et billede, der kun er pynt (en streg, et baggrundsmønster), får en tom alt: alt="". Så springer en skærmlæser det over. En manglende alt-attribut er noget andet: så læser en skærmlæser nogle gange filnavnet op.
• Står der vigtig tekst i billedet (en åbningstid, en pris, en folder), så sæt også teksten helt almindeligt på siden. Tekst i et billede er svær at læse for en skærmlæser og for en søgemaskine.

Også filnavnet hjælper en smule. Google anbefaler korte, beskrivende navne og nævner image1.jpg eller pic.gif som eksempler på, hvad du hellere skal lade være med. bruidsboeket-pioenrozen-wit.jpg fortæller mere end IMG_4032.jpg.

Billeders hastighed og størrelse kommer vi til i lektion 4.3.

I praksis: overskrifter i hjemmesidebyggere

• I WebOké's AI Builder bliver den første overskrift på en side automatisk <h1>, og alle følgende overskrifter bliver <h2>. Så har hver side præcis én hovedoverskrift. Ved hvert foto kan du skrive en beskrivelse; den bliver til alt-teksten. SEO-tjekket advarer om fotos uden beskrivelse.
• I WordPress vælger du i blokeditoren niveauet (H1 til H6) i blokken Overskrift. Temaet gør som regel selv sidetitlen til <h1>; brug så H2 og lavere i teksten. Alt-teksten udfylder du ved billedet i mediebiblioteket eller i blokken.

Andre hjemmesidebyggere fungerer på samme måde. Er du i tvivl, så kig i kildekoden (Ctrl+U), eller søg med Ctrl+F efter <h1.

Opsummering

• Overskrifter (<h1> til <h6>) er indholdsfortegnelsen på din side, for læsere, skærmlæsere og søgemaskiner.
• Google har ikke noget problem med flere <h1>'er eller en anden rækkefølge, men anbefaler en tydelig hovedtitel. Én tydelig <h1> er en god vane.
• Vælg niveauet ud fra opbygningen, ikke efter skriftstørrelse; spring helst ingen niveauer over.
• En god alt-tekst beskriver kort, hvad man ser; pynt får alt=""; ingen ophobning af søgeord.
• Vigtig tekst hører til på siden, ikke kun i et billede.

Quiz

Opgave

Opgave A3.2: Én hovedoverskrift og en logisk opbygning. Indtast adressen på en side fra dit eget website. Programmet henter siden, tæller <h1>-overskrifterne og viser overskriftsstrukturen som en indholdsfortegnelse. Du ser, om der er præcis én ikke-tom hovedoverskrift, om der springes niveauer over, og hvor mange billeder der mangler en alt-attribut. Skriv på forhånd, hvor mange <h1>'er du tror, der er. Har du ikke dit eget website? Brug www.rijksoverheid.nl.

Læs mere

• Google Search Central, SEO-startguide (overskrifter, alt-tekst): https://developers.google.com/search/docs/fundamentals/seo-starter-guide
• Google Search Central, Bedste praksis for billeder: https://developers.google.com/search/docs/appearance/google-images
• W3C WAI, Headings (tilgængelige overskrifter): https://www.w3.org/WAI/tutorials/page-structure/headings/
• W3C WAI, Alt-tekster: https://www.w3.org/WAI/tutorials/images/