Jag byggde ett litet verktyg för rubriker
Rubrikstrukturer är en av de saker jag tittar på nästan varje gång jag öppnar en webbplats. Till slut byggde jag ett eget verktyg för det. Mest som en kul grej.
Rubrikstrukturen på en webbplats är inte oviktig
Jag tittar ofta på rubrikstrukturen när jag granskar en webbplats. Rubriker ska ligga på rätt nivå, en tillgänglighetsgrej men även lite viktigt för SEO.
En av mina absoluta favorit sajter på Internet var en sida som outlinade strukturen så att användaren enkelt kan se vad som är vad. Men hittade inte sajten…
Så jag byggde en grej… Claude byggde en grej…
En rubrik är inte alltid en rubrik
Lite bakgrund.
Något kan se ut som en rubrik utan att vara det i HTML. För ögat spelar det kanske ingen roll MEN för den som använder skärmläsare gör det det OCH Google är också lite petig här.
Rubriker används för att förstå sidan och hoppa mellan delar. Då behöver strukturen hänga ihop. H1, h2, h3. Inte h2, h4, h3 och en fet <p> som någon tyckte såg lagom stor ut.
Det luriga är att det här ofta inte syns för ögat. Sidan kan se helt rätt ut, samtidigt som strukturen under ytan är fel.
Så jag byggde en grej
Meme-VD:n som “byggde en grej”…
Den HÄR gången fanns det åtminstone ett faktiskt problem först. Jag ville snabbt kunna se rubrikstrukturen på en sida utan att öppna utvecklarverktygen och leta runt i HTML.
Bygg ett plug-in till Chrome som låter mig se alla rubriker på sidan. En klassisk rubrik-outliner. Make no misstakes!Resultatet blev Heading Outliner. Det visar rubrikerna direkt på sidan och som en enkel struktur bredvid. Det flaggar också sådant som flera h1, tomma rubriker och hoppade nivåer.
Inget märkvärdigt. Bara något jag saknade. Vill du ha den finns den här.