Sådan laver du en automatisk indholdsfortegnelse WordPress

En indholdsfortegnelse på et WordPress-site hjælper både brugere og søgemaskiner. Besøgende får et hurtigt overblik og springer med ét klik ned til det afsnit, de vil læse. Mindre spildtid, mere læsning, højere engagement.

Mange større sites bruger klare overskrifter og klikbare links i toppen af lange artikler. Det gør scanningslæsning let, især på mobilen eller når tiden er knap. Google forstår den struktur og viser ofte sitelinks i søgeresultater, hvilket trækker flere læsere ind.

En god indholdsfortegnelse kræver ikke tunge scripts eller langsomme filer. Den kan være let, hurtig og forbedre hele oplevelsen på siden.

Sådan laver du en WordPress indholdsfortegnelse uden at bruge et plugin

En WordPress indholdsfortegnelse uden plugin kræver lidt manuelt arbejde. Processen bygger på de værktøjer, Gutenberg allerede har: HTML-ankre og overskrifter.

Start med at få styr på overskrifterne. H2 til hovedsektioner, H3 til underafsnit. Det hjælper læseren og gør ankerlinks nemme at holde styr på.

1. Åbn hver overskriftblok i Gutenberg, klik på “Avanceret” i sidepanelet, og giv den et unikt ID (anker). Eksempel: id=”hvad-er-toc”.
2. Lav øverst i indlægget en liste med links som <a href=”#hvad-er-toc”>Hvad er TOC</a>, så læseren hopper direkte til sektionen.
3. Test links på både desktop og mobil for at sikre, at anker-hash virker.
4. Ved flere ens overskrifter tilføjer WordPress automatisk -2 eller -3 til ID’er for at undgå dubletter. Opdater derfor dine manuelle links, så de matcher de faktiske ID’er.

Gutenberg danner ofte ID’er ud fra selve overskriftens tekst, men uden æ, ø, å og specialtegn. Lange danske ord kan derfor blive forkortet eller ændret til slug-format. Tjek den faktiske HTML-kilde (View Source), hvis noget ikke virker som forventet.

En indholdsfortegnelse må gerne følge med ned ad siden uden ekstra plugins. Brug CSS:

.toc { position: sticky; top: 96px; max-height: 70vh; overflow: auto; }

Koden fastholder TOC’en øverst efter scroll og sørger for, den ikke optager hele skærmen ved lange lister. Praktisk i længere artikler eller ved mange afsnit.

Brug Superb Addons til en automatisk Table of Contents block i Gutenberg

En automatisk indholdsfortegnelse i WordPress kræver hverken svære opsætninger eller tunge udvidelser. Superb Addons gør det let i Gutenberg med en Table of Contents-blok.

Start i Plugins → Tilføj ny. Søg efter “Superb Addons“, installer, og aktiver. Åbn et indlæg eller en side, tryk på plus-ikonet, søg efter “Table of Contents”, og vælg blokken. Blokken finder H2- og H3-overskrifter automatisk. Ankre og links bliver oprettet uden ekstra trin.

• Blokken opdaterer sig selv, så ændringer i overskrifter eller rækkefølge slår igennem med det samme.
• Server-side rendering og minimal CSS giver hurtig indlæsning uden tunge scripts.
• Ved få overskrifter, under tre, kan TOC skjules i blokkens indstillinger for et mere roligt layout.

Tjek ydelse før og efter med værktøjer som Lighthouse. Hold især øje med Total Blocking Time (TBT) og Cumulative Layout Shift (CLS). Denne løsning påvirker normalt ikke performance i nævneværdig grad.

Lange artikler bliver overskuelige på kort tid. Et par klik, så er der styr på indholdet.

Finjustér placering og stil for en flydende, tilgængelig indholdsfortegnelse

Justering af en Table of Contents i WordPress handler om læsbarhed og et rent udtryk. Værktøjslinjen i blokken giver skift mellem en simpel liste og en kollapsbar visning. Det sparer plads og bevarer overblik, især på længere sider. H3-overskrifter kan vises eller skjules, alt efter hvor detaljeret oversigten skal være. Et “Back to top”-link slås til eller fra og giver hurtig navigation. Der er også valg mellem tal og bullets, som hjælper hurtig scanning.

TOC’en bør læne sig op ad temaets typografi. Brug CSS-variabler til fontstørrelse og linjeafstand for at få en ensartet stil uden ekstra CSS. Accentfarven på den aktive sektion giver visuel feedback, så læseren ved, hvor de er i teksten. :target kan markere det besøgte anker og styrker orienteringen på lange sider.

Placering afgør meget for oplevelsen. Nogle lægger TOC lige under introen, andre bruger en sticky sidebar, der følger med ved scroll. På mobil giver et flydende panel god plads, fordi det åbnes efter behov. Valget bør styres af Analytics: scroll-dybde og enheder. Test flere placeringer, så synlighed og ro på siden balanceres.

Tilgængelighed skal være i orden. Interaktive elementer får tabindex=”0″ for solid tastaturnavigation. Aria-labels på TOC-containeren beskriver funktionen for skærmlæsere. Heading-strukturen holdes logisk, så assistive teknologier ikke forvirres. Test med tastatur (Tab/Enter) og en skærmlæser for at sikre fuld funktion.

• Skift mellem liste og kollapsbar stil
• Vis eller skjul H3-overskrifter
• Tænd eller sluk “Back to top”
• Vælg tal- eller bullets-liste

Hvad bør du vælge, og hvordan måler du effekten i WordPress

Valget af indholdsfortegnelse i WordPress bør matche teamets behov og opsætning. Et teknisk hold med styr på versionsstyring og lyst til detaljeret kontrol får mest ud af en manuel løsning med HTML-ankre. Det kræver løbende vedligeholdelse, især når overskrifter ændres eller artikler opdateres. For redaktionelle teams med mange skribenter og krav om hurtig publicering giver Superb Addons en gnidningsfri løsning. Blokken finder automatisk overskrifter og opdaterer sig selv, uden ekstra arbejde for skribenterne.

Begge tilgange forbedrer navigation og SEO. Effekten skal måles. Klikrater på TOC-links via event tracking viser, om folk bruger indholdsfortegnelsen. En stigning på 15-30 % peger på bedre navigation. Scroll-dybde og tid per sektion giver et klart billede af engagement. Sitelinks i Googles resultater bekræfter en solid struktur.

En indholdsfortegnelse skal ikke sættes op og glemmes. Hold siden let ved at holde samlet JavaScript under 50 kB gzip. Tema og plugins tæller med. Undgå dobbelt TOC fra både tema og plugin, det forvirrer læsere og søgemaskiner. Efter implementering bør der køres Lighthouse eller Web Vitals for at fange performanceproblemer tidligt.

Rådene gør valget mellem manuel opsætning og automatiseret blok mere gennemsigtigt. Begge metoder giver bedre navigation, hvis de vedligeholdes ordentligt.