Intro
Bilder utgör ofta den största delen av webbsidorna och har en egen flik i Googles resultat. De är en viktig del av en komplett SEO-strategi, så det är viktigt att optimera dem för att få bättre synlighet.
Hur sökmotorer indexerar och förstår bilder
Sökmotorer genomsöker webbsidor för att upptäcka bilder och extrahera data som metadata och filnamn. Google använder faktorer som omgivande text, bildfilnamn, alt-text, bildtexter och sidinnehåll för att förstå sammanhanget och innehållet i bilder.
Vad är SEO för bilder?
Bildoptimering omfattar tekniker för att öka synligheten på sökmotorernas resultatsidor (SERP) genom att komprimera bilder, använda responsiva bilder, implementera latent laddning, lägga till relevant alt-text, använda beskrivande filnamn och implementera strukturerad data.
1. Välj rätt bildformat
Google stöder format som JPEG, PNG, WebP, BMP, GIF och SVG. Varje format har sina egna för- och nackdelar:
-
PNG: Förlustfri komprimering, bättre kvalitet, stöd för transparens, större filstorlek.
-
JPEG: Komprimering med förlust, justerbar kvalitet, mindre filstorlek.
-
WebP: Effektiv, mindre filstorlekar, stöds av alla större webbläsare.
-
GIF: Förlustfri, begränsad till 256 färger, lämplig för enkel grafik och animationer.
-
SVG: Vektorbaserad, skalbar, idealisk för logotyper och ikoner.
-
BMP: Stor, okomprimerad, hög kvalitet, inte lämplig för webben på grund av storleken.
Rekommendation: Använd PNG och konvertera till WebP för webbimplementering för optimal kvalitet och laddningstid.
2. Skapa unika bilder
Undvik generiska stockfoton. Använd originalbilder av hög kvalitet för att förbättra användarupplevelsen och SEO. Google rekommenderar att bilder är minst 1200px breda och använder inställningen max-image-preview:
large i robots metatagg för att säkerställa att de visas som stora bilder i Google Discover.
<meta name='robots' content='index, follow, max-image-preview:large' />
3. Optimera filnamn för bilder
Använd beskrivande, nyckelordsrika filnamn för att hjälpa sökmotorerna att förstå vad bilden handlar om. Undvik standardnamn som "IMG_722019".
4. Skriv SEO-vänlig Alt-text
Alt-taggar beskriver innehållet i en bild och förbättrar tillgängligheten. De hjälper också sökmotorer att förstå bildens sammanhang, vilket bidrar till bättre rankning.
Exempel:
<img src="chocolate-1.jpg" alt="bar med smak av mörk choklad och kaffe"/>
5. Optimera sidans titel och beskrivning
Inkludera relevanta nyckelord i sidans titel och beskrivning för att förbättra rankningen i bildsökningen. Se till att alla SEO-faktorer på sidan är optimerade.
6. Definiera dina dimensioner
Inkludera bredd- och höjdattribut för varje bild för att förhindra CLS-problem (Cumulative Layout Shift) och förbättra Core Web Vitals-poängen.
7. Gör dina bilder mobilvänliga
Använd srcset-
och sizes-attributen
för responsiva bilder som skalas i enlighet med användarens enhet.
Exempel:
<picture> <source type="image/webp" srcset="image-300w.webp 300w, image-600w.webp 600w, image-1200w.webp 1200w" sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px"> <img src="image-300w.jpg" srcset="image-300w.jpg 300w, image-600w.jpg 600w, image-1200w.jpg 1200w" sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px" alt="Beskrivning av bilden"> </bild>
8. Lazy Loading och Preloading
Använd lazy loading för bilder som inte finns i visningsfönstret för att förbättra sidans prestanda. Använd preload eller fetchpriority="high
" för bilder ovanför vikningen.
Exempel:
<img src="image.jpg" loading="lazy" srcset="image-300w.jpg 300w, image-600w.jpg 600w" alt="Beskrivning">
9. Lägg till bilder i din webbplatskarta
Om du inkluderar bilder i din webbplatskarta ökar chansen att de genomsöks och indexeras av sökmotorer. Använd plugins som Yoast eller RankMath för WordPress, eller verktyg som Screaming Frog.
10. Lägg till strukturerad data
Förbättra bilder med strukturerad data för att öka synligheten i sökresultaten. Använd schema markup för att inkludera detaljer som pris, tillgänglighet och betyg.
Exempel:
{ "@context":"http://schema.org","@type":"Artikel","headline":"Artikeltitel","image": [ "https://example.com/photos/1x1/image.jpg", "https://example.com/photos/4x3/image.jpg", "https://example.com/photos/16x9/image.jpg" ],"datePublished":"2024-01-10T08:00:00+08:00","dateModified":"2024-01-10T09:20:00+08:00","author": { "@type": "Person", "name": "Författarens namn" } }
11. Använd CDN för snabbare bildleverans
Ett CDN (Content Delivery Network) kan optimera och leverera bilder snabbare genom att servera dem från platser som ligger närmare användaren. Överväg att använda tjänster som Cloudflare, Amazon CloudFront, ImageKit eller KeyCDN.
12. Varning för upphovsrätt
Se till att du har rätt att använda bilder för att undvika dyra stämningar. Använd licensierade bilder från leverantörer som Getty, Shutterstock eller DepositFiles.
Viktiga lärdomar från bildoptimering
-
Välj rätt filformat och storlek för snabbare laddningstider.
-
Se till att dina SEO-element på sidan är optimerade.
-
Skapa en sitemap för bilder för bättre genomsökning.
Genom att följa dessa tips kan du förbättra din webbplats bild-SEO och den övergripande sökbarheten. Lycka till med optimeringen!