Bilder / img-taggen

Bilder förekommer på de flesta sajter och fyller flera olika syften. Den ena är att utgöra design-element, som bakgrunder, ramar, skuggor med mera. Dessa bilder används inte i sökmotoroptimeringsarbetet. De bör så långt det går placeras i CSS-filer för att över huvud taget inte förekomma i den sidkod som vi vill att sökmotorerna ska indexera. Det andra syftet är att illustrera och förstärka vårt budskap och då är bilderna oerhört viktiga och det är viktigt att använda dem på rätt sätt. Samma sak gäller när bilder används för navigering, dvs som länkar.

Synomymer: foton, illustrationer, img-taggen

Engelsk översättning: Images / photos, illustrations, img-tag

Naturhistoriska Riksmuseet – fotograferat från Brunnsviken i Stockholm

Det här är ett exempel på en bild som vi försökt optimera för att få med i Googles bildsök. Bilden föreställer Naturhistoriska riksmuseet i Stockholm och är tagen från en båt i Brunnsviken sommaren 2009.

Naturhistoriska Riksmuseet i Stockholm.

Genom att förse Google med ledtrådar om att bilden föreställer just Naturhistoriska Museet i stockholm och att bilden är tagen från en båt i Brunnsviken sommaren 2009 så hoppas vi att kunna hitta den om ett tag vid en sökning på just naturhistoriska riksmuseet, kanske i kombination med Brunnsviken. Knappast någon kassako, men förhoppningsvis lätt nog förr att illustrera principen. Bilden är dessutom försedd med information om licensen, i det här fallet Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0), vilket borde ge Google möjlighet att lista den vid en sökning på bilder man får använda under vissa omständigheter.

”Det är min bild, vill någon använda den blir jag bara glad” skulle man kanske kunna kalla just den licensformen.

Bildernas betydelse för sökmotoroptimeringen

Google kan inte ”läsa” en bild, dvs sökmotorn gör inga försök att tolka text skriven i en bild, även om den finns där. Värt att tänka på om man använder bilder för rubriker eller navigering, då man kan gå miste om ett par av de viktigaste texterna som står till ens förfogande. Undvik därför så långt det är möjligt att skapa text med bilder.

Foton och illustrationer däremot kan och bör användas i artiklar och texter. Google noterar dem, läser de attribut som finns till <img>-taggen och tar även hänsyn till själva bildens namn. Även storleken (kb) och höjd/bredd-förhållande indexeras och utgör grund för i vilken utsträckning bilden kommer med i googles bildsökningar. En trafikkälla så god som någon för många sajter!

Låt oss titta på vad som står till buds när vi lägger in en bild på vår sajt:

Först och främst, <img..-taggen, som skall placera bilden på sidan. Den skall naturligtvis minst innehålla bildens placering på sajten (bildens URL). Så här:

<img src="/images/produkter/kameror/nikon/d90.jpg" />

Det där är en alldeles utmärkt sökväg och filnamn som ger Google alla möjligheter att konstatera att bilden är en Nikon D90-kamera. Men om vi tittar på sidan i en textläsare, som inte visar bilder då? Eller behöver få sidan uppläst pga nedsatt syn? Då finns det ett attribut till img-taggen som heter ”alt”, en förkortning för ”alternate” eller ”alternativ”. Det är den text som då ersätter bilden och som kan läsas upp vid behov. Alt-texten skall alltså i princip beskriva vad som är på bilden. Alt-taggen är tvingande i vissa HTML-standarder och bör verkligen användas. Så här ser vår uppdaterade tagg ut:

<img src="/images/produkter/kameror/nikon/d90.jpg" alt="Nikon D90 Kamera" />

Google tar större hänsyn till alt-taggar än man skulle kunna tro, allra helst när bilden dessutom är länkad, då alt-texten i princip ersätter ankartexten. Men håll syftet i bakhuvudet – den är till för textbaserade läsare och för handikapstöd, det är inte en plats att trycka in en mängd ickerelevanta nyckelord!

Alt-taggen visas i vissa webbläsare (mest notabelt äldre versioner av Internet Explorer) upp när man för musen över en bild. Helt felaktigt – det är title-attributet till bilden som skall visas då och även om det är omdiskuterat hur Google använder title-attributet vid indexering, så bör det användas av det skälet. Vi går vidare och lägger till title-attributet till vår bild och får:

<img src="/images/produkter/kameror/nikon/d90.jpg" alt="Nikon D90 Kamera" title="Nikon D90 med två zoomobjektiv för endast 9.995:- under januari!" />

Den texten kommer nu visas när man håller musen över bilden. Det är också tänkbart att Google tar hänsyn till den och inget tyder på att det skulle vara negativt att använda title-attributet om man inte ägnar sig åt att knöka nyckelord (”keyword stuffing”).

Här är ett exempel på hur det ser ut, kod först och resultat sedan (bilden saknas med flit, då visas nämligen alt-texten precis som en textläsare skulle göra):

Att optimera för själva bilden – för Googles bildsök

Förutom att skänka din sida sökkraft i form av extra innehåll och nyckelord så kan själva bilden bli en trafikmagnet i sig själv via Google Bildsök. Men vilka bilder är det som hamnar där och hur väljer Google ut vad som faktiskt är ett vattenfall i den otroliga mängd bilder som finns? De kan ju inte gå in och titta på alla bilder och datorer är inte så bra på att klura ut vad ett vattenfall är i en bild. De är dock rätt bra på att hitta hudtoner och liknande för att avgöra vad som eventuellt är sexuellt innehåll och som måste filtreras. Självklart i kombination med kringliggande text – och där har vi nyckeln även till vårt vattenfall.

Så här säger Google själva, vilket även kan tolkas som att de tar viss hänsyn till title-attributet för att bestämma om och hur bilden skall inkluderas i deras bildsök, vilket gör title-attributet viktigt åtminstone här:

The page the image is on, and the content around the image (including any captions or image titles), provide search engines with important information about the subject matter of your image.

Förutom att titta på innehåll och kringliggande text, och title-/alt-attributen, så är även storleken och bildens placering på sidan viktig. Ju större bilder (upp till en rimlig gräns) desto större chans att få den indexerad. Små bilder kan du länka till en större originalbild med bra alt/title-text!

Åter igen, bildens namn. Heter bilden vattenfall.jpg så gör det enorm skillnad mot att kalla den IMG_9392.jpg.

”Above the fold” eller ovanför vecket

Ett gammalt tidningsuttryck är ”above the fold”, dvs en mer prominent placering på sidan – ovanför vecket. Google tros ta hänsyn till om bilden normalt sett är synlig utan att behöva rulla ner på sidan. Det finns bra argument för varför så inte skulle vara fallet – inte minst för att vi alla har olika skämupplösningar, en del läser i mobiltelefoner och det går att manipulera bildpositionen med CSS, men gör en sökning på ”above the fold” i kombination med bilder och seo, så kommer du hitta många som hävdar att det stämmer. Vi har inte provat, men åter igen – det lär inte skada och om det inte skadar och inte är besvärligt kan man lika gärna göra så.

Ange en licens för bilder

Google bildsök kan numera filtrera bilder efter licens. Det innebär att man kan välja att söka bara efter bilder som får användas fritt till exempel. Ofta kräver dock upphovsrättsinnehavaren en ”attribution”, dvs ett erkännande – vilket brukar innebära en länk. Genom att släppa på upphovsrätten på dina bilder kan du alltså skaffa inlänkar från dem som väljer att använda dem. Räkna inte med alltför många, men det kan vara värt besväret om det är ett populärt motiv.

Om du tittar på källkoden för exemplet med Naturhistoriska Museet, så ser själva bildtaggen ut så här:

<img src="http://www.abatopia.se/wp-content/uploads/naturhistoriska-riksmuseet-brunnsviken-250x161.jpg" alt="Naturhistoriska Riksmuseet i Stockholm, sett från Brunnsviken" title="Naturhistoriska Riksmuseet en solig sommardag, fotograferat från Brunnsviken" width="250" height="161" rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/" />

Vän av ordning noterar två otillåtna attribut, ”rel” och ”href” i imagetaggen. De ingår i en föreslagen ”RDFa”-standard för att kunna lägga till metadata till fler element i form av attribut som ”about”, ”rel” och ”href”. Den här sidan kommer alltså inte att gå igenom W3C:s valideringskontroll av det skälet (och säkert ett par andra), men det är ett av Googles föreslagna sätt att förstå vilken licens som skall användas för en bild. Här är en bra resurs för fler sätt att ange licens för bilder till Google Bildsök.

Egentligen säger det där nog bara att miniatyren (den som är 250px bred) har den licensen, det ska bli intressant om Google snappar upp att det gäller även den stora bilden eller om det måste lösas på något annat vis.

Google Imgages Bot

Några timmar efter publiceringen av den här artikeln hämtade Googles bildrobot upp bilden på Naturhistoriska Museet. Det är en fördel att ha tillgång till sina accessloggar när man sökmotoroptimerar, för att följa Googles aktivitet på sajten och sedan i SERParna:

66.249.72.114 - - [15/Jan/2011:07:13:54 +0100] "GET /wp-content/uploads/naturhistoriska-riksmuseet-brunnsviken.jpg HTTP/1.1" 200 618754 "-" "Googlebot-Image/1.0"

Bilden finns inte med i sökresultaten ännu, men det kan ta ganska lång tid efter att spindeln varit på besök.

Hittade bilden den 25:e januari

Vet inte hur länge den legat där, det var några dagar sedan jag kollade, men ca tio dagar kan vi väl säga att det tog. Etta på den något långsökta frasen ”naturhistoriska riksmuseet brunnsviken” och runt femteplats för bara ”naturhistoriska riksmuseet”. Tyvärr förstod inte Google att det var en licens som tillåter användning av bilden, troligen för att det är en miniatyrbild som omges av den informationen och Google kanske inte anser att de kan låta licensen följa med till den länkade bilden. Vi ska följa upp det här någon dag, men vi låter den ligga en stund till för att se om det blir några förändringar.