Indledning:
Når du som webdesigner arbejder med SEO, er det vigtigt, at du både designer og opbygger hjemmesiden ud fra god SEO-praksis.
Det betyder, at du bør have et par ting i bakhovedet, før du går i gang med dit arbejde – og det er det, vi vil dække i dette indlæg!
Se det som en lille tjekliste over, hvad du skal tænke på i forhold til SEO, når du skal designe og eventuelt udvikle din hjemmeside.
Vi gennemgår de grundlæggende krav, vi skal forholde os til som webdesignere, samt hvad vi skal være opmærksomme på omkring disse, når vi designer og bygger vores hjemmesider.
Jeg vil udelukkende nævne dem, der er væsentlige for os som gruppe (webdesignere), og der vil derfor ikke være nogen dybdegående gennemgang af teknik eller anden teori omkring SEO.
Vi begynder med…
Overskrifter og brødtekst
Ja, indhold er stadig konge og for at en hjemmeside skal have god SEO, bør der være godt indhold på hjemmesiden i forskellige formater, herunder blandt andet overskrifter og brødtekst.
Overskrifter
Dette er sandsynligvis ikke noget nyt for dig. Overskrifter er vigtige for din hjemmesides søgemaskineoptimering, og der bruges tid på at formulere overskrifter rigtigt. Overskrifter er en prioritet i Googles indeksering.
I dag er det i orden, at overskrifter er lange, og nogle gange kan de endda bestå af kortere sætninger.
Dette er et aspekt, du som webdesigner bør tænke på, når du designer din hjemmeside.
Bemærk venligst, at der er en risiko for, at dine overskrifter ikke kan være der på mobile enheder, da vi (på svensk) har lange ord uden særskrivning.
Du kan altid løse det med CSS:
word-break eller word-wrap
Men der er ingen garanti for, hvor ordet “brydes”
Prøv det selv her: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-wrap
Brødtekst
Forklarende paragrafer, der er velstrukturerede, er sikkert heller ikke nogen nyhed for dig.
Det vigtige i brødteksten er læsbarheden, og hvad der er læsbart, er ofte et spørgsmål om fortolkning – i hvert fald for os mennesker.
For Google er det ret simpelt, og det, Google lægger vægt på, er korte afsnit frem for lange afsnit.
Korte afsnit anses for at være mere læsbare, da informationen er lettere for os at scanne og absorbere.
Derfor vil du sjældent se mere end 5 linjer pr. afsnit i dette indlæg.
Det er muligvis ikke det kønneste, men for en læser og også for Google er dette helt i top.
Hvad mener du selv? Er denne tekst letlæselig eller svært læselig?
Derfor bør du designe din hjemmeside, så den består af korte afsnit, men samtidig indeholder meget indhold.
Lister
Ud fra et SEO-perspektiv er lister gode at have, fordi de gør dit indhold mere overskueligt og lettere for en besøgende at fordøje.
Lister bruges ofte til en form for FAQ for at tilgodese Googles “Answer Box”
- Dette er en liste
- Som et eksempel
- For at du kan forstå
- Hvad jeg mener med liste
Så længe indholdet er godt her, er der en god chance for, at Google belønner dit website ved at placere dit spørgsmål + svar i den eftertraktede Svarboks.
Dette gøres bl.a. med noget, der hedder Struktureret data.
Intern linkning
At hjælpe Google med at finde de rigtige sider på din hjemmeside bør være en høj prioritet, når du skal vælge, hvordan du vil designe din hjemmeside.
Nu tænker du måske, at dette er en teknisk ting, men det er faktisk i designprocessen, du bestemmer, hvordan din hjemmeside skal linke internt.
Du placerer f.eks. links nederst i footern, som altid er tilgængelige.
Din hemsides landingsside har måske et par links, der leder besøgende til dybere indhold på sitet.
Eller så arbejder du en layout frem for, hvordan bloggen og dens indlæg skal se ud.
Her anbefales det, at du har en liste over indlæg, der relaterer til det emne, du taler om, ligesom dette indlæg har nederst.
Det er et udførelse, som jeg altid prøver at få mine kunder til at gå efter.
Dette kan rent teknisk aktiveres automatisk ved hjælp af plugins, eller du kan gøre det manuelt.
Gode plugins til dette er:
- Relaterede indlæg i sammenhængen
- Miniaturbilleder af relaterede indlæg
- Relaterede indlæg efter taksonomi
- Yet Another Related Posts Plugin
- Related Posts Pro til WordPress
Ydeevne
Hjemmesiden skal derefter indlæse så hurtigt som muligt. Det, du bør tænke på her, er følgende:
Skrifttype
Brug endelig Google Web Fonts – min erfaring siger, at de indlæser hurtigt og fungerer bedst med temaer og page-builders – som ofte har et bibliotek, der er knyttet til Google Web Fonts
Billeder
Det er altid bedst at komprimere billeder, før du uploader dem til din hjemmeside.
Men hvis dette bliver en besværlig proces for dig, har du altid muligheden for at komprimere billederne direkte på serveren ved hjælp af plugins som f.eks. ShortPixel eller Mos.
Cacher
Caching er en af de enkleste og mest effektive måder at forbedre din hjemmesides indlæsningstid og dermed også brugeroplevelsen.
Ved hjælp af cachen tillader du, at din hjemmeside indlæser (viser) statiske (HTML) versioner af alle undersider.
Det, der sker her, er, at i stedet for at en side/underside skal indlæses igen, hver gang den besøges, og trække ressourcer fra serveren, præsenteres disse statiske versioner i stedet.
Hvis siden indlæses “som normalt”, vil der hver gang blive kørt scripts og koder i baggrunden – hvilket igen forlænger hjemmesidens indlæsningstid og dermed forringer brugeroplevelsen.
Mit favoritter-plugin til caching er WP-Rocket.
Mobil
Google har i et stykke tid prioriteret hjemmesider, hvis mobilversion indlæses hurtigt. Selvom du kører responsivt, bør du gennemgå dine muligheder for at forbedre ydeevnen på mobile enheder.
Responsivt
Du kender sikkert begrebet »responsive design«. Kort sagt betyder det, at din hjemmesides layout tilpasser sig besøgerens browserbredde.
Sørg altid for, at dit responsive design ser godt ud på mobile enheder. I mange tilfælde kan det være overskrifter, der er for lange, eller elementer, der ender med at ligge “uden for” skærmen.
Eksempel:
Adaptivt
Udtrykket adaptivt design er lidet kendt, men det bør overvejes nøje. Mange, der taler om responsivt design, mener egentlig adaptivt design.
Responsivt design handler om mere end blot at lade din hjemmesides layout tilpasse sig i bredden.
Det handler om, at du aktivt tilføjer/skjuler elementer eller ændrer elementernes farver og form.
Her har jeg faktisk en video, du kan se:
https://www.youtube.com/watch?v=2D07OyfopCo
Det er vigtigt, at du forstår forskellen mellem responsive og adaptive design, så ta' endelig et kig på videoen! 🙂
AMP
Accelerated Mobile Pages – eller AMP er et rammeværk for, at din hjemmesides sider og undersider indlæses hurtigere på mobilenheder.
Det er ikke ualmindeligt i dag, at vi har tunge grafiske elementer på vores hjemmeside, med en masse scripts, der kører i baggrunden.
Alt fra at spore din aktivitet på siden – til at give dig en visuelt tiltalende oplevelse, mens du navigerer rundt på siden.
Eksempel fra: https://the-goonies.webflow.io/
Dette kan dog blive meget tungt på mobile enheder – især smartphones.
Derfor har Google-udviklere udviklet AMP.
Det AMP gør, er at vise en enklere version af den side, du er inde på. En ren HTML-side med meget mindre kode i baggrunden.
På den måde indlæses siden hurtigere, og Google prioriterer den i søgeresultaterne.
Men det er vigtigt, at du er opmærksom på følgende:
Hvis du bruger AMP på en WordPress-side, er der en risiko for, at det ikke er kompatibelt med din page-builder.
Dette har jeg prøvet og vil derfor gøre dig opmærksom på det!
Til mine sites bruger jeg det det officielle AMP-plugin til WordPress.
Der er meget mere at lære om AMP – men jeg lader dig foretage din egen vurdering.
Alt i alt
Meget af det, jeg har skrevet om her, er en selvfølge for mange og nogle gange underforstået for dig, der er vant til at designe og bygge hjemmesider.
Det falder dig helt naturligt.
Men det kan være godt at minde sig selv lidt om, hvorfor du gør det, du har vænnet dig til at gøre – hvis du forstår, hvad jeg mener?
At tænke på eventuelle lange overskrifter, der ikke kan være der, langsom hastighed på siden på grund af billeder, der uploades, ikke er komprimerede, eller at definere, hvad responsivt design egentlig er – er ikke altid så ligetil.
Alt dette spiller en rolle for SEO!
Disse ting, jeg tager op, er det, jeg naturligt går igennem i min tankeproces, fra det øjeblik jeg finder en design-mockup frem, til jeg rent faktisk bygger hjemmesiden til mine kunder.
Der er mange tekniske aspekter at tage hensyn til, når du begynder at designe din hjemmeside.
Med denne kortfattede gennemgang håber jeg, du har kød på benene nok til at skabe et flot design, der er godt til SEO .
Eller hvis du hellere vil overlade det til en SEO-konsulent i Malmø tag det fulde ansvar, kan du i det mindste have det som en påminnelse og en tjekliste, du tager med dig til næste projekt.