Redigér dit Wordpress Tema: Få styr på H1- og H2-Overskrifter!

Har du nogensinde undersøgt dit wordpress tema mht H1, H2 osv?

Ved du hvad H1 og H2 er?

Bliv hurtigt klogere og lær at ændre på strukturen quick and dirty!

Inden du læser videre, så hav lige i baghovedet at dette ikke er en super grundig guide. Der kræves lidt abstrakt tænkning og et par slutninger undervejs. Desuden spinger jeg nok lidt hurtigt frem et par gange. Enten gætter du dig til sammenhænge og fremgangsmåder eller også skriver du lige dit spørgsmål som en kommentar, så svarer jeg dig på mandag. (for nu skal bilen en tur til Bulgarien) God weekend!

Hvad er H1 og H2?

H1 og H2 er HTML tags som betyder Headline 1 og Headline 2. Der findes også H3,H4,H5 og H6 men dem ser vi stort på for nemhedens skyld i dag! Når en html-tekst er omkranset af H1-tags så betyder det for søgemaskiner og i princippet også internet browsere at der er tale om sidens største overskriftstype (tænk på opbygningen af en avisforside for at forstå meningen). Er det en H2 tag som omkranser teksten er det et signal om at der er tale om sidens næst største overskriftstype (altså en slags underoverskrift eller måske en artikeloverskrift).

Google og andre søgemaskiner bliver glade, hvis du gør det let for dem at forstå sidens opbygning. Derfor får sider, som er logisk opbygget, ekstra point til gode placeringer i søgeresultaterne.

Et ekspempel på på den korrekte opbygning kunne være: H1,P, H2, P, P, H3, P, H2, P, H2, P,P,P altså et hieraki, hvor H1-overskriften er dækkende for hele siden. Så følger en indledning i et afsnit (P). Derefter en underoverskrift (H2) fulgt af et par afsnit tekst og så en under underoverskritt (H3), et afsnit mere, en underoverskrift mere osv. Hvis abstaktionsevnen rækker for dig mens du læser dette rod, så kan du godt se at det er ligesom en avisforside, ikke?

Hvordan er din wordpress blog opbygget med  H1 og H2?

Det er faktisk meget forskelligt!

Grunden til forskellen er at hvert wordpress tema kan have sin helt egen struktur. Nogle sætter bloggens navn i H1, nogle sætter den bare med fed skrift. Nogle temaer bruger H2 til dine indlægsoverskrifter, når de ses fra forsiden og andre bruger H4.

Det skal du selvsagt have styring på!

Anbefalet struktur

Jeg vil tillade mig at anbefale en struktur til din blog. Du kan sagtens have grunde til at afvige fra den, men brug den som et udgangspunkt for dine overvejelser.

Eneste forudsætning for denne anbefaling er at din blogs navn/overskrift er beskrivende for indholdet. Hvis du hedder Hans og har en blog om fisk, så hedder din blog altså i dette eksempel "Fisk" og ikke "Hans’ blog".

• På forsiden af bloggen bør du have bloggens navn i H1
• På forsiden bør dine posts/indlægs overskrifter være i H2
• Sidebarens menupunkter bør ikke være mere end H3 eller H4
• Når man er inde på et af dine indlæg, bør sidens navn være i H2/H3
• Indlæggets overskrift bør da være H1
• Underoverskrifter i indlægget bør være H2/H3

Hvis din blog alligvel skal hedde Hans’ Blog eller tilsvarende, så sæt det i H4 - også på forsiden. Bloggens beskrivelse kan så måske være en højere H.

Hvad med tekststørrelsen?

I princippet er det ikke noget problem, da du i din stylesheet.css-fil kan styre hvor store de forskellige H-overskrifter skal være i en browser. Pas dog på med at manipulere. Det er risikabelt at lade almindelig tekststørrelse og H1/H2 være samme størrelse for det lugter næsten af at du præsenterer dine læsere for en anden side end den du viser søgemaskinerne. Den slags skal man ikke kaste sig ud i uden at have tænkt sig om.

Hvordan ændrer jeg strukturen i mit tema?

Vi skal ind og have fat i dine tema-filer i Wordpress. Jeg tager udgangspunkt i at vi retter det i wordpress’ egen temaredigering her.

Inden vi går videre, så sørg lige for at downloade en backup af dit tema fra FTP-en for en god ordens skyld.

Lad os sige at du skal have rettet headeren til, hvor bloggens navn ofte findes.

Gå i temaredigeringen:

Vælg headerens temafil i højre side. Det er den der hedder header.php som overskrift, når du har valgt den:
 

Find stedet i koden hvor din blogs navn hentes. Det ser cirka sådan ud:

Hvis du retter det til en H1, vil det sikkert ændre hvordan din blogs overskrift ser ud.

Vi løser sagen med udseendet ovre i stylesheet (style.css):

Her finder vi det rigtige sted i koden som handler om den DIV som overskriften fra headeren befinder sig i:

Og hvis det skal være quick and dirty, så kopierer vi simpelthen linien og ændrer den til en H1:

Du kunne også tage dig tid til at undersøge om denne style bruges andre steder eller om den kunne erstattes.

Nu ser din blog ud som den plejer, men din overskrift er kodet i H1.

Og som man siger om det franske sprog: Hest hedder Cheval og sådan er det hele vejen igennem. Med andre ord har du fået nøglen til at lave strukturen som det passer dig, så det er bare at komme igang!