Varför din logotyp inte hör hemma i en h1-tagg

Webbutveckling
8 mars 2026

Innehållsförteckning

Det är 2026. Vi bygger appar med React Server Components, vi deployar till edge networks, vi optimerar för Core Web Vitals. Och ändå ser jag fortfarande webbplatser där logotypen sitter i en <h1>. Med text-indent: -9999px. Eller display: none. Eller någon annan CSS-hack från förra årtusendet.

Det här är historien om ett envist misstag. Metoden är tekniskt föråldrad, och den är dessutom fel för tillgängligheten, för innehållsstrukturen och ja, även för SEO.

Tiden då CSS Image Replacement var “best practice”

Låt oss börja med en historielektion. Året är 2003. CSS2.1 är nyligen officiellt. Firefox heter fortfarande Phoenix. Jeffrey Zeldmans Designing with Web Standards ligger på nattduksbordet hos varje webbutvecklare med självrespekt.

På den tiden hade du ett problem. Du ville visa din logotyp, en snyggt formgiven bild, där ditt varumärke stod. Samtidigt sa SEO-experterna, alltså människor som trodde att de visste hur Google fungerar, att ditt företagsnamn måste stå i en <h1>. “Den viktigaste headingen för rankningar!”

Lösningen verkade briljant: stoppa in ditt företagsnamn i en <h1>, dölj texten med CSS och visa din logotyp som bakgrundsbild. Tada! Semantisk HTML och en snygg logotyp.

Todd Fahrner nämns ofta som den ursprungliga upphovsmannen (Fahrner Image Replacement, FIR). Douglas Bowman och Jeffrey Zeldman populariserade det. I augusti 2003 uppfann Mike Rundle Phark-metoden:

h1 {
  text-indent: -9999px;
  background: url(logo.png) no-repeat;
  width: 200px;
  height: 80px;
}

Sedan följde dussintals varianter. Gilder/Levin. Shea Enhancement. Malarkey. Leahy/Langridge. HTML5 Boilerplate-metoden från 2012–2014 med .visuallyhidden. Alla med sina egna för- och nackdelar, alla med ett löfte om att “det här fungerar verkligen med skärmläsare”.

Problemet: det fungerade aldrig riktigt

Saken är den: Joe Clark testade redan detta 2003 på A List Apart. Hans slutsats? FIR är inte tillgängligt. Skärmläsare hanterade display: none inkonsekvent. JAWS läste text med display: none, andra skärmläsare inte. Vissa skärmläsare läste text-indent: -9999px som “negative nine thousand nine hundred ninety-nine pixels”.

Metoden var alltså motbevisad samma år som den slog igenom.

Men det fortsatte att marknadsföras som best practice. På grund av SEO. Och för att det var tekniskt intressant. Och för att vi alla gärna hackade CSS.

Varför det här inte är en bra idé (och aldrig var det)

Låt oss titta på varför det är fundamentalt fel att placera sin logotyp i en <h1>. Inte “lite suboptimalt”. Helt enkelt fel.

1. Skärmläsaranvändare navigerar via headings

Här är något som många utvecklare inte vet: människor som använder skärmläsare skannar ofta webbsidor via headings. De trycker på H-tangenten (i JAWS eller NVDA) och hoppar från heading till heading.

Föreställ dig: du letar efter information om returvillkor i en webbshop. Du trycker på H för att gå till den första headingen. Skärmläsaren säger: “Heading level 1: Fancy Webshop”.

Sedan går du till nästa sida, den om frakt. Du trycker på H. “Heading level 1: Fancy Webshop”.

Ytterligare en sida, kontaktsidan. “Heading level 1: Fancy Webshop”.

Besökare som navigerar via headings vet inte var de är. Varje sida börjar med samma <h1>, och den säger ingenting om vad som står på just den sidan.

En bra <h1> berättar var du är:

“Returvillkor”
“Frakt och leverans”
“Kontakt”

Inte ditt företagsnamn. Det står redan i <title>, det står redan i din logotyp. Vi behöver det inte ännu en gång.

2. h1 beskriver ditt innehåll, inte din webbplats

<h1> är inte tänkt som “det viktigaste elementet för SEO”. Det är titeln på dokumentet. Huvudrubriken för innehållet på just den sidan.

Tänk på en tidning. Tidningens namn står högst upp (din logotyp). Men artikeln börjar med en rubrik: “Inflationen sjunker till lägsta nivån på 3 år”. Det är din <h1>. Inte “Tidningen” ovanför varje artikel.

Om din startsida handlar om “Hållbara sportkläder för kvinnor”, då är det din <h1>. Om din produktsida handlar om “Löpartröja i återvunnen polyester, blå”, då är det din <h1>.

3. Din dokumentstruktur är trasig

Om din logotyp är <h1>, vad blir då titeln på sidans innehåll? En <h2>? Då stämmer hela din heading-hierarki inte längre.

Dålig struktur:

<header>
  <h1>Företagsnamn</h1>
</header>
<main>
  <h2>Välkommen till vår verksamhet</h2>
  <p>Innehåll...</p>
  <h3>Varför välja oss?</h3>
</main>

Bra struktur:

<header>
  <a href="/">
    <img src="logo.svg" alt="Företagsnamn" />
  </a>
</header>
<main>
  <h1>Välkommen till vår verksamhet</h1>
  <p>Innehåll...</p>
  <h2>Varför välja oss?</h2>
</main>

Ser du skillnaden? I den bra strukturen börjar innehållet logiskt med nivå 1. I den dåliga strukturen börjar alla riktiga rubriker på nivå 2, medan nivå 1 äts upp av din logotyp.

4. SEO-myter som aldrig dör

“Men Google förväntar sig väl en h1 med ditt viktigaste nyckelord?”

Nej. Googles John Mueller har motbevisat detta gång på gång. Google använder headings för att förstå strukturen och innehållet på din sida. Inte för att avgöra om din webbplats rankar.

Flera <h1>-taggar? Inga problem. Ingen <h1>? Också okej (även om det inte är idealt). Ditt företagsnamn i <h1> på varje sida? Google vet redan vad ditt företag heter. Du behöver inte slösa en <h1> på det.

Vad du bör göra istället

Nog med klagomål. Så här gör du i stället.

Logotyp som länk till startsidan

<header>
  <a href="/">
    <img src="logo.svg" alt="Företagsnamn" />
  </a>
  <nav>
    <!-- Din navigering -->
  </nav>
</header>

Enkelt. Tydligt. Tillgängligt. alt-attributet ger länken sitt namn, så skärmläsaren säger “Företagsnamn, länk”.

Du ser ofta ett title="till startsidan" på den här länken. Lägg inte till det. Ett title visas bara vid muspekning, alltså aldrig för den som använder tangentbord och nästan aldrig på en pekskärm, och skärmläsare hanterar det olika: en del läser det i stället för alt-texten, andra hoppar över det. Du lägger till otydlighet för att lösa ett problem som inte finns, för de flesta besökare vet redan att logotypen högst upp leder till startsidan.

Och din h1?

Den står i ditt innehåll. Olika på varje sida.

Startsida:

<main>
  <h1>Hållbara sportkläder för kvinnor</h1>
  <p>Tillverkade av återvunnet material...</p>
</main>

Produktsida:

<main>
  <h1>Löpartröja i återvunnen polyester, blå</h1>
  <img src="troja.jpg" alt="Blå löpartröja med rund halsringning, framifrån" />
  <p>Den här tröjan är tillverkad av...</p>
</main>

Kontaktsida:

<main>
  <h1>Kontakta oss</h1>
  <p>Frågor? Vi hjälper dig gärna.</p>
  <form>...</form>
</main>

Ser du mönstret? <h1> berättar var du är och vad du ska läsa. Inte vem som har byggt webbplatsen.

Vad gör du om din startsida inte har en tydlig rubrik?

Då hittar du på en. Seriöst.

Din startsida har ett syfte. Kanske är det att få nya kunder, att förklara din tjänst eller att sälja produkter. Sammanfatta det syftet i en mening. Det är din <h1>.

Exempel:

“Stockholms bästa kaffe”
“Webbdesign som konverterar”
“Ekonomisk rådgivning utan krusiduller”

Vill du verkligen inte visa en rubrik, och jag avråder från det, kan du dölja den visuellt med .visually-hidden. Den finns då fortfarande i HTML:en.

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

<main>
  <h1 class="visually-hidden">
    Välkommen till Företagsnamn, Stockholms bästa kaffe
  </h1>
  <!-- Resten av din startsida -->
</main>

Skärmläsare läser det. Google indexerar det. Visuella användare ser det inte. Men gör bara detta om du verkligen har en bra anledning.

Sammanfattning

Metoden att placera sin logotyp i en <h1> härstammar från 2003. En tid av CSS-hacks, SEO-myter och inkonsekvent skärmläsarbeteende. Det var inte ens en bra idé då. 2026 är det helt enkelt fel.

Ge varje sida en <h1> som beskriver vad som finns på den sidan. Inte ditt företagsnamn. Inte din tagline. Titeln på innehållet på just den sidan.

Startsida: “Hållbara sportkläder för kvinnor” Produktsida: “Löpartröja i återvunnen polyester, blå” Kontaktsida: “Kontakta oss”

Inte på varje sida: “Företagsnamn”

Dina skärmläsaranvändare tackar dig. Det gör också du själv, den dag du ska underhålla kodbasen.

Osäker på om din webbplats är rätt uppbyggd? På Proper Access granskar vi kod och struktur och visar konkret vad som behöver ändras, med kodexempel. Kontakta oss.

Julia Tol är grundare av Proper Access och granskar webbplatser sedan 2019. Hon skriver rapporter som utvecklare kan arbeta ur direkt: ordnade per komponent, med skärmdumpar och kodexempel.

Dela :