Indhold
  1. Hvad betyder semantisk HTML for SEO?
  2. Giv sidens områder tydelige roller
  3. Eksempel: en blogartikel med header og figure
  4. Brug overskrifter som en disposition
  5. Links, knapper og billeder skal fungere i praksis
  6. Sådan kontrollerer I en eksisterende side
  7. Kilder

Semantisk HTML er at vælge HTML-elementer efter indholdets betydning. En overskrift markeres med h1 eller h2, navigation med nav og hovedindhold med main. CSS bestemmer, hvordan elementerne ser ud. HTML fortæller, hvad de er.

Det gør strukturen tilgængelig for blandt andet skærmlæsere og giver et bedre grundlag for navigation og betjening. En side kan se ens ud med og uden de rigtige elementer, selv om den fungerer forskelligt for den, der bruger tastatur eller får indholdet læst op.

Hvad betyder semantisk HTML for SEO?

Google Search Central anbefaler semantisk HTML og tekstindhold, som er tilgængeligt i sidens DOM. Vigtige forklaringer bør derfor være rigtig tekst på siden frem for kun at stå i et billede eller et canvas. Det samme gælder tekst, der indsættes med CSS-egenskaben content. Den er ikke en del af DOM’en, og Google skriver, at Search ignorerer den.

Det betyder ikke, at et article-tag giver en bedre placering. Google skriver i sin SEO Starter Guide, at overskrifternes rækkefølge ikke har betydning for Google Search på samme måde, som den har for skærmlæsere. En logisk struktur er stadig god praksis, men den skal ikke sælges som et særskilt rankingtrick.

Vi behandler semantikken som en del af teknisk SEO: Siden skal kunne læses og bruges, og teksten skal svare på det, den besøgende kom for.

Giv sidens områder tydelige roller

W3C WAI beskriver, hvordan sidens områder kan identificeres af browsere og hjælpemidler. De vigtigste er:

  • header: indledende indhold, eksempelvis logo og navigation øverst på siden.
  • nav: en væsentlig navigationsgruppe, eksempelvis hovedmenuen.
  • main: sidens primære indhold. Brug ét synligt hovedområde.
  • article: et selvstændigt stykke indhold, eksempelvis et blogindlæg.
  • section: en tematisk del af indholdet, normalt med en overskrift.
  • aside: supplerende indhold, der kan forstås som et særskilt område.
  • footer: afsluttende oplysninger for siden eller det indhold, den ligger i.

En artikel kan have sin egen header med overskrift og dato. Det er en anden header end sidens overordnede topområde. article er beholderen omkring artiklen; h1 er overskriften inde i den. Et div-element er stadig fint, når en beholder kun bruges til layout.

Eksempel: en blogartikel med header og figure

Her er et forenklet udsnit af en sides body. Navigationen ligger i sidens header. Artiklen ligger i main og har sin egen header med H1. Billedet og billedteksten er samlet i figure.

<header>
  <a href="/">Adbull</a>
  <nav aria-label="Hovedmenu">
    <a href="/viden/">Blog</a>
  </nav>
</header>

<main id="indhold">
  <article>
    <header>
      <h1>Semantisk HTML</h1>
      <p>En guide til sidens struktur.</p>
    </header>

    <figure>
      <img src="html-struktur.webp"
           alt="Main indeholder en artikel med overskrift og figur.">
      <figcaption>Eksempel på en blogartikels opbygning.</figcaption>
    </figure>

    <h2>Gør indholdet let at finde</h2>
    <p>Brug elementer, der beskriver indholdets rolle.</p>
  </article>
</main>

<footer>
  <a href="/kontakt-os/">Kontakt Adbull</a>
</footer>

En figure samler en illustration, et diagram eller andet indhold som en enhed. En eventuel figcaption er dens billedtekst og skal være første eller sidste barn i figure. Det følger WHATWG HTML Standard. Ikke alle billeder behøver en figure, og en billedtekst er valgfri.

Sidens header med logo og nav ligger over main. Main indeholder article, som har sin egen header med H1, en figure med billede og figcaption og et afsnit med H2. Sidens footer ligger under main. Hvert element har en kort forklaring.
Et forenklet layout med hvert elements rolle: Sidens header og footer ligger uden for main. Inde i main ligger article med sin egen header og H1, en figure med billedtekst og et afsnit med H2. Illustration i fuld størrelse.

Brug overskrifter som en disposition

På et almindeligt blogindlæg anbefaler vi én tydelig H1 til artiklens titel, H2 til hovedafsnit og H3 til underafsnit. Det er en praktisk redaktionel regel, ikke et krav om, at Google kun kan læse sider med præcis én H1. Det konkrete arbejde med overskriften er beskrevet under H1-tagget.

W3C WAI anbefaler, at overskriftsniveauerne afspejler indholdets opbygning. Undgå derfor at springe fra H2 direkte til H4 for at få mindre skrift. Det er derimod naturligt at gå fra H3 tilbage til H2, når et nyt hovedafsnit begynder.

Prøv at læse kun overskrifterne: Kan man forstå forløbet uden brødteksten? Hvis ikke, skal formuleringerne eller rækkefølgen sandsynligvis justeres. Skriftstørrelsen kan ændres i CSS uden at ændre niveauet.

Brug <a href="…">, når brugeren skal til en anden adresse eller et sted på siden. Brug button til en handling, eksempelvis at åbne en menu eller sende en formular. En klikbar div får ikke automatisk tastaturbetjening eller en knaps rolle. Linkene betyder også noget for Google: Google kan som udgangspunkt kun følge et link, der er et a-element med en href. Et element, der kun sender videre med et script, bliver typisk ikke fundet som link. W3C WAI’s knapvejledning beskriver blandt andet aktivering med Enter og mellemrum.

Et informativt billede skal have en alt-tekst, der formidler dets relevante betydning. Ren pynt får alt="". Et billede, der fungerer som link eller knap, skal beskrive funktionen. Det er den opdeling, W3C WAI bruger. En synlig billedtekst erstatter ikke automatisk behovet for en passende alt-tekst. Filnavne og formater hører til image SEO.

Brug også rigtige lister til opremsninger og tabeller med overskriftsceller til data, der skal sammenlignes. Så ligger relationerne i HTML’en og ikke kun i den måde, indholdet er placeret på.

Sådan kontrollerer I en eksisterende side

  1. Se den renderede HTML. Åbn browserens udviklerværktøjer og undersøg elementerne. En stor overskrift kan stadig være en div, og et main-tag kan være tomt.
  2. Gennemgå dispositionen. Kontrollér, at H1 beskriver siden, og at underoverskrifterne hænger logisk sammen.
  3. Prøv tastaturet. Brug Tab og Shift+Tab. Kan I se fokus, nå menuen, følge links og aktivere knapper?
  4. Undersøg tilgængelighedstræet. Kontrollér i browserens tilgængelighedsværktøjer, at navigation, hovedområde og kontroller har de forventede roller og navne.
  5. Læs billedernes alternativer. Passer alt-teksten til billedets funktion, og er ren pynt markeret med tom alt?

En automatisk test kan hjælpe med at finde fejl, men prøv også den konkrete opgave: Kan en besøgende finde svaret og tage næste skridt? Et grønt testresultat fortæller ikke alene, om siden er brugbar.

Semantisk HTML beskriver elementerne på siden. Schema markup er et særskilt lag af strukturerede data om indholdet. Begge skal stemme overens med det, den besøgende møder. Hos Adbull indgår arbejdet med sidens struktur i vores SEO-forløb.

Kilder

Skrevet af

Troels Kammer

Webudvikling, SEO & GEO hos Adbull

Troels har 5 års erfaring med SEO og hjælper til dagligt virksomheder med at bygge hjemmesider, der er hurtige, konverterer godt og bliver fundet på Google.

tk@adbull.dk