Vi har vært på konferanse om SEO (søkemotoroptimalisering) og fått en dypere innsikt i hvordan utviklere kan forbedre nettsteders synlighet på søkemotorer som Google og Bing. Selv om SEO ofte anses som markedsførers domene, er det mange tekniske aspekter som direkte involverer oss som utviklere. Dette innlegget vil ta for seg de enkleste, men også de viktigste prinsippene som utviklere kan implementere i prosjektene sine.
Hvorfor er SEO viktig?
SEO tilbyr flere betydelige fordeler som kan ha en positiv innvirkning på både webtrafikk og synlighet hos søkemotorene:
Mer synlighet:
SEO forbedrer din online synlighet ved å øke din rangering på søkemotorens resultatsider (SERP). Høyere rangeringer gjør det enklere for potensielle kunder å finne og besøke nettstedet ditt. Effektive SEO-strategier fører til bedre synlighet, noe som er avgjørende da de fleste brukere ikke klikker side 2 på Googles søkeresultater.
Økt trafikk:
Et primært mål med SEO er å øke organisk trafikk. Nettsteder som rangerer høyere mottar betydelig flere klikk. For eksempel er det mer sannsynlighet for at de øverste resultatene blir mer besøkt enn sidene som er lengre ned på listen. Å oppnå topposisjoner, spesielt ved å sikre en "Featured Snippet" eller “Position Zero”, kan dramatisk øke dine klikkfrekvenser ved å direkte svare på brukerforespørsler.
Etablerer Autoritet:
SEO hjelper med å bygge nettstedets autoritet, noe som signaliserer til søkemotorer og brukere at nettstedet ditt er pålitelig, av høy kvalitet og relevant. Metrikker som sideautoritet (PA) reflekterer denne troverdigheten, hvor høyere score indikerer større autoritet. Forbedring av PA involverer å skape verdifullt innhold, tjene tilbakekoblinger fra anerkjente nettsteder og minimere spam.
Forbedrer UX:
SEO-praksis bidrar til en bedre brukeropplevelse ved å optimalisere nettstedets brukervennlighet. Ved å gjøre nettstedet ditt responsivt på tvers av enheter og å forbedre sidens lastetid, vil fluktfrekvensen kunne bli redusert. SEO-praksis sikrer også at innholdet er av høy kvalitet og relevant for brukerens hensikt, som resulterer i en sømløs og positiv kundereise som igjen øker engasjement og konverteringsrater.
For å oppsummere vil investering i SEO ikke bare øke nettstedets synlighet og trafikk, men også forbedre brukertilfredshet og posisjonere merkevaren din som en troverdig autoritet i din bransje.
Start med det grunnleggende: Forsikre deg om at Google kan se og forstå nettsiden din
1. Sjekk hvordan Google ser nettsiden din
Bruk verktøy som Google Search Console og URL Inspection Tool for å se hvordan Googlebot crawler og rendrer sider. Dette kan avdekke problemer som blokkerte ressurser og kodefeil som ikke nødvendigvis er synlig for brukerne. Google Search Console kan blant annet vise deg hvilke sider som er blitt indeksert, altså at Google vet at de forskjellige sidene eksiterer.
Skjermdump: Google Search Console som viser rundt 2-3000 sider på en nettside hvorav rundt halvparten er indeksert.
2. Optimaliser Robots.txt og Meta Tags
De fleste nettsider bør ha en robots.txt som setter regler for hvordan webcrawlers skal bruke nettsiden. På vg.no/robots.txt ser vi de blokkerer crawling av blant annet tegneserier og enkelte "redaksjonelle avgjørelser". I tillegg så blokkeres AI-modeller som prøver å nå siden. Hvis du ønsker å tillate alt og alle på nettsiden din så kan du enkelt skrive dette:
# Tillat alle søkemotorer å crawle alle sider
User-agent: *
Disallow:
Du kan også kontrollere indeksering direkte i HTML ved bruk av meta-tags på sidenivå:
<!-- Blokkerer indeksering av en spesifikk side -->
<meta name="robots" content="noindex">
Meta-tags er HTML tags som tilbyr ekstra, eller meta-, informasjon om nettsiden til blant annet søkemotorer. På knowit.no ser vi blant annet meta-taggene "description", "title" og "url".
Skjermdump: Teksten "For å forme[...]" er hentet direkte fra meta-tag'en "description"
3. Nettsiden må være mobilvennlig
Med Googles "mobile-first" indeksering er det avgjørende at nettsiden din fungerer optimalt på mobile enheter. Her er noen tips for å sikre mobilvennlighet:
Bruk responsivt design: Lag nettsiden med responsivt design, slik at den automatisk tilpasser seg ulike skjermstørrelser. Bruk CSS-mediaqueries og fleksible layout-enheter som grid og flexbox for å sikre en god opplevelse.
Reduser mobilinnlastningstid: Mobilbrukere har ofte lavere internett-hastighet enn desktop-brukere. Optimaliser ressurser, minimer JavaScript og vurder å bruke AMP (Accelerated Mobile Pages) for å levere superraske mobilsider.
Tilpass interaktive elementer for berøringsskjermer: Knappene bør være store nok til at de enkelt kan trykkes på en berøringsskjerm. Unngå små lenker og elementer som er vanskelige å klikke på, og test interaktiviteten på faktiske enheter.
Test med Google Mobile-Friendly Test: Dette verktøyet gir spesifikke tilbakemeldinger på mobilvennligheten til nettsiden din og hjelper deg å oppdage problemer tidlig.
Forbedre nettsidens struktruelle SEO
1. Bruk Semantisk HTML
Semantiske tagger hjelper søkemotorer med å forstå innholdet bedre. Har du mange <div> i kodebasen din så burde du vurdere å endre de til mer lesbare tags som <section>, <nav>, <footer> osv..
Eksempel:
<article>
<h1>Spennende artikkeltittel</h1>
<p>Artikkelinnhold her.</p>
</article>
2. Implementer Strukturerte Data
Bruk schema.org for å gi søkemotorer mer kontekst om innholdet ditt. Fordelen med dette er at nettsideinnholdet ditt kan utmerke seg ekstra i søkeresultatslisten.
Skjermdump: Norske mediehus som bruker strukturert data for å vise nyhetsartiklene sine
<!-- Eksempel på strukturerte data for en artikkel -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Artikkeltittel",
"author": "Forfatternavn",
"datePublished": "2023-10-15"
}
</script>
3. Optimaliser lastetiden
Rask lastetid gir ikke bare bedre brukeropplevelse, men kan også forbedre rangeringene dine på Google. Her er noen teknikker du kan bruke:
Reduser filstørrelser:
Optimaliser bilder, CSS, og JavaScript-filer for å redusere mengden data som må lastes ned. Bruk moderne bildeformater som WebP og verktøy som Gzip eller Brotli-komprimering for andre ressurser.
Cache-implementering:
Ved å cache statiske elementer kan du minske belastningen på serveren og sikre raskere leveranser til brukeren.
Server-side Rendering (SSR):
Rammeverk som SvelteKit og Next.js genererer HTML på serversiden før det blir sendt til klienten. Dette reduserer klientens behov for databehandling som kan drastisk forbedre hastigheten.
Reduser layout-skift:
Layout-skift (Cumulative Layout Shift, CLS) oppstår når elementer på en side beveger seg uventet. Dette kan være frustrerende for brukere når elementet flytter seg akkurat idet de skal klikke. For å redusere layout-skift:
- Reserver plass for bilder og annonser: Definer høyde og bredde på bilder og videoelementer, slik at browseren vet hvor mye plass de vil bruke.
- Bruk statiske dimensjoner på bannere og overlays: Plasser bannerannonser og overlays på forhåndsdefinerte steder, og unngå at de lastes inn midt i lesingen.
- Optimer Font Loading: Forsikre deg om at skriftlastingen er rask og ikke fører til layout-skift. Mange bruker font-display: swap for å sikre at teksten vises umiddelbart.
En plutselig endring i layout lurer brukeren til å bekrefte i stedet for å avbryte
Avslutning
Som utviklere har vi en betydelig påvirkning på hvordan et nettsted presterer i organiske søkeresultater. Ved å implementere gode tekniske SEO-praksiser kan vi ikke bare forbedre synligheten, men også brukeropplevelsen. Jeg håper disse innsiktene fra konferansen gir deg et godt utgangspunkt for å integrere SEO i ditt utviklingsarbeid.
Har du spørsmål eller lyst til å ta en prat?
Kontakt oss på post@knowit.no eller tormod.flesjo@knowit.no.
