Sidtitel — vanliga misstag och hur du löser dem

Innehållsförteckning

Sidtitel — vanliga misstag och hur du löser dem

Varje webbsida behöver en titel som beskriver sidans ämne eller syfte. Titeln finns i <title>-elementet i HTML-dokumentets <head>. Du ser titeln i webbläsarens flik, i sökresultat och i bokmärken.

För skärmläsaranvändare är sidtiteln extra viktig. Det är det första de hör när de öppnar en sida. En tydlig titel hjälper dem att förstå var de är, utan att först behöva navigera genom hela sidan.

En bra sidtitel:

  • Beskriver sidans ämne eller syfte.
  • Är unik inom webbplatsen. Varje sida har en egen titel.
  • Är kort men informativ.
  • Börjar med den mest specifika informationen. Sätt sidnamnet före webbplatsnamnet.

I formulär med flera steg är det bra att ange steget i titeln. På sidor med sökresultat är det bra att inkludera söktermen i titeln.

Vanliga misstag

Misstag: sidtiteln saknas

Utan ett <title>-element visar webbläsaren URL:en eller filnamnet i fliken. Skärmläsare läser då upp något som “https://example.com/sida-3b.html", vilket inte säger något om innehållet.

Gör inte så här — inget title-element i head:

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="style.css" />
</head>

Gör så här — beskrivande titel i head:

<head>
  <meta charset="utf-8" />
  <title>Kontakt - Stockholms stad</title>
  <link rel="stylesheet" href="style.css" />
</head>

Misstag: sidtiteln är tom

Ett tomt <title>-element är lika dåligt som en saknad titel. Webbläsaren visar då URL:en i fliken.

Gör inte så här — tomt title-element:

<title></title>

Gör inte så här — title-element med bara mellanslag:

<title>   </title>

Gör så här — beskrivande sidtitel:

<title>Vanliga frågor - Stockholms stad</title>

Misstag: alla sidor har samma titel

När varje sida har samma titel kan besökare inte skilja på vilken sida de befinner sig. Det här är särskilt ett problem med flera öppna flikar.

Gör inte så här — samma generiska titel på varje sida:

<title>Stockholms stad</title>

Gör så här — unik titel per sida:

<!-- På startsidan: -->
<title>Start - Stockholms stad</title>

<!-- På kontaktsidan: -->
<title>Kontakt - Stockholms stad</title>

<!-- På sidan med vanliga frågor: -->
<title>Vanliga frågor - Stockholms stad</title>

Misstag: sidtiteln beskriver inte innehållet

En titel som “Sida 1” eller “Välkommen” säger ingenting om sidans syfte eller innehåll. En besökare med flera öppna flikar kan inte hitta tillbaka till rätt sida.

Gör inte så här — intetsägande sidtitel:

<title>Sida 1</title>
<title>Välkommen</title>
<title>Untitled Document</title>

Gör så här — beskrivande sidtitel:

<title>Ansök om pass - Stockholms stad</title>

Misstag: webbplatsnamnet står före sidnamnet

I flikar syns ofta bara början av titeln. Om webbplatsnamnet står först ser besökare samma början på alla flikar och kan inte skilja sidorna åt.

Gör inte så här — webbplatsnamnet före sidnamnet:

<title>Stockholms stad - Ansök om pass</title>
<title>Stockholms stad - Förnya körkort</title>

Gör så här — sidnamnet före webbplatsnamnet:

<title>Ansök om pass - Stockholms stad</title>
<title>Förnya körkort - Stockholms stad</title>

Misstag: titeln uppdateras inte vid sidändring i en single-page-applikation

I en single-page-applikation (SPA) ändras innehållet utan att webbläsaren laddar en ny sida. Om titeln inte uppdateras visar webbläsaren fortfarande den gamla titeln. Skärmläsare meddelar då inte att det är en ny sida.

Gör så här — uppdatera titeln vid varje routeändring med vanilla JavaScript:

function navigeraTill(sida) {
  // ... ladda innehåll ...
  document.title = sida.titel + " - Stockholms stad";
}

Gör så här — uppdatera titeln vid varje routeändring med React useEffect:

useEffect(() => {
  document.title = `${sidTitel} - Stockholms stad`;
}, [sidTitel]);

Misstag: felmeddelande eller sökresultat saknas i titeln

Vid ett formulär med fel eller en sida med sökresultat är det bra att inkludera den informationen i titeln. Skärmläsaranvändare hör då direkt att något har ändrats.

Gör inte så här — ingen indikation av formulärfel i titeln:

<title>Kontaktformulär - Stockholms stad</title>

Gör så här — felmeddelande i titeln:

<title>2 fel - Kontaktformulär - Stockholms stad</title>

Gör inte så här — sökresultat saknas i titeln:

<title>Sök - Stockholms stad</title>

Gör så här — sökterm och antal resultat i titeln:

<title>12 resultat för "pass" - Sök - Stockholms stad</title>

Misstag: steg saknas i titeln på ett flerstegsformulär

I ett formulär med flera steg vet besökaren inte i vilket steg formuläret befinner sig om den informationen saknas i titeln.

Gör inte så här — ingen steginformation i titeln:

<title>Anmäla flytt - Stockholms stad</title>

Gör så här — steg angivet i titeln:

<title>Steg 2 av 4: Ny adress - Anmäla flytt - Stockholms stad</title>

Relaterade framgångskriterier

  • SC 1.3.1 — Information och relationer: sidans struktur ska vara programmatiskt bestämbar.
  • SC 2.4.4 — Länksyfte (i kontext): syftet med varje länk ska vara tydligt.
  • SC 2.4.6 — Rubriker och etiketter: rubriker och etiketter beskriver ämne eller syfte.
  • SC 3.2.3 — Konsekvent navigering: navigering ska vara konsekvent inom en webbplats.
  • SC 3.2.4 — Konsekvent identifiering: komponenter med samma funktion benämns konsekvent.

Hur du testar

För alla

  1. Titta på titeln i webbläsarens flik. Beskriver titeln vad sidan handlar om?
  2. Öppna flera sidor från samma webbplats i olika flikar. Är titlarna unika och tydliga?
  3. Fyll i ett formulär med fel och skicka det. Ändras titeln för att visa felmeddelandet?
  4. Gör en sökning. Innehåller titeln söktermen eller antalet resultat?
  5. Gå igenom ett flerstegsformulär. Anges steget i titeln?

För utvecklare

  1. Kontrollera att varje sida har ett <title>-element i <head>. Öppna källkoden eller inspektera elementet i DevTools.
  2. Kontrollera att titeln inte är tom och inte innehåller standardtext som “Untitled Document” eller “Home”.
  3. Kontrollera att sidnamnet står före webbplatsnamnet i titeln.
  4. Testa single-page-applikationer: navigera mellan sidor och kontrollera att document.title uppdateras. Kontrollera detta i DevTools console med document.title.
  5. Kontrollera felscenarier. Uppdateras titeln efter ett formulärvalideringsfel?
  6. Använd axe DevTools eller WAVE för en första skanning. Ett saknat eller tomt <title>-element upptäcks automatiskt.

Taggar :

Dela :