AIOE
Alla artiklar
Bild-SEOProduktfotograferingE-handelOptimering

Produktbild-SEO: Alt-text, filnamn och optimeringsguide 2026

Komplett guide till SEO för produktbilder. Alt-text, filnamn, komprimering, Core Web Vitals och strukturerad data för Shopify, WooCommerce och Amazon.

AIOE Team15 mars 202621 min read
Produktbilder optimerade för sökmotorer med alt-text och strukturerad data

TL;DR

SEO för produktbilder är en kombination av tekniska och beskrivande optimeringar som hjälper dina bilder ranka i Google Bildsök och förbättrar prestandan på dina produktsidor. Det viktigaste: skriv beskrivande alt-text med naturliga nyckelord, använd nyckelordsrika filnamn separerade med bindestreck, komprimera bilder till WebP med kvalitet 80-85, implementera lazy loading och responsiva srcset, lägg till strukturerad produktdata med bildegenskaper, och skicka in en bildsitemap. Dessa förändringar påverkar direkt Core Web Vitals, klickfrekvens och organisk trafik.

Key Takeaways

  • Alt-text bör beskriva produkten specifikt (färg, material, användning) -- inte proppa nyckelord eller använda "bild av"
  • Filnamn som rod-laeder-planbok-framsida.webp presterar bättre än IMG_4392.jpg i alla rankningssignaler
  • WebP minskar filstorleken med 25-35 % jämfört med JPEG vid samma kvalitet -- använd det som standardformat med JPEG som reserv
  • Lazy loading av bilder under vecket och korrekt dimensionerade srcset-attribut förbättrar direkt Largest Contentful Paint (LCP)
  • Strukturerad produktdata (schema.org) med bildegenskaper hjälper Google koppla dina bilder till rika resultat
  • Bildsitemaps synliggör bilder som Google kan missa vid vanlig crawlning -- särskilt för JS-renderade gallerier

Varför SEO för produktbilder spelar roll

Google Bildsök står för 22 % av alla webbsökningar. För e-handel är siffran högre -- kunder använder aktivt bildsök för att hitta produkter, jämföra design och upptäcka varumärken de aldrig hört talas om.

Ändå laddar de flesta säljare upp produktfoton med kamerans standardfilnamn, hoppar över alt-text helt och serverar okomprimerade 5 MB JPEG-filer som försämrar sidhastigheten. Vart och ett av dessa är en missad rankningssignal.

SEO för produktbilder ligger i skärningspunkten mellan tre saker: hjälpa sökmotorer förstå vad dina bilder visar, hjälpa dina sidor ladda snabbt, och hjälpa dina bilder visas i Google Bildsök, Google Shopping, Google Lens och Pinterests visuella sök.

De goda nyheterna är att de flesta av dina konkurrenter inte gör detta. Bild-SEO är ett av de få områden inom e-handel där grundläggande optimering fortfarande ger oproportionerligt stora resultat. Prova AI-produktfotografering gratis och få redan SEO-optimerade bilder från start.

Bästa praxis för alt-text på produktbilder

Alt-text (alt-attributet på <img>-taggar) är det enskilt viktigaste elementet för bild-SEO. Det talar om för sökmotorer och skärmläsare vad bilden visar.

Hur bra alt-text för produkter ser ut

Bra alt-text är specifik, beskrivande och naturlig:

  • Bra: Handgjord keramikmugg i salviagrönt, 35 cl, på ett frukostbord i trä
  • Bra: Nike Air Max 90 löparsko i vitt och universitetsrött, sidoprofil
  • Bra: Ekologisk lavendel kroppslotion flaska, 250 ml, med pumpdispenser

Hur dålig alt-text ser ut

  • Dåligt: bild eller foto eller produktbild
  • Dåligt: köp bästa kaffemugg billig rea gratis frakt kaffemugg online
  • Dåligt: IMG_4392.jpg
  • Dåligt: Lämnat tomt (tomt alt-attribut)

Regler för alt-text

  1. Beskriv produkten specifikt. Inkludera produktnamn, färg, material, storlek och vinkel eller vy när det är relevant.
  2. Håll det under 125 tecken. Skärmläsare klipper av längre texter, och sökmotorer ger avtagande vikt åt mycket lång alt-text.
  3. Inkludera ett naturligt nyckelord. Om sidan riktar sig mot "keramikmugg", inkludera den frasen naturligt -- tvinga den inte.
  4. Skippa "bild av" och "foto av". Sökmotorer vet redan att det är en bild. Att börja med dessa fraser slösar tecken.
  5. Skriv unik alt-text för varje bild. Om du har 5 produktbilder ska var och en beskriva vad just den bilden visar (framsida, sida, i användning, närbild, förpackning).
  6. Använd alt-attributet, inte title-attributet. title-attributet visar en tooltip vid hovring och är inte en rankningssignal. Lägg din SEO-insats på alt.

Alt-text för dekorativa bilder

Inte alla bilder behöver alt-text. Dekorativa bilder (bakgrundsmönster, avgränsare, rent visuella element) bör ha ett tomt alt-attribut: alt="". Det talar om för skärmläsare att hoppa över dem. Men produktbilder är aldrig dekorativa -- de behöver alltid beskrivande alt-text.

Konventioner för filnamn

Bildfilnamnet är en rankningssignal. Google läser filnamnet för att förstå bildinnehållet innan den ens bearbetar bildpixlarna.

Regler för filnamn

  1. Använd beskrivande, nyckelordsrika namn. Döp om IMG_4392.jpg till rod-laeder-planbok-tvavikt.webp innan du laddar upp.
  2. Separera ord med bindestreck. Google behandlar bindestreck som ordavdelare. Understreck behandlas som sammanfogare (rod_planbok läses som ett ord, rod-planbok läses som två).
  3. Använd enbart gemener. Undviker problem med dubbla URL:er på skiftlägeskänsliga servrar.
  4. Inkludera det primära nyckelordet. Filnamnet bör naturligt innehålla det nyckelord du vill att bilden ska ranka för.
  5. Lägg till en vybeskrivning när det är relevant. För flera produktbilder: produktnamn-framsida.webp, produktnamn-sida.webp, produktnamn-livsstil.webp.
  6. Håll det kortfattat. 3-6 ord är optimalt. Skriv inte en mening.

Exempel på filnamn

| Före | Efter | |------|-------| | IMG_4392.jpg | handgjord-keramikmugg-salviagron.webp | | product-1.png | ekologisk-lavendel-kroppslotion-250ml.webp | | screenshot 2026-03-10.jpg | nike-air-max-90-vit-rod-sida.webp | | FINAL_v3_edited(2).jpg | skarbrada-valnot-ovifran.webp |

Automatisera filnamn

Om du hanterar hundratals artiklar, döp om bilder programmatiskt. Hämta produktnamnet från din katalogdatabas, slugifiera det (gemener, byt mellanslag mot bindestreck, ta bort specialtecken) och lägg till bildtypen. De flesta e-handelsplattformar har verktyg för massuppladdning av bilder som hanterar detta.

Bildkomprimering utan kvalitetsförlust

Okomprimerade produktbilder är den största sidhastighetsavdödaren för e-handelssajter. En enda 5 MB hjältebild kan pressa din Largest Contentful Paint (LCP) över 4 sekunder och försämra dina Core Web Vitals.

Komprimeringsstrategi

Målet är att minska filstorleken samtidigt som bilden är visuellt omöjlig att skilja från originalet. Så här gör du:

  1. Börja med rätt format (WebP för de flesta fall -- se formatjämförelse nedan).
  2. Använd förlustkomprimering med kvalitet 80-85. Detta minskar vanligtvis filstorleken med 60-80 % utan synlig kvalitetsförlust på produktbilder.
  3. Ändra storlek före komprimering. Servera inte en 4000 px bild och låt CSS visa den i 800 px. Ändra storlek till maximal visningsstorlek först, komprimera sedan.
  4. Ta bort metadata. EXIF-data (kameramodell, GPS-koordinater, tidsstämplar) lägger till 10-100 KB per bild. Ta bort dem.
  5. Använd en konsekvent pipeline. Verktyg som Sharp (Node.js), Squoosh eller ImageOptim ger reproducerbara resultat över hela din katalog.

Guide för komprimeringskvalitet

| Kvalitetsinställning | Användningsområde | Typisk besparing | |---------------------|-------------------|-----------------| | 95-100 | Aldrig -- omärkbar skillnad från 85 men 3-5 gånger större | 0-10 % | | 85-90 | Hjältebilder, zoomaktiverade produktdetaljbilder | 50-65 % | | 75-85 | Standardproduktminiatyrer och galleribilder | 65-80 % | | 60-75 | Bakgrundsbilder, dekorativa livsstilsbilder | 80-90 % | | Under 60 | Undvik för produktbilder -- artefakter blir synliga | 90 %+ |

För produktfotografering specifikt är kvalitet 80-85 den optimala balansen. På denna nivå är komprimeringsartefakter osynliga på normalt betraktningsavstånd, och du får betydande filstorleksbesparingar.

Verktyg för komprimering

  • Sharp -- Node.js-bibliotek, bäst för automatiserade pipelines. Snabbt, pålitligt, stödjer WebP/AVIF-utdata.
  • Squoosh (squoosh.app) -- Webbläsarbaserat, utmärkt för enstaka jämförelser. Visar sida vid sida-kvalitet före/efter.
  • ImageOptim (Mac) -- Skrivbordsapp, dra och släpp, tar bort metadata och optimerar förlustfritt.
  • TinyPNG/TinyJPG -- Webbverktyg, gratis för upp till 500 bilder/månad.

WebP vs JPEG vs PNG för produktbilder

Att välja rätt bildformat påverkar direkt filstorlek, kvalitet och webbläsar-kompatibilitet.

Formatjämförelse

| Format | Bäst för | Komprimering | Transparens | Webbläsar-stöd | Typisk storlek (1000 px produkt) | |--------|----------|-------------|-------------|-----------------|-------------------------------| | WebP | Standard för alla webbproduktbilder | Förlust + förlustfri | Ja | 97 %+ | 80-150 KB | | JPEG | Reserv för äldre webbläsare | Enbart förlust | Nej | 100 % | 120-250 KB | | PNG | Produkter med transparens, textöverlägg | Enbart förlustfri | Ja | 100 % | 300-800 KB | | AVIF | Framtidssäkert, bästa komprimering | Förlust + förlustfri | Ja | ~92 % | 50-100 KB |

Rekommendation

Använd WebP som standardformat med JPEG som reserv. WebP ger 25-35 % mindre filer än JPEG vid samma visuella kvalitet, stödjer transparens (så du kan hoppa över PNG i de flesta fall) och har nästan universellt webbläsar-stöd 2026.

Använd PNG bara när du behöver förlustfri kvalitet med transparens -- infografik med textöverlägg, logotyper på produktbilder eller bilder med skarpa kanter där JPEG/WebP-artefakter skulle synas.

Överväg AVIF för framtidsinriktad optimering. AVIF erbjuder 50 % mindre filer än WebP, men webbläsar-stödet hänger fortfarande inte riktigt med (~92 % i början av 2026). Om din plattform stödjer det, servera AVIF med WebP och JPEG som reserv via <picture>-elementet.

Implementera formatreserv

<picture>
  <source srcset="produktbild.avif" type="image/avif">
  <source srcset="produktbild.webp" type="image/webp">
  <img src="produktbild.jpg" alt="Blå keramikvas, 30 cm hög, på en hylla">
</picture>

Webbläsaren väljer det första formatet den stödjer. Detta ger dig minsta möjliga filstorlek för moderna webbläsare samtidigt som kompatibilitet bibehålls för äldre.

Responsiva bilder och srcset

Att servera en enda bildstorlek till alla enheter slösar bandbredd på mobil och ser suddigt ut på högupplösta skärmar. Responsiva bilder löser båda problemen.

Hur srcset fungerar

srcset-attributet talar om för webbläsaren vilka bildstorlekar som finns tillgängliga, och webbläsaren väljer den bästa baserat på enhetens skärmstorlek och pixeltäthet:

<img
  src="produkt-800.webp"
  srcset="produkt-400.webp 400w, produkt-800.webp 800w, produkt-1200.webp 1200w, produkt-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="Rostfri vattenflaska, 750 ml, matt svart finish"
  loading="lazy"
>

Vad detta gör

  • Mobil (600 px skärm): Laddar 400w-bilden (~50 KB) istället för 1600w-bilden (~200 KB).
  • Surfplatta (1024 px skärm): Laddar 800w-bilden.
  • Desktop (1920 px skärm): Laddar 1200w- eller 1600w-bilden beroende på DPI.

srcset-praxis för produktbilder

  1. Generera 4 storlekar: 400 px, 800 px, 1200 px, 1600 px bredder. Detta täcker mobil, surfplatta, desktop och högupplöst desktop.
  2. Ställ in sizes-attributet korrekt. Det talar om för webbläsaren hur bred bilden visas. Om ditt produktrutnät visar 3 kolumner på desktop visas bilden vid ~33vw.
  3. Inkludera alltid en src-reserv. Äldre webbläsare som inte stödjer srcset använder denna.
  4. Använd bredddeskriptorer (w), inte pixeltäthetsdeskriptorer (x). Bredddeskriptorer är mer flexibla och låter webbläsaren fatta bättre beslut.

Lazy loading och Core Web Vitals

Core Web Vitals är Googles mått för sidupplevelse, och de påverkar direkt dina sökrankningar. Produktbilder är vanligtvis den största faktorn i två av de tre måtten.

De tre Core Web Vitals

| Mått | Vad det mäter | Mål | Bildpåverkan | |------|--------------|-----|-------------| | LCP (Largest Contentful Paint) | Tid att rendera största synliga elementet | Under 2,5 s | Hjälte-/huvudproduktbilden är vanligtvis LCP-elementet | | CLS (Cumulative Layout Shift) | Visuell stabilitet under laddning | Under 0,1 | Saknad bredd/höjd orsakar layoutförskjutningar när bilder laddas | | INP (Interaction to Next Paint) | Lyhördhet för användarinput | Under 200 ms | Tunga bilder vid scrollning kan blockera huvudtråden |

Lazy loading

Lazy loading skjuter upp nedladdningen av bilder som inte är synliga i vyn tills användaren scrollar till dem. Detta är avgörande för produktlistningssidor med 20-50+ bilder.

<!-- Hjältebild: ladda direkt (ovanför vecket) -->
<img src="hjalte-produkt.webp" alt="..." loading="eager" fetchpriority="high">

<!-- Galleribilder: lazy load (under vecket) -->
<img src="produkt-vinkel-2.webp" alt="..." loading="lazy">
<img src="produkt-livsstil.webp" alt="..." loading="lazy">

Viktiga regler

  1. Lazy-ladda aldrig hjälte-/huvudproduktbilden. Den är ditt LCP-element. Använd loading="eager" och fetchpriority="high" för att prioritera den.
  2. Lazy-ladda allt under vecket. Galleribilder, relaterade produktbilder och livsstilsbilder bör alla använda loading="lazy".
  3. Ställ alltid in explicit bredd och höjd. Detta reserverar utrymme i layouten innan bilden laddas, vilket förhindrar CLS.
  4. Använd aspect-ratio i CSS som säkerhetsnät. aspect-ratio: 1/1 (för kvadratiska produktbilder) förhindrar layoutförskjutning även om bredd/höjd-attribut saknas.
.product-image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

Förladda kritiska bilder

För huvudproduktbilden på en produktdetaljsida, använd en preload-hintning i <head> för att börja ladda ner den innan webbläsaren ens tolkar bild-taggen:

<link rel="preload" as="image" href="hjalte-produkt.webp" type="image/webp">

Detta kan kapa 200-500 ms från din LCP, vilket spelar roll för både användarupplevelse och Google-rankningar.

Bildsitemaps

En bildsitemap talar om för Google exakt vilka bilder som finns på din sajt och vilka sidor de tillhör. Detta är särskilt viktigt för e-handelssajter där produktbilder kan laddas via JavaScript (klientsidans rendering) eller hostas på ett CDN med en annan domän.

Grundläggande bildsitemap-struktur

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/products/keramik-kaffemugg</loc>
    <image:image>
      <image:loc>https://cdn.example.com/images/keramik-mugg-framsida.webp</image:loc>
      <image:title>Handgjord keramikmugg i salviagrönt</image:title>
    </image:image>
    <image:image>
      <image:loc>https://cdn.example.com/images/keramik-mugg-livsstil.webp</image:loc>
      <image:title>Keramikmugg på ett frukostbord med bakverk</image:title>
    </image:image>
  </url>
</urlset>

När du behöver en bildsitemap

  • Dina produktbilder laddas via JavaScript (React, Next.js klientsidans rendering)
  • Bilder hostas på ett CDN med en annan domän än din sajt
  • Du har tusentals produkter och vill säkerställa fullständig crawl-täckning
  • Du nyligen migrerade bilder till en ny URL-struktur

Tips för bildsitemap

  1. Inkludera alla produktbilder, inte bara huvudbilden. Varje produktsida har vanligtvis 4-8 bilder. Lista alla.
  2. Använd <image:title>-taggen. Den ger Google ytterligare kontext om bilden.
  3. Skicka in sitemapen i Google Search Console. Google crawlar den inom några dagar.
  4. Håll den uppdaterad. När du lägger till nya produkter eller uppdaterar bilder, regenerera sitemapen.
  5. Du kan inkludera bildinlägg i din befintliga sitemap. Du behöver ingen separat fil -- lägg till <image:image>-noder inuti dina befintliga <url>-inlägg.

Strukturerad data för produktbilder

Strukturerad data (schema.org-markering) hjälper Google förstå att din bild är ett produktfoto och koppla den till rika resultat -- stjärnbetyg, pris, tillgänglighetsmarkningar och mer.

Produktschema med bild

{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "Handgjord keramikmugg - Salviagrön",
  "image": [
    "https://example.com/images/keramik-mugg-framsida.webp",
    "https://example.com/images/keramik-mugg-sida.webp",
    "https://example.com/images/keramik-mugg-livsstil.webp"
  ],
  "description": "Handdrejad keramikmugg i salviagrön glasyr, 35 cl kapacitet.",
  "brand": {
    "@type": "Brand",
    "name": "Clay & Craft"
  },
  "offers": {
    "@type": "Offer",
    "price": "289.00",
    "priceCurrency": "SEK",
    "availability": "https://schema.org/InStock"
  }
}

Viktiga punkter

  1. Inkludera flera bilder i image-arrayen. Google kan använda vilken som helst för rika resultat. Den första bilden prioriteras.
  2. Använd fullständig absolut URL. Relativa sökvägar fungerar inte i strukturerad data.
  3. Bilddimensioner spelar roll. Google rekommenderar att produktbilder är minst 800 px breda för rika resultat. Bilder under 400 px kan exkluderas.
  4. Testa med Googles Rich Results Test (search.google.com/test/rich-results). Det validerar din markering och visar vilka rika funktioner du är berättigad till.
  5. Strukturerad data garanterar inte rika resultat. Det gör dig berättigad. Google beslutar om de visas baserat på relevans och kvalitet.

Optimering för Google Bildsök

Google Bildsök är ett separat rankningssystem från vanlig webbsökning. Att optimera för det kräver förståelse för vad Google letar efter i bildresultat.

Rankningsfaktorer för Google Bildsök

  1. Alt-text-relevans -- Alt-texten är den starkaste signalen på sidan för bildrankning.
  2. Omgivande text -- Google läser stycket och rubrikskontexten runt bilden. En bild av en kaffemugg i ett avsnitt med rubriken "Handgjorda keramikmuggar" får starkare topikala signaler.
  3. Sidauktoritet -- Bilder på sidor med hög auktoritet rankas bättre. Din produktsidas SEO spelar roll.
  4. Bildfilnamn -- Beskrivande filnamn förstärker bildämnet.
  5. Bildfärskhet -- Nyligen uppdaterade bilder kan få en tillfällig rankningsboost.
  6. Strukturerad data -- Produktschema hjälper Google förstå bildkontexten.
  7. Sidhastighet -- Snabbare sidor får sina bilder crawlade oftare.

Google Lens och visuell sökning

Google Lens låter användare söka genom att ta ett foto eller ladda upp en bild. Detta är i allt högre grad hur kunder upptäcker produkter -- de ser något de gillar, riktar kameran mot det, och Google hittar visuellt liknande produkter.

För att optimera för Google Lens och visuell sökning:

  • Använd högkvalitativa bilder med rena bakgrunder. Google Lens matchar visuella funktioner, och stökiga bakgrunder minskar matchningens precision.
  • Inkludera flera vinklar. Fler bilder av din produkt från olika perspektiv ger Google Lens fler datapunkter att matcha mot.
  • Säkerställ att produktens strukturerade data finns. Google Lens prioriterar resultat som har produktschema med pris och tillgänglighet.

För en djupare titt på optimering för visuell sökning, se vår guide till Google Lens-optimering för produktfoton.

CDN-överväganden

Ett Content Delivery Network (CDN) serverar dina bilder från edge-servrar nära kunden, vilket minskar latens och laddningstider.

CDN-praxis för produktbilder

  1. Använd ett CDN för alla produktbilder. Att servera bilder från din ursprungsserver lägger till latens för varje kund som inte är geografiskt nära ditt datacenter.
  2. Aktivera automatisk formatkonvertering. De flesta CDN:er (Cloudflare, Fastly, Cloudinary, Vercel) kan servera WebP eller AVIF automatiskt baserat på webbläsar-stöd, så du behöver bara ladda upp ett format.
  3. Ställ in långa cacherubriker. Produktbilder ändras sällan. Använd Cache-Control: public, max-age=31536000, immutable (1 år). När du uppdaterar en bild, ändra URL:en (lägg till en versionshash eller nytt filnamn).
  4. Använd CDN:ens bildtransformerings-API. Istället för att generera 4 storlekar manuellt, ladda upp högupplösningsbilden och låt CDN:et ändra storlek direkt: cdn.example.com/images/mugg.webp?w=400&q=80.
  5. Säkerställ att CDN-domänen finns i din bildsitemap. Om dina bilder serveras från cdn.example.com, inkludera den fullständiga URL:en i din sitemap, inte ursprungs-URL:en.

Populära CDN-alternativ för e-handel

| CDN | Bildoptimering | Startpris | |-----|---------------|-----------| | Cloudflare (Polish + Image Resizing) | Auto-WebP, storleksändring, komprimering | Gratis (grundläggande) / $5/mån+ | | Cloudinary | Komplett transformerings-API, AI-baserad kvalitet | Gratisnivå / $89/mån | | Vercel Image Optimization | Autoformat, storleksändring, Next.js-nativt | Inkluderat med Vercel-hosting | | Imgix | Realtids-URL-baserade transformeringar | ~$10/mån | | Fastly Image Optimizer | Edge-transformeringar, WebP/AVIF | Företagsprissättning |

Plattformsspecifik bild-SEO

Olika e-handelsplattformar hanterar bild-SEO på olika sätt. Här är vad du behöver veta för de tre största.

Shopify

Shopify hanterar flera grundläggande bild-SEO-funktioner automatiskt, men det finns luckor:

  • Alt-text: Du måste lägga till den manuellt för varje produktbild i produktredigeraren. Shopify autogenererar inte alt-text.
  • Filnamn: Shopify bevarar ditt ursprungliga filnamn i URL:en, så döp om filer innan du laddar upp. När de väl är uppladdade kan du inte ändra filnamnet.
  • Format: Shopify konverterar automatiskt bilder till WebP för webbläsare som stödjer det och serverar JPEG som reserv.
  • Komprimering: Shopify komprimerar bilder vid uppladdning. Du kan inte styra kvalitetsnivån, och den är ibland aggressiv. Ladda upp med något högre kvalitet än ditt mål.
  • Lazy loading: Hanteras av Shopifys Dawn-tema och de flesta moderna teman. Verifiera att det är aktiverat för ditt tema.
  • Strukturerad data: De flesta Shopify-teman inkluderar grundläggande produktschema. Kontrollera med Googles Rich Results Test -- vissa teman missar image-egenskapen.

För en komplett genomgång av Shopify-bildoptimering, se vår guide till Shopify-produktbildsoptimering.

WooCommerce

WooCommerce ger dig mer kontroll men kräver mer manuell konfiguration:

  • Alt-text: Ställs in via WordPress Mediabibliotek. Massredigeringsplugin som "Media Library Assistant" låter dig uppdatera alt-text över hundratals bilder.
  • Filnamn: WordPress använder filnamnet som standard-URL-slug. Döp om före uppladdning.
  • Format: WordPress 5.8+ stödjer WebP nativt. Använd ett plugin som ShortPixel eller Imagify för automatisk WebP-konvertering och komprimering.
  • Lazy loading: WordPress lägger till loading="lazy" som standard sedan version 5.5. Men det lazy-laddar även hjältebilden, vilket försämrar LCP. Använd ett plugin eller temafilter för att exkludera bilder ovanför vecket.
  • Bildstorlekar: WooCommerce genererar flera miniatyrstorlekar vid uppladdning. Konfigurera dessa i WooCommerce > Inställningar > Produkter för att matcha din temalayout.
  • Strukturerad data: WooCommerce inkluderar grundläggande produktschema. Använd Yoast WooCommerce SEO-plugin eller RankMath för mer komplett markering inklusive bildarrayer.

Amazon

Amazons produktbilder har en unik SEO-dynamik eftersom Amazon kontrollerar sidan och den strukturerade datan. Dina optimeringsmöjligheter är begränsade men fortfarande viktiga:

  • Alt-text: Amazon autogenererar alt-text från din produkttitel. Du kan inte anpassa den. Det gör din produkttitel dubbelt viktig -- den tjänar som både listningens titel och bildernas alt-text.
  • Filnamn: Amazon döper om dina filer vid uppladdning. Filnamn spelar ingen roll för Amazon-SEO, men de spelar roll om dina bilder dyker upp i Google Bildsök-resultat (Google indexerar Amazons produktsidor).
  • Kompatibilitet över optimering: På Amazon spelar bildkompatibilitet (vit bakgrund, 1600 px+ upplösning, korrekt fyllnad) större roll än traditionell bild-SEO. En icke-kompatibel bild undertrycks, vilket är värre än någon SEO-straff.

För fullständiga Amazon-bildspecifikationer, se vår guide till Amazons krav på produktbilder.

Mäta bild-SEO-prestanda

Du kan inte förbättra det du inte mäter. Så här spårar du dina bild-SEO-insatser.

Google Search Console -- Sökutseende

Google Search Console visar hur dina bilder presterar i sök:

  1. Gå till Prestanda > Sökresultat.
  2. Filtrera på Söktyp: Bild.
  3. Granska visningar, klick, CTR och genomsnittlig position för bildsökfrågor.

Detta talar om vilka produktbilder som visas i Google Bildsök och vilka sökfrågor som utlöser dem.

PageSpeed Insights / Lighthouse

Kör dina produktsidor genom PageSpeed Insights (pagespeed.web.dev) och leta efter:

  • LCP-poäng -- Är din huvudproduktbild LCP-elementet? Är den under 2,5 sekunder?
  • "Properly size images" -- Serverar du bilder större än deras visningsstorlek?
  • "Serve images in next-gen formats" -- Använder du WebP/AVIF?
  • "Efficiently encode images" -- Är dina bilder korrekt komprimerade?
  • "Defer offscreen images" -- Är bilder under vecket lazy-laddade?

Core Web Vitals-rapport

I Search Console visar Core Web Vitals-rapporten fältdata (riktiga användarmätningar) för dina sidor. Kontrollera sektionen "Dåliga URL:er" -- produktsidor med stora ooptimerade bilder dyker ofta upp här.

Bildindexering

För att kontrollera hur många av dina produktbilder Google har indexerat:

  1. Använd site:dindomän.com i Google Bildsök.
  2. Sök efter specifika produkter för att se om deras bilder visas.
  3. Kontrollera Täckning-rapporten i Search Console för problem med bildsitemap.

Nyckeltal att följa månadsvis

| Mått | Verktyg | Mål | |------|---------|-----| | Bildsökvisningar | Google Search Console | Ökande månad för månad | | Bildsök-CTR | Google Search Console | Över 3 % | | LCP (mobil) | PageSpeed Insights | Under 2,5 sekunder | | CLS (mobil) | PageSpeed Insights | Under 0,1 | | Genomsnittlig bildfilstorlek | Manuell granskning eller Lighthouse | Under 200 KB för produktbilder | | Indexerade bilder | Google Bildsök (site:-fråga) | Alla produktbilder |

Hur AI-produktfotografering hjälper med bild-SEO

Om du använder AI-produktfotograferingsverktyg har du redan ett försprång på flera bild-SEO-faktorer.

AI-genererade produktbilder från verktyg som AIOE kommer ut ur pipelinen med:

  • Konsekventa dimensioner -- Varje bild genereras med din specificerade upplösning (1K, 2K eller 4K), vilket eliminerar problemet med blandade storlekar som orsakar layoutförskjutningar.
  • Rena bakgrunder -- Bilder med vit bakgrund och studiekvalitets livsstilsbilder ger Google Lens rena visuella funktioner att matcha.
  • Optimerade filstorlekar -- AI-utdata är vanligtvis 100-300 KB per bild vid 2K-upplösning, redan inom det idealiska området.
  • Flera vinklar och stilar -- Generera framsida, sida, livsstil och flatlay-varianter från ett enda produktfoto, vilket ger dig fler bilder för ditt galleri, din sitemap och din strukturerade data.

Du behöver fortfarande hantera alt-text, filnamn och strukturerad data själv -- det är innehållsbeslut som beror på dina nyckelord och produktbeskrivningar. Men bildkvaliteten och den tekniska optimeringen hanteras av AI-pipelinen.

För en bredare översikt över hur AI-produktfotografering fungerar, se vår kompletta guide till AI-produktfotografering.

Checklista för bild-SEO

Innan du publicerar någon produktsida, verifiera dessa punkter:

Alt-text och filnamn

  • Varje produktbild har unik, beskrivande alt-text
  • Alt-text inkluderar produktnamnet och ett naturligt nyckelord
  • Filnamn är i gemener, bindestrecksseparerade och beskrivande
  • Inga standardkamerafilnamn (IMG_xxxx, DSC_xxxx)

Komprimering och format

  • Bilder serveras i WebP med JPEG som reserv
  • Produktbilder är komprimerade till kvalitet 80-85
  • Genomsnittlig filstorlek är under 200 KB per bild
  • EXIF-metadata är borttagen

Prestanda

  • Hjälte-/huvudproduktbilden använder loading="eager" och fetchpriority="high"
  • Alla andra bilder använder loading="lazy"
  • Bilder har explicita bredd- och höjdattribut
  • srcset ger minst 3 storleksvarianter
  • LCP är under 2,5 sekunder på mobil

Strukturerad data och sitemaps

  • Produktschema inkluderar image-egenskapen med flera bild-URL:er
  • Bildsitemap inkluderar alla produktbilder
  • Bildsitemap är inskickad i Google Search Console

Plattformsspecifikt

  • Alt-text är ifylld för varje bild i din plattforms produktredigerare
  • Bilder uppfyller plattformsspecifika krav (Shopifys autokomprimering, Amazons vita bakgrund, etc.)

Vanliga frågor

Hur skriver jag alt-text för produktbilder?

Beskriv produkten specifikt: inkludera produktnamn, färg, material, storlek och den vy eller vinkel som visas. Skriv naturligt, som om du beskriver bilden för någon som inte kan se den. Inkludera ett relevant nyckelord, men proppa inte nyckelord. Håll det under 125 tecken. Exempel: "Rostfri isolerad vattenflaska, 750 ml, matt svart, framsida."

Påverkar bildfilnamn SEO?

Ja. Google läser filnamnet som en relevanssignal innan den ens bearbetar bildinnehållet. Ett beskrivande filnamn som rostfri-vattenflaska-svart.webp ger Google tydliga topikala signaler, medan IMG_4392.jpg inte ger några. Döp alltid om produktbilder innan du laddar upp dem till din e-handelsplattform.

Vilket är det bästa bildformatet för produktfotografering på webben?

WebP är det bästa standardformatet 2026. Det erbjuder 25-35 % mindre filer än JPEG vid samma visuella kvalitet, stödjer transparens och har 97 %+ webbläsar-stöd. Använd <picture>-elementet med WebP som primära källa och JPEG som reserv. För plattformar som Amazon som inte godtar WebP, använd JPEG med kvalitet 85-90.

Hur mycket bör jag komprimera produktbilder?

För produktbilder på webben, komprimera till kvalitet 80-85 (förlust). På denna nivå är komprimeringsartefakter osynliga på normalt betraktningsavstånd, och filstorlekarna är 60-80 % mindre än originalet. Håll produktbilder under 200 KB där det är möjligt. För hjältebilder som behöver maximal skärpa, använd kvalitet 85-90.

Behöver jag en bildsitemap för min e-handelssajt?

Du behöver en om dina bilder laddas via JavaScript (React/Next.js klientrendering), hostas på en annan domän (CDN) eller om du har en stor katalog (500+ produkter). En bildsitemap säkerställer att Google upptäcker alla dina produktbilder, även de som vanlig crawlning kan missa. Det tar 30 minuter att sätta upp och kan automatiseras för att regenereras när du lägger till produkter.

Hur påverkar produktbilder Core Web Vitals?

Produktbilder är vanligtvis den största faktorn i LCP (Largest Contentful Paint) och CLS (Cumulative Layout Shift). En ooptimerad hjältebild kan pressa LCP över 4 sekunder, och bilder utan explicita dimensioner orsakar layoutförskjutningar under laddning. Åtgärda detta genom att komprimera bilder, använda responsiva srcset, lazy-ladda bilder under vecket och alltid ställa in bredd/höjd-attribut.

Hur optimerar jag produktbilder för Google Lens?

Använd högkvalitativa bilder med rena, ostörande bakgrunder. Inkludera flera vinklar av din produkt. Säkerställ att din produktsida har strukturerad data (schema.org produktmarkering) med pris och tillgänglighet -- Google Lens prioriterar resultat med rik produktinformation. AI-genererade produktbilder med studiokvalitets ljussättning och vita bakgrunder presterar särskilt bra vid matchning i visuell sökning.

Redo att testa AI-produktfotografering?

10 gratis credits — inget kreditkort krävs

Prova AIOE gratis