Når du har laget en side i Webflow, kan du enkelt sjekke at alt er satt opp riktig med Webflow Audit. Panelet gir deg beskjed dersom noe bør korrigeres innenfor søkemotoroptimalisering (SEO), tilgjengelighet og struktur.
Her er en gjennomgang av de vanligste feilmeldingene og hvordan du fikser dem.
På bildet under, ser du at det ligger 3 ting som bør forbedres. Det hender også at det ligger noen flere der som f.eks meta tittel og meta beskrivelse.
1. Add Schema markup
2. Add Alt-text
3. Skipped heading level
4. Meta tittel
5. Meta beskrivelse
6. Non-descriptive link content
7. Contrast ratio
Tenk på Schema markup som et "oversettelseslag" mellom nettsiden din og søkemotorer som Google. Uten Schema leser Google ofte teksten som en lang rekke ord uten kontekst. Hvis det står "Eple" på en side, vet ikke Google nødvendigvis om du snakker om frukten, teknologiselskapet eller en farge.
Schema markup er som å gi Google en oppskriftsbok med ferdige merkelapper. Det gjør lenken din mer fristende å klikke på i søkeresultatet.
Slik legger du det til i Webflow:
Dersom du legger inn din egen schema markup manuelt, så blir ikke den koden validert mot schema.org slik som den AI genererte. Men, du kan validere den selv ved å gå til schema.org eller Rich Results Test - Google Search Console
Alt-tekst (forkortelse for alternativ tekst) er en kort, skriftlig beskrivelse av et bilde på en nettside.
Siden en datamaskin eller en søkemotor ikke kan "se" hva et bilde forestiller på samme måte som oss mennesker, bruker vi alt-tekst for å forklare hva bildet viser.
Her er de tre viktigste grunnene til at vi bruker det:
Mennesker som er blinde eller svaksynte bruker ofte en skjermleser – et program som leser opp teksten på nettsiden høyt. Når programmet kommer til et bilde, leser det opp alt-teksten.
Hvis du har dårlig internettforbindelse eller det oppstår en feil på nettsiden slik at bildet ikke dukker opp, vil alt-teksten vises i den tomme rammen i stedet. Da forstår brukeren fortsatt hva som skulle vært der. Dersom du ikke har lagt inn alt tekst vises kun en firkant med et kryss inni.
Google bruker alt-tekst for å forstå hva siden din handler om. Hvis du har en nettbutikk som selger kaffetraktere, hjelper det Google å vite at bildet ditt er av en "Moccamaster i børstet stål", slik at bildet ditt kan dukke opp når folk søker etter det i Google Bilder. Og siden du gjerne vil bli funnet på søk, lønner det seg å legge inn en liten alt tekst med tanke på det.
En god tommelfingerregel er: Lukk øynene og beskriv bildet for en venn.
Eksempel:
Bilde av en kopp kaffe
Dårlig alt tekst: Kaffe
God alt tekst: En rykende fersk kopp kaffe på et trebord i morgenlys.
I Audit-panelet ser du under teksten Add-alt text så ligger det en link til bilder som mangler alt tekst. Klikk på pilen vedsiden av eller på teksten Add Alt text så kommer du til oversikten over bilder som mangler alt-tekst.
Webflow har gjort det enkelt for deg her også, så du kan klikke på Generate Alt text, så lages det automatisk beskrivelse av bildene.
Men: Teksten er på engelsk, så klikk på blyanten vedsiden av alt teksten, og oversett den til norsk. Dersom du ikke har så gode engelsk kunnskaper, kan du kopiere teksten og lime den inn i Google translate. Men, selv om teksten oversettes, bør du sjekke at den faktisk beskriver det viktige i bildet.
Når du har generert og endret på teksten, klikker du på haken du ser på bildet under for å akseptere alt teksten.
I webdesign bruker vi H-tagger (Heading 1 til Heading 6) for å skape orden og struktur. Du kan se på dem som overskriftene i en avis eller kapitlene i en lærebok.
Her er de tre viktigste grunnene til at vi bruker dem:
H-taggene forteller leseren hva som er viktigst og hvordan informasjonen henger sammen. De fungerer som en visuell guide:
Akkurat som med alt-tekst, er H-tagger kritiske for folk som bruker skjermlesere. Blinde eller svaksynte bruker ofte en funksjon der de "skanner" siden ved å hoppe fra overskrift til overskrift. Hvis du bare gjør teksten fet i stedet for å bruke en ekte H-tagg, vil ikke skjermleseren forstå at det er en overskrift, og brukeren mister oversikten.
Google bruker overskriftene for å indeksere innholdet ditt.
Hvis du bruker riktige søkeord i overskriftene dine, er det mye større sjanse for at Google viser siden din til folk som leter etter akkurat det temaet.
Det er fort gjort å gå i noen feller når man designer:
For å endre til riktig heading, klikker du på teksten Skip heading level. Du får da opp en liste over de headingene på siden som ikke kommer i riktig rekkefølge.
Klikk på pilen vedsiden av overskriften.
Siden der tittelen kommer i feil rekkefølge åpner seg og du kan se tittelen med en blå strek rundt. Samtidig får du opp en informasjonsboks som forteller deg hvordan du kan rette feilen.
Klikk på den blå linken du ser i informasjonsboksen. Da åpner Settings-panelet på høyre side, og du vil se de forskjellige headingene fra H1 til H6.
Velg den som informasjonsboksen forteller deg at du skal bruke.
Dersom du har f.eks en annen farge på headingen du skal skifte til, endrer du det i Style-panelet.
Når dette er gjort, får du opp en ny boks der det står at du har fikset problemet.
Dette er de to tekstene som utgjør din "annonse" i Googles søkeresultater:
Kort sagt: Tittelen får deg sett, beskrivelsen får deg valgt.
Når du klikker på pilen vedsiden av ordet metatittel (og metabeskrivelse dersom begge mangler), så åpner sidens settinger seg.
Her kan du også bruke Webflow AI og generere teksten. Om du vil finpusse den så den blir enda mer «attraktiv» kan du også bruke Google Gemini for å få tittel og beskrivelse så optimalisert som mulig og så lime inn teksten i de respektive feltene.
Av og til klager Audit på lenker som bare heter "Klikk her" eller "Les mer". Dette er dårlig for skjermlesere da linken ikke gir noen indikasjon på hvor den går til. Så istedenfor å skrive «Les mer,» kan du f.eks skrive «Les om hvordan du optimaliserer bilder til nettsiden din». Da er det ingen tvil om hva siden det linkes til handler om.
Noen ganger får du denne feilen på en "Link Block". Dette må håndteres litt annerledes enn en vanlig tekstlenke fordi boksen ofte inneholder et bilde eller andre elementer i stedet for ren tekst.
1. Velg link boksen i Navigator
2. Velg Settinger panelet
3. Scroll ned til du kommer til feltet Custom attributes og klikk på + tegnet.
4. I feltet Name, skriver du: aria-label
5. I feltet Value, skriver du Link Block eller en beskrivende tekst om hvor man havner når man klikker på link boksen, slik at den er optimalisert for f.eks svaksynte.
Da vil du få opp en melding om at problemet er løst.
Husk å publisere etterpå.
Webflow Audit gir ofte varsel om "Low contrast". Dette er kritisk for universell utforming (UU). Hvis teksten er for lys grå på hvit bakgrunn, vil Audit si ifra. Dette er en vanlig feil mange gjør.
Sørg for at tekst er lesbar for alle. Du kan lese mer om farger på nettet her: https://www.annec.no/nyttig-informasjon/design-med-mening-en-guide-til-perfekt-fargebruk-pa-nett
Bruk også en font som er godt lesbar. Fonter som f.eks skjønnskrift kan være veldig vanskelig å lese for enkelte.
Bruk tiden din på det du er best på, så tar jeg meg av hele nettsideprosjektet. Jeg bygger moderne og profesjonelle Webflow-sider optimalisert for både Google og besøkende. Send meg en melding for en hyggelig prat om hva du trenger!
