SEO av bilder

Allt du behöver veta om sökmotoroptimering av bilder

Du som arbetar med sökmotoroptimering vet att alla detaljer räknas – både stora som små. Det innefattar givetvis även SEO av bilder. Om du går ner på djupet ser du att det finns en hel del olika saker att tänka på. Vissa delar är direkta rankingfaktorer, medan vissa delar mer agerar som rankingsignaler eller som ett förtydligande för Google vad innehållet handlar om.

I den här artikeln hittar du allt du behöver veta om sökmotoroptimering av bilder.

Vad är SEO av bilder?

Sökmotoroptimering av bilder, i vissa fall kallat bild-SEO, innebär att förbättra hur bilder på en webbplats indexeras och rankas av sökmotorer. Genom att optimera bilder kan du förbättra din webbplats synlighet i sökresultat, öka den relevanta trafiken och förbättra användarupplevelsen.

Sökmotoroptimerade bilder ger dig snabbare laddningstider, vilket är avgörande för användarupplevelsen och minskar avvisningsfrekvensen. De förbättrar dessutom din webbplats övergripande relevans för viktiga sökord. Det leder till högre ranking i sökmotorer – både i det ordinarie sökresultatet och vid bildsök. Optimerade bilder bidrar också till bättre delning på sociala medier, vilket ökar trafik och engagemang.

Ska vi klassificera SEO av bilder hamnar det under både on-page SEO och teknisk SEO. Vissa bitar optimerar redaktören vid arbetet med innehållet och andra bitar sätter en tekniker upp så att systemet sköter det i bakgrunden.

Viktiga delar för sökmotoroptimering av bilder

1. Val av rätt bild

Relevans till innehållet

Att välja bilder som är relevanta för innehållet är grundläggande vid sökmotoroptimering av bilder. När bilderna speglar ämnet och budskapet i texten förbättrar de användarupplevelsen och ökar chansen för att de visas i bildsökresultat.

Användarupplevelse och estetik

Förutom relevans ska bilderna vara visuellt tilltalande och av hög kvalitet. Genom att vara tydliga och estetiskt tilltalande ska de bidra till en positiv användarupplevelse , vilket kan öka engagemang och tid på sidan.

Tänk på upphovsrätt

För att undvika upphovsrättsproblem och för att göra din webbplats unik ska du använd originalbilder så långt det är möjligt. Om du använder bilder från andra källor måste du se till att du har rätt att använda dem och ge korrekt bildhänvisning.

2. Namn på bildfilen

Namnet på bildfilen ska vara beskrivande och inkludera relevanta sökord. Använd bindestreck för att separera ord och undvik att använda specialtecken eller siffror. Ett bra filnamn kan förbättra bildens synlighet i sökresultat.y

Exempel på dåligt filnamn: GHUT56785.jpg

Exempel på bra filnamn: svart-hund.jpg

3. Moderna filformat

Välj rätt filformat beroende på bildens användning. JPEG har länge använts för fotografier med många färger och PNG för bilder med transparenta bakgrunder och illustrationer. På senare år har det kommit modernare filformat, som är bättre lämpade att använda på webben.

WebP är ett sådant filformat, vilket erbjuder bättre kompression för både fotografier och grafik. Det gör att bilderna laddar snabbare för användaren. Bäst är om systemet sköter konverteringen till WebP automatiskt, så att du som användare laddar upp JPEG- och PNG-bilder som vanligt.

Har du tillgång till vektoriserade filer för illustrationer är det bästa filformatet att använda SVG. SVG-filer är skalbara utan förlora någon kvalitet, så de passar perfekt för responsiv design. De är dessutom i de flesta fall mindre i filstorlek, jämfört med PNG-filer.

4. Bildstorlek

Det är viktigt att bildstorleken matchar den plats där bilden visas på webbplatsen. För stora bilder försämrar laddningstiden och för små bilder leder till förlorad kvalitet.

Om den maximala bredden som bilden kan visas på är 960 pixlar, ska du innan publicering skala ner den till den storleken och inte ladda upp en bild som är 1920 pixlar bred.

5. Bildkomprimering utan kvalitetsförlust

Komprimera bilder för att minska filstorleken så mycket du kan, men offra inte kvaliteten. I ett vanligt bildbehandlingsprogram gör du det ganska enkelt efter det att du har skalat bilden till korrekt storlek. Dock brukar onlineverktyg som TinyPNG och JPEG Optimizer ta bildkomprimeringen till ytterligare en nivå.

Exempel:

Ovanstående illustration är skapad i Illustrator. När den sparas ner på olika sätt får den olika filstorlek.

Alternativ 1:

Arkiv >> Exportera >> Exportera för skärmar gav en PNG-fil med filstorlek på 9 kB

Alternativ 2:

Arkiv >> Exportera >> Spara för webben (äldre) gav en PNG-fil med filstorlek på 7 kB vid val av att exportera som PNG-24

Alternativ 3:

Arkiv >> Exportera >> Exportera som SVG gav en filstorlek på 5 kB

Alternativ 4:

Bild från alternativ 2 laddades upp och komprimerades av TinyPNG gav en filstorlek på 5 kB

6. Anpassning för responsiv design

Använd srcset och storlekattribut

Använd srcset och storleks-attributen i HTML för att specificera olika bildversioner för olika skärmstorlekar. Genom att du laddar rätt bild beroende på enhetens skärmupplösning och storlek, förbättrar du både laddningstider och användarupplevelse.

Du ska även ange bildens ursprungliga bredd och höjd. Det hjälper webbläsaren att avsätta korrekt utrymme för bilden direkt vid rendering av innehållet, så att inte layouten förändras när sidan laddas in.

Exempel:

Skalning för olika skärmstorlekar

Se också till att webbplatsens bilder skalas korrekt vid olika skärmstorlekar. Genom korrekt CSS säkerställer du att bilder anpassas proportionellt och behåller sin kvalitet oavsett enhet.

När det gäller att bilderna ska anpassas för responsiv design behöver inte du som redaktör tänka på detta. Det är något som ska skötas automatiskt av systemet.

7. Lazy loading av bilder below the fold

Implementera lazy loading för bilder för att förbättra laddningstider. Bilder som inte syns direkt på skärmen (below the fold) ska laddas först när användaren scrollar ner på sidan. Då minskar du den initiala laddningstid och förbättrar prestandan.

8. Alt-text

Alt-text är viktigt för både SEO och tillgänglighet. Sökmotorer använder alt-text för att förstå vad en bild handlar om, vilket kan förbättra ranking i bildsökningar. För användare med synnedsättningar beskriver alt-texten bilden, vilket förbättrar tillgängligheten.

Skriv kortfattade men beskrivande alt-texter som inkluderar relevanta sökord utan att överdriva. Beskriv vad bilden visar på ett sätt som är meningsfullt för både sökmotorer och användare.

Exempel:

Bilder som enbart har ett dekorativt syfte ska du inte ge en alt-text, enbart bilder som lyfter innebörden av innehållet.

9. Bildtitel

Bildtitel är egentligen ingen direkt rankingfaktur, men den använder du för att ge ytterligare kontext till bilden. Även om de inte är lika viktiga som alt-texten för SEO, kan de förbättra användarupplevelsen genom att ge mer information när du för muspekaren över bilden.

10. Bildtexter

Bildtexter visas under bilderna och ger ytterligare information eller kontext till bilden. De kan också bidra till SEO genom att inkludera relevanta sökord och förbättra användarens förståelse av bilden.

I de fall du använder bildtext till dina bilder ska de inte vara identiska med bildernas alt-text, men de ska komplettera varandra.

11. CDN

Använd ett Content Delivery Network (CDN) när du har en internationell webbplats för att leverera bilder snabbt till användare över hela världen. Genom att du distribuerar bilderna på flera servrar minskar du laddningstider och förbättrar webbplatsens prestanda.

12. Caching

Caching av bilder kan avsevärt minska bildernas laddningstider genom att de sparas i användarens webbläsare för framtida besök. Du använd cache-kontrollhuvuden för att bestämma hur länge en bild ska cachas.

13. Strukturerad data för bilder

Schema markup använder du för att ge sökmotorer mer information om bilderna på din webbplats. Genom att använda strukturerad data ökar du chanserna att Google visar dina bilder som utökat sökresultat. Den förbättrade synligheten i sökresultaten och bidrar till ökad klickfrekvens.

14. XML sitemap för bilder

En sitemap för bilder är en XML-fil som listar alla bilder på din webbplats och ger sökmotorer information om dem. Detta kan hjälpa till att säkerställa att alla dina bilder blir indexerade.

En XML sitemap ska skapas automatiskt av systemet och du skickar upp den i Google Search Console för att säkerställa att alla dina bilder blir indexerade korrekt.

15. Hotlinking

Så kallad ”hotlinking” kan vara både en fördel och en nackdel när det gäller SEO.

Hotlinking är när en webbplats använder en bild eller video som lagras på en annan webbplats genom att länka direkt till filen. Istället för att ladda upp filen till sin egen server, använder den länkande webbplatsen filens URL för att visa den direkt från den ursprungliga källan. Det gör att varje gång filen visas på den länkande webbplatsen, laddas den från den ursprungliga servern.

Om någon väljer att använda sig av hotlinking för en bild på din webbplats kan det innebära att din server belasta hårdare och att det då ger längre svarstid även för dina besökare. Detta är givetvis en stor nackdel och kan ge en negativ effekt för ditt SEO-arbete.

Däremot är det så att om en webbplats som inte har jättemycket trafik använder sig av hotlinking av en bild på din webbplats och samtidigt länkar in till din sida kan du dra nytta av detta ut ett SEO-perspektiv. Externa länkar som pekar in till sin webbplats är viktigt fört att kunna ranka högre hos Google.

För att förhindra hotlinking kan du blockera det via din .htaccess-fil om du exempelvis har en webbplats byggt i WordPress.

16. Optimering av bildernas metadata

IPTC och EXIF-data är typer av metadata som kan inkluderas i bildfiler. De innehåller information om när bilden skapades, kamerainställningar, och beskrivningar. Genom att optimera denna metadata kan hjälper du sökmotorerna att bättre förstå och indexera dina bilder. Du kan även få mer information att visas för din bild vid bildsök.

Det du dock ska tänka på är att metadata gör att filstorleken kan bli några kilobyte större, vilken kan försämra laddningstiden något.

17. Sociala medier och bilder

En annan viktig som som kan ge en indirekt effekt för din sökmotoroptimering är att optimera bilder för delning på sociala medier. Open Graph och Twitter Card tags hjälper till att styra hur dina bilder visas när de delas på sociala medier.

Om du använder rätt dimensioner och format för respektive plattform, samt arbetar med beskrivande text och relevanta sökord, kan din sida få ökad synligheten och ökat engagemang. Google använder sig av användarengagemang som direkta rankingfaktorer.

Analys och uppföljning

Använd dig av verktyg som Google Analytics och Google Search Console för att övervaka, följa upp och utvärdera hur väl bilderna fungerar.

Dessa verktyg ger dig insikter i hur dina bilder presterar i sökresultat och hur användarna interagerar med dem. Använd dessa insikter för att göra förbättringar, som att uppdatera alt-texter, optimera bildstorlekar, och förbättra relevansen.

Automatiserade verktyg för bildoptimering

För att underlätta arbetet med sökmotoroptimering av bilder är det bästa att automatisera vissa tekniska delar. Till de flesta vanliga CMS finns det tilläggsmoduler och tjänster att använda sig av för att låta systemet arbeta i bakgrunden med att exempelvis automatiskt komprimera och skala bilderna på din webbplats.

Genom automatisering sparar du tid och säkerställer att alla bilder optimeras konsekvent. Det innebär dok lite mindre kontroll över varje enskild bildoptimering och eventuellt får du högre kostnader beroende på tjänsten.

Sammanfattande ord om SEO av bilder

För att göra det bästa du kan vid din sökmotoroptimering är SEO av bilder en mycket viktig del. Jobba med alla detaljer du kan såsom filstorlek, filformat. alt-text, strukturerad data, XML sitemap mm. Ju fler bitar du optimerar desto med snabbladdad och användarvänlig blir webbsidan som bilden finns på samtidigt som Google enklare kan tolka innehållet på både bilden och sidan.