En kjøper fra industrien lander på nettstedet ditt og ser et hero-bilde av et elegant SaaS-dashboard. Et fintech-prospekt kommer og får det samme bildet. Ingen av dem føler at siden ble laget for dem, og begge forlater den i løpet av sekunder. Problemet er ikke at landingssidene mangler bilder. Problemet er at de samme bildene vises til alle, uansett hvem de er eller hva de trenger.
Bilder på landingssider velges én gang, som regel av den som designet siden, og vises deretter til alle besøkende. På et B2B-nettsted med flere bransjer og kjøperroller betyr det at de fleste besøkende ser et bilde av noen andres verden. Å tilpasse hovedbildet til den besøkendes bransje, rolle eller fase er en av de rimeligere formene for personalisering, fordi det ikke krever ny tekst, men det hjelper bare hvis bildet sier noe spesifikt. Dette innlegget dekker hva hver bildetype er til for, når video er verdt vekten sin, hvordan du kobler bilder til segmenter, og detaljene om ytelse og tilgjengelighet som avgjør om noe av dette fungerer.
Hvorfor generiske bilder på landingssider ikke fungerer i B2B
Bilder er vanligvis det første den besøkende legger merke til, så de former førsteinntrykket før overskriften blir lest. Et generisk bilde skader ikke mye i seg selv; kostnaden er den tapte muligheten til å vise den besøkende noe de kjenner igjen.
For B2B-selskaper med flere kjøperpersonaer gir ett felles bildesett en strukturell ulempe. En teknologidirektør som vurderer plattformen din, har andre visuelle forventninger enn en markedsdirektør som gjør det samme. Den ene vil se teknisk arkitektur, integrasjoner eller dataflyt. Den andre reagerer på dashbord, kampanjetall eller ROI-diagrammer. Når begge ser det samme generiske kontorbildet, får ingen av dem relevanssignalet som får dem til å fortsette å rulle. Det samme gjelder annonsen som brakte dem; guiden vår om når du bør bruke responsive displayannonser viser hvordan du holder displaymateriellet i samsvar med siden.
Stockfoto av folk som håndhilser på et glasskontor er den vanlige synderen. De er lette å kjenne igjen som stockfoto, så de tilfører ingenting, og de tar plassen der et produktskjermbilde, en ekte kunde eller et diagram av arbeidsflyten kunne vært. Tester du én ting i det visuelle på en landingsside, test et ekte bilde (produktet ditt, kundene dine, teamet ditt) mot stockbildet.
Tilpass det visuelle til segmenter av besøkende
Ideen bak personaliserte bilder er å korte ned tiden fra ankomst til «dette er for meg». Den praktiske måten å gjøre det på er å koble bildevarianter til segmenter du allerede følger. Hvis du bruker besøksidentifisering til å oppdage bedriftens bransje, størrelse eller geografi, kan de samme datapunktene styre hvilke bilder som vises på siden.
Måter å koble segmenter til bilder på:
Bransjebaserte bilder. Vis et fabrikkgulv for besøkende fra industrien. Vis en tradingdesk for finansnæringen. Vis en arbeidsflyt på sykehus for helsesektoren. Produktet som selges er det samme, men den visuelle konteksten endres for å passe den besøkendes hverdag.
Rollebaserte visuelle elementer. Tekniske kjøpere reagerer på arkitekturdiagrammer, kodeutdrag og integrasjonsflyter. Forretningskjøpere reagerer på dashbord, diagrammer og resultatmål. Når det visuelle språket passer kjøperens fagkunnskap, signaliserer det at du forstår perspektivet deres.
Bilder tilpasset fasen. Førstegangsbesøkende har nytte av overordnede illustrasjoner av fordelene som viser hva du gjør. Tilbakevendende besøkende som allerede har lest produktinnhold, responderer bedre på detaljerte skjermbilder, sammenligningstabeller eller kundebevis.
Selskapsstørrelse. Besøkende fra store virksomheter kan reagere på bilder som viser skala, sikkerhetssertifiseringer eller arbeidsflyter på tvers av team. Mindre selskaper kjenner seg igjen i bilder som viser fart, enkelhet og raske gevinster.
Bildetyper og når hver av dem fungerer best
Ulike visuelle elementer har ulike funksjoner på en landingsside. Å forstå forskjellene hjelper deg å ta bevisste valg om hva som skal personaliseres og hva som skal være statisk.
Hero-bilder skaper førsteinntrykket og rammer inn hele verdiforslaget. De tar den mest verdifulle plassen på siden. Et hero-bilde som viser produktet i bruk, helst med data eller i en setting besøkende kjenner igjen, sier mer enn en abstrakt grafikk. For personaliserte sider er hero-bildet det naturlige første elementet å variere, fordi alle som lander ser det.
Skjermbilder av produktet gir konkrete bevis på hva du selger, men de kan få sider til å virke rotete hvis de brukes ukritisk. Ett kommentert skjermbilde som fremhever funksjonene som er mest relevante for den besøkendes bruksområde, fungerer bedre enn flere uten kommentarer. Forteller segmenteringsdataene deg at en besøkende er opptatt av analyse, viser du analysedashbordet. Er vedkommende opptatt av integrasjoner, viser du integrasjonspanelet.
Illustrasjoner og spesiallagd grafikk er utmerket til å forenkle det komplekse. Når du skal forklare en abstrakt arbeidsflyt eller en prosess i flere trinn, formidler spesiallagde illustrasjoner på sekunder det som ellers ville tatt avsnitt. De er særlig nyttige på personaliserte sider der forklaringen må tilpasses den besøkendes tekniske nivå. Noter hvilket visuelt element hver seksjon trenger i tekstbriefen for landingssiden, så design og tekst planlegges sammen.
Bilder med sosialt bevis omfatter kundelogoer, teambilder og miniatyrbilder fra kundecaser. Disse kan personaliseres ved å vise logoer fra den besøkendes bransje eller størrelsesnivå. Et mellomstort SaaS-selskap som ser logoer fra andre mellomstore SaaS-selskaper, blir tryggere enn av å se Fortune 500-logoer de ikke kan relatere seg til. Våre eksempler på B2B-landingssider viser hvilket bevis hver sidetype bør åpne med.
Bakgrunnsbilder skaper stemning uten å kreve oppmerksomhet. Diskrete fargeoverganger eller geometriske mønstre fungerer ofte bedre enn fotografiske bakgrunner fordi de gir dybde uten å distrahere. De trenger sjelden personalisering, siden rollen deres er å støtte, ikke å signalisere relevans.
Video på en landingsside: når den fortjener plassen
Video er det tyngste visuelle elementet du kan legge til, både i sidevekt og i oppmerksomheten det krever. Vårt syn: en video på en landingsside bør svare på ett spørsmål den besøkende ikke kan få svar på fra et skjermbilde, som regel «hvordan ser det ut når noen faktisk bruker dette?». Hvis videoen gjentar overskriften med musikk i bakgrunnen, gjør et godt valgt skjermbilde samme jobben raskere. For video utover landingssider, se guiden vår til videomarkedsføring i B2B.
Her lønner video seg gjerne på B2B-sider:
- Produktgjennomganger på demo- og registreringssider. Seksti til nitti sekunder som viser kjernearbeidsflyten, lar en besøkende kvalifisere seg selv før de booker en samtale. Hold markøren rolig og brukergrensesnittet lesbart i den størrelsen videoen spilles av.
- Kundehistorier på sider sent i kjøpsreisen. En kunde som forklarer problemet med egne ord, er et bevis en logo ikke kan gi. Plasser den ved siden av påstanden den støtter, ikke i et eget videogalleri.
- Sider for webinarer og arrangementer. Et 30 sekunders klipp med foredragsholderen viser at økten er verdt tiden. Etter arrangementet erstattes det av opptaket.
Og der det som regel ikke hører hjemme: som en automatisk avspilt bakgrunnssløyfe bak overskriften (den konkurrerer med teksten og koster lastetid), og som den eneste måten å få viktig informasjon på (mange B2B-besøkende surfer på jobb med lyden av).
Legg til video uten å gjøre siden tregere
- Bruk et plakatbilde og last spilleren ved klikk. En full YouTube- eller Vimeo-innbygging laster skriptene sine før noen trykker på avspilling. Googles Lighthouse-dokumentasjon anbefaler lazy loading av tredjepartsinnbygginger bak en fasade, en statisk forhåndsvisning som byttes ut med den ekte spilleren ved interaksjon.
- Lazy-load innebygde elementer under bretten. Ved å legge til
loading="lazy"på iframes utsettes avspillere utenfor skjermen, som beskrevet i web.devs guide til lazy loading av iframes. - Teksting av alt. Undertekster hjelper dem som ser uten lyd, og er et tilgjengelighetskrav for forhåndsinnspilt video med lyd.
- Hold CTA-en synlig uten videoen. Skjemaet eller knappen bør aldri være avhengig av at noen ser videoen til slutt.
Slik måler du om videoen hjelper
Forbedret måling i GA4 registrerer hendelsene video_start, video_progress og video_complete for innebygde YouTube-videoer der JS API-støtte er aktivert. To tall betyr mer enn visninger: avspillingsraten (avspillinger delt på besøkende på siden) og konverteringsraten for besøkende som spilte av, sammenlignet med dem som ikke gjorde det. Vær forsiktig med det siste. Besøkende som trykker på avspill, er allerede mer engasjerte, så en høyere konverteringsrate blant seerne beviser ikke at videoen var årsaken. Den rettferdige testen er en A/B-test av siden med og uten video, vurdert på konverteringer, ikke visningstid.
Video lar seg også personalisere godt. En besøkende fra industrien og en fra programvare kan se den samme gjennomgangen spilt inn med to ulike demodatasett, noe som er billigere enn det høres ut når manuset først finnes.
Visuelt hierarki på personaliserte sider
Bilder former hvordan besøkende beveger seg gjennom en side. På teksttunge sider skummer folk gjerne over toppen og deretter nedover venstre side (F-mønsteret); på luftige sider går blikket ofte i sikksakk fra øverst til venstre til øverst til høyre og nedover. Plasser bilder med disse banene i tankene.
Plasser det personaliserte hovedbildet øverst i F-en, der blikket lander først. Støttende visuelle elementer plasseres langs den vertikale skannelinjen. Bruker du retningssignaler i bildene, som en persons blikk eller en pil i et diagram, bør de peke mot CTA-en, ikke bort fra den.
Størrelse skaper hierarki. Større bilder signaliserer viktighet. Hvis du vil at en besøkende fra en målkonto skal fokusere på et bestemt resultat eller en bestemt funksjon, gjør du det bildet til det dominerende visuelle elementet på siden. Sekundære bilder, som kundelogoer eller støttende skjermbilder, bør være mindre, slik at de forsterker uten å konkurrere.
Gi hovedbildet plass. Ett tydelig bilde tilpasset segmentet, med luft rundt, leses raskere enn tre trange bilder som konkurrerer om oppmerksomheten, og det er én variant å vedlikeholde i stedet for tre.
En trinnvis arbeidsflyt for å personalisere bilder på landingssider
Å innføre bildepersonalisering krever ikke at du bygger om hele nettstedet. Her er en praktisk arbeidsflyt som starter i det små og skalerer.
Steg 1: Velg de største kvalifiserte segmentene dine. Hent data fra analyseverktøyet eller verktøyet for identifisering av besøkende. Hvilke bransjer, selskapsstørrelser eller roller utgjør hoveddelen av den kvalifiserte trafikken din? Start med segmenter som er store nok til å måles og ulike nok til at forskjellige bilder faktisk gir mening.
Steg 2: Gå gjennom bildene på dagens landingssider. List opp alle bildene på landingssidene med mest trafikk. For hvert bilde, spør: treffer dette alle tre segmentene like godt? Hvis ja, er det enten et sterkt universelt bilde eller et generisk bilde som ikke treffer noen. Flagg bilder der en segmentspesifikk variant kan øke relevansen.
Steg 3: Lag 2–3 bildevarianter per merket plass. Du trenger ikke et fullt redesign. For hero-bilder kan det bety tre versjoner av samme layout med ulikt bakgrunnsbilde, ulike produktskjermbilder eller ulike illustrasjoner av brukstilfeller. Hold komposisjonen og plasseringen av CTA-en lik, slik at du tester bildeinnholdet, ikke sidestrukturen.
Trinn 4: Sett opp segmentbaserte visningsregler. Koble hver variant til målsegmentet sitt i personaliseringsplattformen. Definer en standard for besøkende som ikke passer i noe segment. Test at de riktige bildene vises for de riktige besøkende ved å forhåndsvise med testkontoer fra hvert segment.
Steg 5: Mål og forbedre. Følg konverteringsraten per segment, ikke bare totalt. Et hovedbilde som øker konverteringene for besøkende fra industrien, kan svekke resultatene for besøkende fra SaaS. Kjør A/B-tester innenfor hvert segment for å isolere effekten av bildeendringer fra andre elementer på siden. Bestem utvalgsstørrelsen før testen starter (guiden vår om utvalgsstørrelse i A/B-tester viser hvordan), kjør i minst to hele uker, og ikke stopp tidlig fordi dashbordet ser bra ut.
Teknisk ytelse: hastighet vs. visuell kvalitet
En personalisert hero som kommer for sent, er verre enn en generisk som kommer i tide. Hero-bildet er ofte Largest Contentful Paint-elementet, så størrelsen og lasterekkefølgen avgjør hvor rask siden føles.
Bruk moderne formater. Googles dokumentasjon oppgir at WebP-bilder med tap er 25–34 % mindre enn sammenlignbare JPEG-er og tapsfrie WebP-bilder 26 % mindre enn PNG-er. AVIF komprimerer ofte enda mer. Server AVIF eller WebP med JPEG som reserve gjennom <picture>-elementet.
I stedet for å kopiere andres størrelsesgrenser bør du sette et budsjett for dine egne sider: sjekk filstørrelsen og LCP for toppseksjonen i PageSpeed Insights med mobilprofil, og behandle enhver variant som er merkbart tyngre enn standardversjonen som en feil.
Bruk responsive bilder med srcset-attributter. Å servere et 2000 px bredt bilde til en mobilbesøkende sløser med båndbredde og forsinker visningen. La nettleseren velge riktig bildestørrelse ut fra viewport-bredden. For personaliserte sider betyr det at hver bildevariant trenger sitt eget sett med responsive størrelser, men byggeverktøy kan automatisere dette.
Ikke lazy-load heroen. Den er over folden, så lazy loading forsinker den; merk den med fetchpriority="high" i stedet og lazy-load bare bilder lenger ned. For segmentvarianter er det ryddigste oppsettet å avgjøre varianten på serveren eller i edge, slik at riktig bilde ligger i HTML-en fra starten. Skjer byttet på klientsiden, bør du reservere bildets dimensjoner slik at oppsettet ikke hopper når det lastes.
Tilgjengelighet for alle bildevarianter
Hver personaliserte bildevariant trenger sin egen alternativtekst. Et toppbilde som viser en produksjonsflyt, bør ha en alternativtekst som beskriver den scenen, ikke en generisk tekst som kunne passet til hvilken som helst variant. Skjermlesere leser opp det som står på siden, og alternativteksten bør stemme med det seende besøkende i det segmentet faktisk ser.
God alt-tekst beskriver bildeinnholdet kort og knytter det til konteksten rundt. Hold den under 100 tegn. Dekorative bilder (bakgrunner, mellomrom) bør ha tomme alt-attributter, slik at skjermlesere hopper over dem. Funksjonelle bilder som lenkede grafikker trenger alt-tekst som beskriver hvor lenken går.
Når bilder ikke lastes inn, vises alt-teksten visuelt, noe som betyr at alt-teksten fungerer som reserveløsning også for seende besøkende på trege forbindelser. Når du har personaliserte bildevarianter, er det enda en grunn til at hver variant trenger en unik, beskrivende alt-tekst i stedet for en felles plassholder.
Vanlige feil med personaliserte bilder
Team som er nye innen bildepersonalisering, personaliserer ofte for mye. Å bytte ut hvert bilde på siden etter segment skaper en vedlikeholdsbyrde og svekker effekten av endringene som faktisk betyr noe. Fokuser personaliseringen på de én eller to bildeplassene med størst effekt (som regel toppseksjonen og hovedseksjonen med sosialt bevis), og hold resten likt.
En annen vanlig feil er å bruke segmentdata til å gjøre antakelser som føles påtrengende. Å vise en besøkende selskapslogoen deres før de har identifisert seg, går over en grense. Å vise bilder som er relevante for bransjen deres, er nyttig. Å vise kontorbygget deres er ubehagelig. Skillet går mellom kontekstuell relevans og overvåking.
Å teste for mange varianter samtidig er en tredje felle. Fire segmenter ganger tre bildeplasser, med et par varianter hver, gir allerede dusinvis av kombinasjoner, langt flere enn B2B-trafikk kan teste. Test én variabel om gangen innenfor hvert segment, vent på statistisk signifikans, og bygg trygghet på hver endring før du legger på flere lag.
For team som jobber med en bredere plan for optimalisering av B2B-landingssider, er bildepersonalisering et fornuftig tidlig steg fordi det krever mindre nytt innhold enn tekstpersonalisering. Haken er at det forutsetter ekte, segmentspesifikke bilder; hvis alt du kan lage er et annet stockbilde per bransje, bør du heller bruke tiden på tekst.
Hvor du bør starte
Ta landingssiden din med mest trafikk og se på hero-bildet med ett spørsmål: ville en besøkende fra det største segmentet ditt kjent igjen sitt eget arbeid i det? Hvis ikke, bytt det ut med et skjermbilde av produktet eller et kundebilde de ville kjent igjen, og test det mot det nåværende. Først når et ekte bilde slår arkivbildet, er det verdt å lage varianter per segment. Markettailor kobler data fra besøksidentifisering til innholdet på siden, inkludert bilder, hvis du vil servere disse variantene uten å bygge reglene selv.
