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

Innehållsförteckning

Varför din logotyp inte hör hemma i en h1-tagg: historien om ett envist misstag

Det är 2026. Vi bygger appar med React Server Components, vi deployar till edge networks, vi optimerar för Core Web Vitals. Och ändå — ä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 pleistocen.

Dags att rätta till det här. För den här metoden är inte bara tekniskt föråldrad — den är helt enkelt fel för tillgänglighet, innehållsstruktur och ja, även för SEO.

Tiden då CSS Image Replacement var “best practice”

Låt oss börja med en historielekton. Å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, men SEO-experterna (läs: människor som trodde att de visste hur Google fungerar) sa 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”.

Hoppsan. Ganska snabbt.

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 — om frakt. Du trycker på H. “Heading level 1: Fancy Webshop”.

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

Säg hejdå till dina musløsa besökare. De har ingen aning om var de är, för varje sida börjar med samma värdelösa <h1>.

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 Å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. Här är rätt tillvägagångssätt — 2026 och framåt.

Logotyp som länk till startsidan

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

Enkelt. Tydligt. Tillgängligt. alt-attributet ser till att skärmläsare vet vad logotypen är. title-attributet är “nice-to-have”-information. Personligen tycker jag det är lite överdrivet att lägga till “till startsidan”. De flesta vet att logotypen högst upp på sidan är en länk 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 Återvunnen Polyester — Blå</h1>
  <img src="troja.jpg" alt="" />
  <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: få nya kunder. Eller: förklara din tjänst. Eller: sälja produkter. Vad det syftet än är — sammanfatta det i en mening. Det är din <h1>.

Exempel:

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

Om du verkligen inte vill visa en rubrik (vilket jag avråder från, men okej), kan du dölja den visuellt med .visually-hidden — men den finns 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 Återvunnen Polyester — Blå” Kontaktsida: “Kontakta oss”

Inte på varje sida: “Företagsnamn”

Dina skärmläsaranvändare, din innehållsstruktur och ditt framtida jag som ska underhålla kodbasen — de kommer att tacka dig.

Osäker på om din webbplats är rätt uppbyggd? På Proper Access hjälper vi utvecklare och team att skriva tillgänglig kod — inte med vaga råd, utan med konkreta kodgranskningar och praktiska lösningar. Kontakta oss via properaccess.se.

Julia Tol är grundare av Proper Access och hjälper organisationer att uppnå digital tillgänglighet. Inte med tjocka rapporter, utan med konkreta lösningar som utvecklare faktiskt kan använda.

Taggar :

Dela :