Tutorial | Miklas Njor
Old man smokes cigarette while holding holstered pistol  Miklas Njor  Miklas Njor

Foto Søgemaskine Optimering for Fotografer

ALT attributes, Title attributes og Fil navne er dine venner.

De er vigtige værktøjer for dig som fotograf, hvis du ønsker at din hjemmeside og dine billeder skal dukker op øverst i søgeresultater.

Du vil at dine kommende kunder skal finde dit site via dine valgte keywords, men også finde dine fotos når de søger efter billeder de vil købe.

Lad mig starte med at sige, at jeg mener man altid skal gøre sit site søgemaskine klar og altid have brugeren for øje – ikke kun søgemaskiner og webcrawlere. Og inden du begynder at tjecke min kildekode, så husk: Gør som jeg siger, ikke som jeg gør! Okay, videre med denne turorial.

Den Alternative Text

Kort gennemgang af termerne

ALT tag – Kort alternativ tekstbeskrivelse af billedet.
Title tag – Specificerer ekstra infomation om elementet og er også det brugerne ser, når de køre musen hen over billedet.
Fil navn – I stedet for _BPL_2453.JPG gives billedet et beskrivende navn som f.eks. Old-guy-holding-gun.jpg.

Der er tre grunde til at bruge ALT tags (alternativ text tag).

Hjælp folk med handicap
Den vigtigste grund til at bruge ALT tags er at tekst-baserede browsere, der bruges af hel eller halvblinde, eller ordblinde, læser ALT teksten højt for dem.

De bruges stadig i stor udstrækning og er afhængige af præcise billedbeskrivelser for at kunne forstå al indholdet på dine sider. Så husk dem.

ALT tagget vises ikke i normale browsere, med mindre billedet ikke dukke frem. Browseren viser kun Title tagget.

Sidens hastighed
Der findes stadig folk der surfer rundt på nettet via telefon modem eller langsomme ISDN forbindelser, så den mængde af data der er på en html side skal være forholdsmæssigt skrabet, hvis siden skal nå at loade inden der klikkes væk.

Folk der er på nettet via modem slår nogle gang ‘vis billed’ funktionen fra for at undgå for lange ventetider og læser ALT tags for selv at bestemme om det er værd at åbne billedet.

Hjælpe webcrawlere med at læse indholdet
Og sidst men ikke mindst: søgemaskinernes webcrawlere kan ikke læse fotos. De er meget afhængige af ALT tags for at få så meget information ud af billedet og siden som muligt.

De læser selvfølgelig også teksten omkring billedet.

Okay, sådan skal koden se ud

<img src=/billedmappen/fotoets-navn.jpg alt=foto beskrivelse title=foto titel>

Til venstre ser du billedets sti. I midten ALT tagget. Og til højre finder du fotoets titel.

Old man smokes casually while holding holstered pistol

Sådan bruges ALT tagget
Husk at ALT tagget hovedsageligt er til for brugere med syns-handicap. De får teksten læst højt, så det er vigtigt at beskrivelsen er præcis og giver mening, og at den ikke er fyldt med keywords.

Selvom der ikke er nogen begrænsning på hvor mange ord du må have i dit ALT tag, så vil sætninger med for mange ord og specielt mange keywords sætte gang i Black Hat SEO sirenen hos Google og andre søge maskine tjenester og du kan blive skubbet helt ud af søgeresultaterne.

Så hold dig et sted imellem fem til ti ord maksimum.

Min egen medicin
En kort ti ord maksimum præcis billedbeskrivende ALT tag for billedet her kunne være: ‘Gammel mand med cigaret og pistol i hylster’.

Jeg ved, at det får alle mulige billeder frem på nethinden, når man læser det højt, men det er bedre end ‘foto’. Sammen med en god billedbeskrivelse og anden tekst til billedet, skal brugeren nok forstå, hvad der foregår.

Brug kun ALT tags til billeder du vil beskrive. Til billedelementer som baggrunds billeder, spacers, snurrende glober og den slags skal du skrive alt="" (og helst gemme den som gif’er når det er muligt).

NOTE: Vær opmærksom på, at hvis du ønsker at dit site skal være XHTML-compliant så vil det ødelægge det – XHTML kræver, at alle grafik elementer har ALT tags. Dette kan også ødelægge usability standards.

Du kan også bruge et billede som et link. Så skrives det sådan her:

<a href=/artikelmappe/artikel.php><img src=/billedmappen/fotoets-navn.jpg alt=fotoets beskrivelse title=fotoets titel></a>

Sådan bruger du ALT tags, Title Tags og Filnavne i fotos

ALT tag
– ALT tags læses af text browsere.
– De vises ikke i almindelige browsere, medmindre billedet ikke loader.
– Brug kun ALT tags til at annotere vigtige billeder.
– Fem til ti ord maksimum.
– Lad være med at fylde ALT tags med urelaterede eller gentagende keywords (det ligner spam).
– Til billedelementer der ikke er vigtige (f.eks. baggrunde og lign.) bruges alt="".
– ALT tags skal være ultra kort sætninger. Ikke en opremsning af keywords.
– ALT tags har større vægt i søgemaskiner end Title tags.

Title tags
– Brug Title tag til at lave en mere beskrivende titel til billedet.
– Title tags vises når man kører musen hen over fotoet.
– 128 tegn maksimum, men det må gerne være kortere.
– Lad være med at overfylde det med keywords.

Filenames
– Det er (vist nok) bedre at bruge bindestreg (-) i stedet for underscores (_). Og det er lettere at skrive!
– Navngiv præcist og nøgternt.
– Fjern “stop ord” som (til, fra, i, han, hun, en, et o.s.v.)
– Ikke længere filnavne end 32 tegn.

Titel Tagget
Google læser også title tagget. Her kan du skrive en længere beskrivelse af billedet. 128 tegn er maksimum. Titel tags vises, når man bevæger musen hen over billedet.

Fil Navn
Brug korte og beskrivende navne.

Der er lidt debat om, hvorvidt man skal bruge bindestreg (-) eller underscore (_). Det menes at Google betragter ord med underscore imellem som ét ord og ord med bindestreg som to ord. Hvis du vil være helt sikker så vælger du altså bindestreg.

Filstørrelse og mappestruktur
Jeg har læst flere steder at billedfilens størrelse kan have betydning, fordi webcrawlere kan bedst lide at siderne load hurtigt, men har man lyst til at vise dårlige jpg’ede fotos til sine seere eller kommende kunder. Nej!

Desuden så er de billeder her på sitet ret store og de dukke alligevel op i Google’s billed søgning. En vej ud af problemet kunne være noget javascript eller et CSS hack, men det er måske at gøre lidt meget ud af det.

Du skal også være opmærksom på, at hvis du bruger Photoshops Imageready til at eksportere og gemme billeder til web, så bliver dine metadata slettet fra filen, så fotoet er uden kontakt info eller information om billedets ophavsret.

Angående mappestruktur og fotos (img src:"fotos/indien/dyr/tigere/Royal-Bengal-tiger.jpg"), så tror jeg ikke at det har nogen som helst effekt. Så længe man ikke blokerer webcrawlernes færden med robot.txt filen så går det. Og i øvrigt lægger de fleste automatiserede CMS’er – som f.eks. wordpress – billeder i års og måned navngivne mapper, så du vil bare have en masse bøvl med at oprette de specifikke mapper.

Old man smokes casually while holding holstered pistol THUMB

Andre overvejelser
– Selve websidens Pagetitle er altid vigtig.

– Lav en mindre version af billedet ca. 150x150px. Det er godt for socialmedia hjemmesider som Digg og Facebook, der ofte skanner siden for at finde små thumbnails der kan sættes ind ved siden af dit link.

W2G_kommentar12

Bag om forsiden – en bagtanke vækkes til live

Kom med til et kig bag om scenen af en Where2Go forsider og se hvordan den blev til. Vi vil snakke om hvorfor og hvordan ting blev gjort. Og i samme åndedrag vise eksempler.
Hvis du har spørgsmål, så må du meget gerne stille dem i kommentaren forneden.




Fotos af Kennet Havgaard
Fotosessionen med Peter Frödin og Hella Joof (fotograferet af fotograf Kennet Havgaard) gik rigtigt godt og art director Mads Bastell er meget tilfreds med udfaldet.

Et par dage senere sidder han og gennemgår kontakt-arkene fra optagelserne og prøver at vælge de fotos der skal bruges i magasinet. “Det kunne være rigtig fedt, hvis de havde stået oven på deres navne”, tænker han for sig selv.



En hurtig skitse laves.

Det vil måske være muligt at bygge navnene af store bogstaver, men det er i hvert fald for sent nu og desuden, så vil det tage en krig og koste en formue at skulle bygge de store bogstaver. Men måske man kunne photoshoppe sig fra det?
Mads laver en hurtig skitse og vender ideen med redaktørene, som giver ham grønt lys.

Thunderbirds are go.

Jeg har den holdning, at fotografer skal kobles på et projekt hurtigst muligt og det er noget Mads er god til.

Vi diskuterer projektet grundigt igennem. Kunne det lade sig gøre og vil slutresultatet fremstå trovædigt? Hvad med kameravinklen. Kan den genskabes? Hvilken type bogstaver skal vi bruge og hvor finder vi dem?

Med en stram deadline hængende over hovedet, kan vi overhovedet nå det? Hvordan skal bogstaverne placeres og vil navnene overhovedet passe ind? Kan vi få skiltene til at virke gennemsigte?

Burde de hænge fra snorene når vi fotograferer dem? Ville det være bedre at skrive bogstaverne i photoshop og så bearbejde dem dér indtil de ligner rigtige bogstaver?

Jeg havde for nyligt lavet et mindre photoshop arbejde for Where2Go af en vej på Frederiksberg i København. Et foto der består af ca. 60 fotos der er stitched (sammensat) og det at photoshoppe billeder er noget jeg har gjort tidligere.

Todays show is sponsered by the letters IRL

Vi beslutter os for at så meget som muligt skal være elementer fra virkeligheden. Projektets achilles hæl er bogstaverne som Frödin og Joof står på, så vi begynder straks at søge på nettet efter forretninger i nærheden, der har store bogstaver på lager, og mindst lige så vigtigt, de bogstaver som navnene består af.

Vi finder 17cm høje bogstaver hos Panduro Hobby. De har alle dem vi skal bruge med undtagelse af ö’et i Peters navn, men det kan vi lave ved at fifle med et almindeligt O.

Til skiltenes overskrifter finder vi mindre bogstaver hos Tiger. Brødteksten printes på overhead ‘papir’ og limes på plexiglas (dette vil senere vise sig at være et problem). Det store Where2Go skilt skæres i hånden og måler ca. 20cm i højden.




Bogstaverne ser ud af helvede til og vinklen er forkert.
Jeg begynder at skyde bogstaverne en af gangen og fra mange vinkler. Så smider jeg dem ind i photoshop og paster bogstavernen sammen. Det ligner lort. Vinklen er helt forkert og bogstaverne er utroværdigt tynde. De ville ikke kunne stå på dem. Prøver at skyde fra flere vinkler, men det fungerer bare ikke.

Frustrationen begynder at melde sig og lidt irreteret stabler jeg dem, som de ville stå på rad og række i virkeligheden og ta-daaa. Der var den. Deres vakkelvornhed virker troværdtig og vinklen er helt perfekt.
Super. Projektet er kommet over sin første store bakke.

De fleste skilte var ok, men det store ‘GO-skilt* viser sig at være et problem, fordi arkene med lim ikke går hele vejen ud til kanten.

All fotos kommer en tur forbi photoshop, hvor de bliver sorteret og får en hurtig billedbehandling. Der er ingen grund til at bruge for mange kræfter på det, før jeg ved hvad der hører til hvorhenne.
En hurtig skitse sendes tilbage til Mads, så han kan følge med i projektet. Det gør vi løbende fra nu af. OK, nu begynder det sjove.

Djævlen er i detaljerne


Begge personer frittes og en grå baggrund sættes ind bag dem.
Kør musen over billedet forneden for at se det originale billede.

Skygger i Photoshop

Skyggerne er lavet ved at tage bogstavs-layeret (drag to copy), ændre perspektivet og forvrænge til det ser ok ud, vælge området omkring dem (magic wand) og vælge en større ‘feather’.

Derefter invertes, så vi kun maler inden for bogstaverne. Laver et nyt layer og så får den en gang brush til at fylde det valgte område med farve (100% sort). Derefter bruger jeg ‘erasertool’ til at graduere overgangen af skyggen. Til sidst sætter jeg layerets gennemsigtighed til omkring 25% – 50%. Nu begynder det at se realistisk ud.

Reflektioner i Photoshop

Jeg kopierer layeret, vender det på hovedet og forvrænger det. Erasetool bruges til at lave graduering og fade reflektionen.

Skiltene i bunden sættes ind

Skiltene består af adskillige layers, så jeg kan lave perspektiv og kontrolere deres gennemsigtighed.
De deles i ‘gennemsigtig plastik-skilt baggrund’, ‘brød tekst’ og ‘overskrift’ layers.
På den måde er det meget lettere at styre alle elementerne. Layers er din ven.

Skiltene i midten sættes ind

Flere skygger lægges på og det hele begynder at virke meget realistisk.

Øverste skilte sættes ind

På et tidspunkt var Where2Go skiltet gråt med et metalic look. Men vi valgte at smide nogle glade farver på.OK. Næsten færdig…

De øverste skilte får skygger

Ta-Daaaa